• arcgis js api 4.X 自定义工具按钮


    // All material copyright ESRI, All Rights Reserved, unless otherwise specified.
    // See https://js.arcgis.com/4.10/esri/copyright.txt for details.
    //>>built ; ;sdfsd sd;;; 
    define('esri/widgets/Widget esri/widgets/support/widget'.split(' '), function(Widget, widget) {
      console.log("baseButtonWedgit")
      var baseButtonWedgit = Widget.createSubclass({
        constructor: function(options) {  
          if (options) {
            dojo.mixin(this, options);
          }
        },
        cancelGo: function() {},
        go: function() {
          alert('go go go');
        },
        _go: function() {
          if (this.go) {
            this.go.call(this,this);
          }
        },
        getLable: function() {
          return this.lable || '标题';
        },
        getTitle: function() {
          return this.title || 'title';
        },
        getDivClass :function(){
          return {};
        },
        getIconClass :function(){
          return {};
        },
        render: function() {
          var title =  this.getTitle(this);
          var lable = this.getLable(this);
          var divClass = this.getDivClass(this); 
          var iconClass = this.getIconClass(this);
          return widget.tsx(
            'div',
            {
              bind: this,
              class: this.classes('esri-home esri-widget--button esri-widget',divClass),
              role: 'button',
              tabIndex: 0,
              onclick: this._go,
              onkeydown: this._go,
              'aria-label': lable,
              title: title,
            },
            widget.tsx('span', {
              'aria-hidden': 'true',
              class: this.classes('esri-icon', iconClass),
              innerText: this.title,
    
            }),
            widget.tsx(
              'span',
              {
                class: 'esri-icon-font-fallback-text',
              },
              'button'
            )
          );
        },
      });
      return baseButtonWedgit;
    });
        /**
         * 添加工具按钮
         */
        this.addButtonWedgit = (options = {}) => {
          // options.map = map;
          // options.view = view;
          const button = new BaseButtonWedgit(options);
          view.ui.add(button, {
            position: options.position || 'bottom-right',
          });
          return button;
        };
    const btn1 = this.pmap.addButtonWedgit({ 
          go: (e) => {
            const {domNode} = e;
            console.log(domNode) 
            if (this.maptype === '3D') {
              this.maptype = '2D';
              self.setState({ is3D: false });
              btn1.title = '二维地图'
              btn1.set("title", '二维地图');
            } else {
              this.maptype = '3D';          
              btn1.title = '三维地图'
              self.setState({ is3D: true });
            }
          },
          getTitle:()=>this.maptype === '3D'?"二维地图":"三维地图" ,
          getIconClass:()=>this.maptype === '3D'?{"esri-icon-2d":true}:{"esri-icon-3d":true} 
        });
        btn1.set("title", '三维地图');
        btn1.set("maptype", '2D');
        btn1.set("buttonClass", 'buttonClass');
      }

  • 相关阅读:
    学习ASP.NET Core Blazor编程系列一——综述
    PHPExcel插件生成exel表:有的excel能打开,有的excel打不开
    测试架构师如何落地性能测试方案(二)
    pytest数据驱动 pandas
    测试开发工程师到底是做什么的?
    什么是测试架构师(经验总结)
    测试架构师CAP原理(最简单)
    测试开发mysql性能调优总结(一)
    测试开发HTTP请求过程(一)
    pytest数据驱动(最简单)
  • 原文地址:https://www.cnblogs.com/Leechg/p/10916903.html
Copyright © 2020-2023  润新知