如何在esri映射javascript api上添加和删除动态标记

Question

如何使用javascript api添加和删除esri映射上的动态标记？当我在图形层中添加标记时，它会被添加，但我如何删除它并通过另一个经纬度添加新标记？

到目前为止，这是我的代码；

require(
["esri/map",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/tasks/ProjectParameters",
"esri/tasks/GeometryService",
"dojo/dom",
"dojo/on",
"esri/dijit/HomeButton",
"dojo/domReady!"
],
function setupmap(Map, Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService, dom, on, HomeButton) {
var map = new Map("map-container", {
center: [83.0179802, 25.32327],
zoom: 13,
basemap: "streets"
});
map.graphics.clear();
map.on("load", function (evt) {
var home = new HomeButton({map: map}, "HomeButton");
home.startup();
picSymbol = new PictureMarkerSymbol(iconType, 20, 20);
$.each(detailsJSON, function (location, lstNodes) {
var locArr = location.split("--");
var latitude=locArr[0];
var longitude=locArr[1];
var geometryPoint = new Point(longitude, latitude,new SpatialReference(4326));
map.graphics.add(new Graphic(geometryPoint, picSymbol));
});
});
}
);

Answer 1

您可以存储对要添加的Graphic对象的引用，然后使用remove(graphic)方法将其删除。

let graphic = new Graphic(geometryPoint, picSymbol);
map.graphics.add(graphic);
...
map.graphics.remove(graphic);

也可以使用方法removeAll()从图层中删除所有图形。

有关更多信息，请参阅arcgis-js-api参考。

为了使您的组件更无状态，您可以使用Graphic的attributes集合来存储标记(或Id或类似内容(，并根据该值删除项。

添加时

let graphic = new Graphic(geometryPoint, picSymbol);
graphic.attributes = { "tag": "toBeRemovedLater" };
map.graphics.add(graphic);

移除时

angular.forEach(map.graphics.graphics, (graphic: any) => {
if (graphic.attributes && graphic.attributes.tag == "toBeRemovedLater")
map.graphics.remove(graphic);
});

Answer 2

您可以使用Sketch Widget来简化添加和更新图形的过程。

const sketch = new Sketch({ availableCreateTools: ['point'], layer: graphicsLayer, view, }); view.ui.add(sketch, 'top-right');