从网上找了好多教程,大多数都是实现点击一次按钮绘制一个点,无法实现一次性绘制多个点的功能。最后还是官方文档靠谱提供了现成的方法。
首先需要定义一个按钮用于触发绘制事件
<button id="btn_multipoint">绘制多个点</button>
const btn_multipoint = document.getElementById("btn_multipoint");
通过事件调用绘制方法
btn_multipoint.addEventListener("click",function(){ enableCreateMultipoint(drawTool,mapView); })
需要创建绘图工具
//创建绘图工具 var drawTool = new Draw({ view: mapView, });
绘制点调用方法:
// 绘制多个点 function enableCreateMultipoint(drawTool) { let action = drawTool.create("multipoint"); // Give a visual feedback to users as they move the pointer over the view action.on("cursor-update", function (evt) { createMultipointGraphic(evt.vertices); }); // Fires when the user clicks, or presses the "F" key on the view // Can also fire when the "R" key is pressed to redo. action.on("vertex-add", function (evt) { createMultipointGraphic(evt.vertices); }); // Fires when the "Z" key is pressed to undo the last added point action.on("vertex-remove", function (evt) { createMultipointGraphic(evt.vertices); }); // Create a point when user clicks on the view or presses "C" key. action.on("draw-complete", function (evt) { createMultipointGraphic(evt.vertices); }); } function createMultipointGraphic(vertices) { mapView.graphics.removeAll(); let multipoint = new Multipoint({ points: vertices, spatialReference: mapView.spatialReference, }); const graphic = new Graphic({ geometry: multipoint, symbol: { type: "simple-marker", style: "square", color: "red", size: "16px", outline: { color: [255, 255, 0], 3, }, }, }); mapView.graphics.add(graphic); }
<button id="btn_multipoint">绘制多个点</button>