事件调用类方法,该类调用栓结内的另一个类方法(相同实例)

时间:2018-12-14 21:38:22

标签: javascript dojo

我正在尝试创建一个处理图形形状的类。它来自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(通过调试器),

方法未定义。似乎在使用挂钩时,只能看到变量,而不能看到方法。我在做什么错-我确实不能使用全局“ 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();
        }),
    });
});

1 个答案:

答案 0 :(得分:0)

在类定义中调用该函数时,应键入this.addToMap。就像您使用this.map

最终,您应该在构造函数之前定义变量maptoolbar

map: null,
toolbar: null,

constructor: ...