引入js.arcgis/jQuery
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css"> <script src="https://js.arcgis.com/3.24/"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
地图容器
<div id="map"> <button id="addbtn">addGeometry</button> <button id="clearbtn">clearGeometry</button> </div>
引入模块
"esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/geometry/Polygon", "esri/InfoTemplate", "esri/toolbars/draw", "esri/layers/GraphicsLayer", "dijit/Menu", "dijit/MenuItem", "esri/toolbars/edit", "dojo/domReady!"
加载底图
map = new Map("map", { basemap: "osm", center: [118.779, 32.044], zoom: 12 });部分变量
var drawtoolbar; var edittoolbar; var menu; var selected; var gl = new GraphicsLayer();
点击按钮，进行画图
编辑图形
完整代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>SimpleDemo</title> <link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css"> <script src="https://js.arcgis.com/3.24/"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> html, body, #map { height: 100%; padding: 0; margin: 0; } #addbtn { position: absolute; top: 20px; left: 80px; z-index: 999; } #clearbtn { position: absolute; top: 20px; left: 180px; z-index: 999; } </style> <script> require([ "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/geometry/Polygon", "esri/InfoTemplate", "esri/toolbars/draw", "esri/layers/GraphicsLayer", "dijit/Menu", "dijit/MenuItem", "esri/toolbars/edit", "dojo/domReady!" ], function (Map, Graphic, SimpleMarkerSymbol, SimpleFillSymbol, Point, Polygon, InfoTemplate, Draw, GraphicsLayer, Menu, MenuItem,Edit) { map = new Map("map", { basemap: "osm", center: [118.779, 32.044], zoom: 12 }); var drawtoolbar; var edittoolbar; var menu; var selected; var gl = new GraphicsLayer(); $("#addbtn").click(function () { map.disableMapNavigation(); drawtoolbar = new Draw(map); drawtoolbar.activate(Draw.FREEHAND_POLYGON); drawtoolbar.on("draw-complete", function (evt) { drawtoolbar.deactivate(); map.enableMapNavigation(); var fillsymbol = new SimpleFillSymbol(); gl.add(new Graphic(evt.geometry, fillsymbol)); map.addLayer(gl); createMenu(); }); }); $("#clearbtn").click(function () { gl.clear(); }); function createMenu(){ edittoolbar = new Edit(map); map.on("click", function () { edittoolbar.deactivate(); }); createGraphicMenu(); } function createGraphicMenu() { menu = new Menu({}); menu.addChild(new MenuItem({ label: "移动", onClick: function () { edittoolbar.activate(Edit.MOVE,selected); } })); menu.addChild(new MenuItem({ label: "编辑", onClick: function () { edittoolbar.activate(Edit.EDIT_VERTICES, selected); } })); menu.addChild(new MenuItem({ label: "旋转/缩放", onClick: function () { edittoolbar.activate(Edit.SCALE|Edit.ROTATE, selected); } })); menu.addChild(new MenuItem({ label: "删除", onClick: function () { gl.remove(selected); } })); menu.startup(); gl.on("mouse-down", function (evt) { selected = evt.graphic; menu.bindDomNode(evt.graphic.getDojoShape().getNode()); }); } }); </script> </head> <body class="claro"> <div id="map"> <button id="addbtn">addGeometry</button> <button id="clearbtn">clearGeometry</button> </div> </body> </html> 画图
右键编辑/旋转/缩放/删除
代码其实很简单，主要是熟练应用官网API
