api里面用来在地图上绘制图形的工具位于esri/toolbars/draw
模块,同时还需要搭配esri/graphic
模块以及点、线、面的样式相关的模块。
draw 模块用来绘图,之所以还要用到graphic模块是因为,所有绘制的图形都是以Graphic类的形式添加到地图的graphic图层的,所以我们需要将绘制的图形构造成Graphic对象(这个过程中可以设置绘制图形的样式)才能加到地图里面。
步骤
首先创建地图。接着在地图的load事件中添加创建工具条对象toolbar的操作设置toolbar对象的draw-end事件,也就是说绘图完成后应该进行什么操作,在这里,我们需要将绘制的几何形状搭配上样式构造成Graphic对象,并且添加到地图的graphic图层中然后设置相关按钮的单击事件,实现单击按钮激活toolbar(绘图工具)的功能示例代码如下:
<html><head><meta charset="utf-8"><title>符号与图形</title><link rel="stylesheet" href="/3.9/js/dojo/dijit/themes/tundra/tundra.css" /><link rel="stylesheet" href="/3.9/js/esri/css/esri.css"><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><style type="text/css">html, body, #main, #mapDiv{/* mapDiv必须设置样式,否则可能无法正常显示,dijit布局也要有相应的样式 */padding: 0;margin: 0;width: 100%;height: 100%;}</style><script src="/3.9/"></script><script>var toolbar, map;var sms, sls, sfs;// 点、线、面样式require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/draw","esri/graphic",// 样式相关的模块"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol",// 解析页面中dojo元素"dojo/parser","dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"], function(Map, TiledLayer, Draw, Graphic, MarkerSymbol, LineSymbol, FillSymbol, parser) {parser.parse(); // 解析页面map = new Map("mapDiv");var url = "/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";var layer = new TiledLayer(url);map.addLayer(layer);// 在地图的加载事件中创建绘图工具map.on("load", create_toolbar); // 绑定相应的按钮 activate_tool();// 绑定按钮的单击事件function activate_tool() {var btns = document.getElementsByClassName('btn-info');for(var i = 0; i < btns.length; ++ i) {var type = btns[i].getAttribute('aria-label');// 清除按钮if(type == "clear") {btns[i].onclick = function() {map.graphics.clear();}continue;}// 其他按钮btns[i].onclick = function() {var tool = this.getAttribute('aria-label');toolbar.activate(Draw[tool]);map.hideZoomSlider();}}}// 创建绘图工具条function create_toolbar(themap) {toolbar = new Draw(map);// 绘图完毕之后,由add_to_map函数将图形显示在地图上toolbar.on('draw-end', add_to_map);}// 添加至地图function add_to_map(evt) {toolbar.deactivate();var symbol = null;switch(evt.geometry.type) {case 'multipoint':case 'point':symbol = new MarkerSymbol();break;case 'polyline':symbol = new LineSymbol();break;default:symbol = new FillSymbol();break;}// 构造Graphic对象var graphic = new Graphic(evt.geometry, symbol);map.graphics.add(graphic);map.showZoomSlider();// 恢复可缩放状态}});</script></head><body class="tundra"><div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"><div id="top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="width: 100%; height: 40px;"><button class="btn btn-info" type="button" aria-label="POINT">点</button><button class="btn btn-info" type="button" aria-label="MULTI_POINT">多点</button><button class="btn btn-info" type="button" aria-label="LINE">线</button><button class="btn btn-info" type="button" aria-label="POLYGON">多边形</button><button class="btn btn-info" type="button" aria-label="RECTANGLE">矩形</button><button class="btn btn-info" type="button" aria-label="CIRCLE">圆</button><button class="btn btn-info" type="button" aria-label="ELLIPSE">椭圆</button><button class="btn btn-info" type="button" aria-label="TRIANGLE">三角形</button><button class="btn btn-info" type="button" aria-label="clear">清空</button></div><div id="left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 80px;">左侧菜单</div><div id="center" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"><div id="mapDiv"></div></div></div></body></html>