dojo 调用hitch中另一个类方法(相同示例)的类方法的事件

uinbv5nw  于 2022-12-08  发布在  Dojo
关注(0)|答案(1)|浏览(173)

我正在尝试创建一个用于处理绘制形状的类。它来自ArcGIS API for JS(Esri)[https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=toolbar_draw][1]]中的示例
在index.html中,我有一个脚本标记来保存我的javascript。它创建MyMultiSelect示例(来自MyMultiSelect.js)。在MyMultiSelect js文件中,我必须使用全局示例'myMs'来设置事件处理程序:
'this.toolbar.on("draw-end", this.myMs.addToMap)' and this.toolbar.on("draw-end", this.myMs.activateTool)'.
addToMap和activateTool都是MyMultiSelect.js类的方法/函数。
this.activateToMap and this.activateTool(通过调试器),
方法是未定义的。似乎当使用hitch时,它只看到变量,而不是方法。我做错了什么-我真的不能使用全局'myMs',我这样做是为了测试。谢谢!
任何帮助都是最好的!

index.html (script tag)
...
    "dojo/domReady!"
function(Map, Draw, Graphic,
                 SimpleMarkerSymbol, 
                 SimpleLineSymbol, 
                 SimpleFillSymbol,
                 parser, 
                 registry,
                 ext,
                 sr,
                 MyMultiSelect,
        ) { 
            parser.parse(); 

            let lastExtent;
            let defaultExtent = new esri.geometry.Extent({
                xmin: -10919311.41681004,
                ymin: 3612806.5850415034,
                xmax: -10625793.228194851,
                ymax: 3748100.125106317,
                "spatialReference": {"wkid":3857}
            });                     

            map = new esri.Map("map", {
                extent: ((lastExtent) ? lastExtent : defaultExtent),
                basemap: "streets",
                infoWindow: new esri.dijit.Popup({}, dojo.create("div")),
                sliderPosition: "top-right",
                logo: false,
                fadeOnZoom: true,
                force3DTransforms: true,
                // navigationMode: "css-transforms",
                optimizePanAnimation: true,
                //lods: gs.conf.lods,
            });

            // map.on("click", addPoint);

            // function addPoint(evt) {
            //  var latitude = evt.mapPoint.getLatitude();
            //  map.infoWindow.setTitle("Check");
            //  map.infoWindow.setContent("HI");
            //  map.infoWindow.show(evt.mapPoint);
            // }

            myMs = new MyMultiSelect(map);
            // map.on("load", createToolbar);
            map.on("load", myMs.createToolbar);

MyMultiSelect.js
...
    "dojo/domReady!"
],
function (Map, Draw, Graphic,
          SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
          parser, registry, declare, lang) {

    return declare(null, {

        constructor: function(map) {
            this.map = map;
            this.toolbar = null;
            console.log("HI");
        },

        createToolbar: lang.hitch(this, function() {
            this.toolbar = new Draw(this.map);
            this.toolbar.on("draw-end", this.myMs.addToMap);

            registry.forEach(function(d) {
                // d is a reference to a dijit
                // could be a layout container or a button
                if ( d.declaredClass === "dijit.form.Button" ) {
                    d.on("click", this.myMs.activateTool);
                }
            });
        }),

        addToMap: lang.hitch(this, function(evt){
            let symbol;
            this.toolbar.deactivate();
            this.map.showZoomSlider();
            switch (evt.geometry.type) {
              case "point":
              case "multipoint":
                symbol = new SimpleMarkerSymbol();
                break;
              case "polyline":
                symbol = new SimpleLineSymbol();
                break;
              default:
                symbol = new SimpleFillSymbol();
                break;
            }
            var graphic = new Graphic(evt.geometry, symbol);
            this.map.graphics.add(graphic);
        }),

        activateTool: lang.hitch(this, function(evt) {
            let btn = dijit.registry.byId('pt');
            var tool = btn.label.toUpperCase().replace(/ /g, "_");
            this.toolbar.activate(Draw[tool]);
            this.map.hideZoomSlider();
        }),
    });
});
zzlelutf

zzlelutf1#

在类定义中调用该函数时,应键入this.addToMap
最后,您应该在建构函式之前定义变数maptoolbar

map: null,
toolbar: null,

constructor: ...

相关问题