1、本文实现的功能为鼠标与地图之间的交互，能够在地图上绘制不同形状的图形
2、代码部分主要讲到的为Graphic函数的相关功能
<!DOCTYPE html> <html> <head> <title>地图绘制工具</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css"> <script src="https://js.arcgis.com/3.29/"></script> <style> #map{ position:relative; height:400px; width:100%; } </style> </head> <body> <div id="drawTool"> <button id="multipoint" >绘制点</button> <button id="line">绘制折线</button> <button id="polygon">绘制面</button> <button id="circle">绘制圆</button> <button id="rectangle">绘制矩形</button> <button id="remove">清除全部图形</button> <button id="disabledraw">关闭绘制工具</button> </div> <div id='map'> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="background-color: #37a2ee"> 鱼吃鱼罐头 @版权所有 </div> <script> require([ "esri/map", "dojo/on", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "esri/graphic", "dojo/colors", "dojo/domReady!"], function ( Map, on, Basemap, BasemapLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, Graphic, Color) { var map = new Map("map", { basemap: 'osm', center: [122.127653, 36.009423] }); //使用toolbar上的绘图工具 var toolBar = new Draw(map); //创建点要素 var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,new Color("#FFFCC"),12); //线要素 lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([245, 0, 0]), 3); //面要素 polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 245, 0, 0.25])); var drawTool = document.getElementById("drawTool"); drawTool.onclick = function (evt) { var ev = evt || window.event; var target = ev.target || ev.srcElement; if (target.nodeName.toLocaleLowerCase() == 'button') { switch (target.id) { case 'point': toolBar.activate(Draw.POINT, { showTooltips: true }); break; case 'multipoint': toolBar.activate(Draw.MULTI_POINT, { showTooltips: true }) break; case 'line': toolBar.activate(Draw.POLYLINE, { showTooltips: true }) break; case 'polygon': toolBar.activate(Draw.POLYGON, { showTooltips: true }) break; case 'circle': toolBar.activate(Draw.CIRCLE, { showTooltips: true }) break; case 'rectangle': toolBar.activate(Draw.RECTANGLE, { showTooltips: true }) break; case "remove": map.graphics.clear(); break; case 'disabledraw': toolBar.deactivate(); break; } } } toolBar.on("draw-complete", drawEndEvent) function drawEndEvent(evt) { //添加图形到地图 var symbol; if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = pointSymbol; } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol; } else { symbol = polygonSymbol; } map.graphics.add(new Graphic(evt.geometry, symbol)) } }); </script> </body> </html>
3、同时代码还实现了删除图形与关闭绘制工具的功能