Currently, we want to create a custom widget to draw polygon on the map(arcgis web appbuilder 1.3). But it shows that the Uncaught TypeError: Can not read property 'activate' of undefined. (In Widget.js file )
The related line is drawToolbar.activate(esri.toolbars.Draw.POLYGON);
Here is my code:
define(['dojo/_base/declare',
'jimu/BaseWidget',
'esri/urlUtils',
'esri/config',
'esri/map',
'esri/graphic',
'esri/tasks/RouteTask',
'esri/tasks/RouteParameters',
'esri/tasks/FeatureSet',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'dojo/_base/array',
'dojo/on',
'dojo/dom',
'dojo/domReady!',
'dijit/registry',
'dijit/layout/BorderContainer',
'dijit/layout/ContentPane',
'dijit/form/HorizontalSlider',
'dijit/form/HorizontalRuleLabels',
'esri/toolbars/draw',
'esri/tasks/GeometryService',
'esri/symbols/SimpleFillSymbol',
'esri/tasks/DataFile',
'dojo/_base/connect'
],
function(declare, BaseWidget,urlUtils, esriConfig, Map, Graphic, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,
Color, array, on, dom, registry,
Draw, GeometryService,SimpleFillSymbol,DataFile,connect
) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-MyWidget',
name: 'MyWidget',
startup: function(){
var map, Draw, routeTask, routeParams, routes= [];
var drawToolbar;
var geometryService;
var stopSymbol, barrierSymbol, polygonBarrierSymbol,routeSymbols;
var mapOnClick_addStops_connect, mapOnClick_addBarriers_connect,mapOnClick_addPolygonBarriers_connect;
geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = this.map;
routeTask = new RouteTask("https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");
routeParams = new RouteParameters();
routeParams.polygonBarriers = new FeatureSet();
routeParams.outSpatialReference = {"wkid":102100};
var polygonBarrierSymbol= new esri.symbol.SimpleFillSymbol();
routeSymbols = {
"Route 1": new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(5),
"Route 2": new SimpleLineSymbol().setColor(new Color([0,255,0,0.5])).setWidth(5),
"Route 3": new SimpleLineSymbol().setColor(new Color([255,0,255,0.5])).setWidth(5)
};
on(dom.byId("addpolygonBarriersBtn"), "click", addpolygonBarriers);
on(dom.byId("clearpolygonBarriersBtn"), "click", clearpolygonBarriers);
function createToolBar(){
drawToolbar = new esri.toolbars.Draw(map);
drawToolbar.on("draw-end", addToMap);
}
function activateTool(){
drawToolbar.activate(esri.toolbars.Draw.POLYGON);
map.hideZoomSlider();
}
function addToMap(evt) {
drawToolbar.deactivate();
routeParams.polygonBarriers.features.push(
map.graphics.add(new esri.Graphic(evt.geometry, polygonBarrierSymbol)) );
}
var node = dojo.byId("addpolygonBarriersBtn");
dojo.connect(node, "click", activateTool);
map.on("load", createToolBar);
//Begins listening for click events to add polygonbarriers
function addpolygonBarriers() {
removeEventHandlers();
mapOnClick_addPolygonBarriers_connect = on(map, "onclick", addPolygonBarrier);
}
//Clears all polybarriers
function clearpolygonBarriers() {
removeEventHandlers();
for (var i=routeParams.polygonBarriers.features.length-1; i>=0; i--) {
map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);
}
}
// Add Polygon
function addPolygonBarrier(evt) {
drawToolbar.activate(esri.toolbars.Draw.POLYGON);
var drawEnd_connect = dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
routeParams.polygonBarriers.features.push( map.graphics.add(new esri.Graphic(geometry, polygonBarrierSymbol)) );});
}
function removeEventHandlers() {
if (mapOnClick_addPolygonBarriers_connect) {
mapOnClick_addPolygonBarriers_connect.remove();
}
}
}
});
});
