官方示例：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=sketch-geometries  HTML： ~~~ <div id="viewDiv"> <div id="topbar"> <button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="Draw point"></button> <button class="action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></button> <button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button> <button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button" title="Draw rectangle"></button> <button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button" title="Draw circle"></button> <button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button> </div> </div> ~~~ CSS： ~~~ #topbar{background: #fff;position: absolute;top: 15px;right: 15px;padding: 10px;} .action-button{font-size: 16px;background-color: transparent;border: 1px solid #D3D3D3;color: #6e6e6e;height: 32px;width: 32px;text-align: center;box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);} .action-button:hover, .action-button:focus{background: #0079c1;color: #e4e4e4;} .active{background: #0079c1;color: #e4e4e4;} ~~~ ~~~ require([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/widgets/Sketch/SketchViewModel', 'esri/layers/GraphicsLayer', 'dojo/domReady!' ], function(Map, MapView, Graphic, SketchViewModel, GraphicsLayer) { var map = new Map({ basemap: 'streets' // dark-gray }); var mapView = new MapView({ map: map, container: 'js_map', center: [102.9331224074, 25.1049040686], zoom: 6, // rotation: -127.7 }); // 添加graphicLayer var graphicsLayer = new GraphicsLayer(), graphicsObj = {}, updateGraphic = null; map.layers.add(graphicsLayer); var pointSymbol = { type: "simple-marker", style: "square", color: "#8A2BE2", size: "16px", outline: { color: [255, 255, 255], width: 3 } } var polylineSymbol = { type: "simple-line", color: "#8A2BE2", width: "4", style: "dash" } var polygonSymbol = { type: "simple-fill", color: "rgba(138,43,226, 0.8)", style: "solid", outline: { color: "white", width: 1 } } mapView.when(function() { var sketchViewModel = new SketchViewModel({ view: mapView, layer: graphicsLayer, pointSymbol: pointSymbol, polylineSymbol: polylineSymbol, polygonSymbol: polygonSymbol }); mapView.on("click", function(evt) { mapView.hitTest(evt).then(function(res) { var results = res.results; if(results.length && results[results.length-1].graphic) { if(!updateGraphic) { updateGraphic = results[results.length-1].graphic; graphicsLayer.remove(updateGraphic); sketchViewModel.update(updateGraphic.geometry); } } }); }); function addGraphic(evt) { var geometry = evt.geometry; var symbol; switch(geometry.type) { case "point": symbol = pointSymbol; break; case "polyline": symbol = polylineSymbol; break; default: symbol = polygonSymbol; break; } var id = Date.now(); graphicsObj[id] = new Graphic({ attributes: {id: id}, geometry: geometry, symbol: symbol }); graphicsLayer.add(graphicsObj[id]); updateGraphic = null; alert('繪制完成~'); setActiveButton(); } sketchViewModel.on("draw-complete", addGraphic); // 繪制完成 sketchViewModel.on("update-complete", addGraphic); // 更新完成 sketchViewModel.on("update-cancel", addGraphic); // 更新取消 function setActiveButton(selectedButton) { mapView.focus(); var elements = document.getElementsByClassName("active"); for(var i=0; i<elements.length; i++) { elements[i].classList.remove("active"); } if(selectedButton) { selectedButton.classList.add("active"); } } // 按鈕-繪制點 document.getElementById("pointButton").onclick = function() { sketchViewModel.create("point"); setActiveButton(this); } // 按鈕-繪制線 document.getElementById("polylineButton").onclick = function() { sketchViewModel.create("polyline"); setActiveButton(this); } // 按鈕-繪制區域 document.getElementById("polygonButton").onclick = function() { sketchViewModel.create("polygon"); setActiveButton(this); } // 按鈕-繪制矩形 document.getElementById("rectangleButton").onclick = function() { sketchViewModel.create("rectangle"); setActiveButton(this); } // 按鈕-繪制圓 document.getElementById("circleButton").onclick = function() { sketchViewModel.create("circle"); setActiveButton(this); } // 按鈕-重置 document.getElementById("resetBtn").onclick = function() { // sketchViewModel.reset(); // graphicsLayer.removeAll(); if(updateGraphic) { sketchViewModel.reset(); var selectedGraphicId; graphicsLayer.graphics.items.forEach(function(v) { var id = v.attributes.id; if(graphicsObj[id]) selectedGraphicId = id; }); if(selectedGraphicId) { graphicsLayer.remove(graphicsObj[selectedGraphicId]); delete graphicsObj[selectedGraphicId]; } } else { alert('請選擇一個圖層~'); } setActiveButton(); } }); }); ~~~