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');
  }