Question

我们正试图找到有关如何在点击地图上的新点后隐藏标记的建议或实施选项。

在我们的应用程序中，一旦用户点击地图上的特定图钉，我们就会显示与点击事件相关联的新图钉（位于不同的纬度/经度位置）。即一个点应该在俄克拉荷马州，但地图显示德州，所以一旦点击了标记德克萨斯，就会显示俄克拉荷马州的新标记。我们的问题是，无论何时用户选择新点，我们都无法隐藏＆＃34;上一个选择的标记，然后使我们的屏幕变得杂乱。

有关我们如何处理此问题的任何建议？

代码如下：

require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker", "esri/InfoTemplate", "esri/Color", "dojo/dom", "dojo/domReady!", "esri/geometry/Polyline", "esri/geometry/geodesicUtils", "esri/units","esri/symbols/SimpleLineSymbol"],   
 function( Map, Point,SimpleMarkerSymbol, Graphic, arrayUtils, domStyle, ColorPicker, InfoTemplate, Color, dom, Polyline, geodesicUtils, Units,SimpleLineSymbol) {   
 map = new Map("mapDiv", {  
 center  : [-98.35, 35.50],  
 zoom    : 5,  
 basemap : "topo"  
 //basemap types: "streets", "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"  
 } );  
 map.on("load", pinMap);  
 var arr = [];  
 var initColor, iconPath;  
 function pinMap( ) {  
 map.graphics.clear();  
 iconPath  = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";  
 var infoContent = "<b>Id</b>: ${Id} ";  
 var infoTemplate = new InfoTemplate(" Details",infoContent);  
 $.post( '{{ path( 'points' ) }}', {}, function( r ) {   
 arrayUtils.forEach( r.points, function( point ) {  
 if (point.test==1) {  
 initColor = "#CF3A3A";  
 }  
 else {  
 initColor = "#FF9900";  
 }  
 arr.push(point.id,point.pinLon1,point.pinLat1,point.pinLon2,point.pinLat2);  
 var attributes = {"Site URL":point.url,"Activity Id":point.id,"Updated By":point.updated,"Customer":point.customer};  
 var graphic   = new Graphic(new Point(point.pinLon1,point.pinLat1),createSymbol(iconPath,initColor),attributes,infoTemplate);  
 map.graphics.add( graphic );  
 map.graphics.on("click",function(evt){  
 var Content = evt.graphic.getContent();  
 var storeId = getStoreId(Content);  
 sitePins(storeId);  
 });  
 } );  
 }, 'json' );  
 }  
 function getStoreId( content ){  
 var init = content.split(":");  
 var fin= init[2].split("<");  
 return fin[0].trim();  
 }  
 function sitePins( siteId ) {  
 iconPathSite  = "M15.834,29.084 15.834,16.166 2.917,16.166 29.083,2.917z";  
 initColorSite = "#005CE6";  
 var infoContent = "<b>Distance</b>: ${Distance} Miles";  
 var infoTemplate = new InfoTemplate(" Distance to Location",infoContent);  
 var indexValue=0;  
 for (var index = 0; index < arr.length; index++){  
 if (arr[index]==storeId){  
 indexValue =index;  
 }  
 }  
 pinLon1 = arr[indexValue+1];  
 pinLat1 = arr[indexValue+2];  
 pinLon2 = arr[indexValue+3];  
 pinLat2 = arr[indexValue+4];  
 var line = {"paths":[[[pinLon1, pinLat1], [pinLon2, pinLat2]]]};  
 line = new esri.geometry.Polyline(line);  
 var lengths = Number(esri.geometry.geodesicLengths([line], esri.Units.MILES)).toFixed(2);  
 var attributes = {"Distance":lengths};  
 var graphicSite = new Graphic(new Point (pinLon1,pinLat1), createSymbol(iconPathSite, initColorSite),attributes,infoTemplate);  
 var pathLine = new esri.Graphic(line, new esri.symbol.SimpleLineSymbol());  
 map.graphics.add( pathLine );  
 map.graphics.add( graphicSite );  
 }  

 function createSymbol( path, color ) {  
 var markerSymbol = new esri.symbol.SimpleMarkerSymbol( );  
 markerSymbol.setPath(path);  
 markerSymbol.setSize(18);  
 markerSymbol.setColor(new dojo.Color(color));  
 markerSymbol.setOutline(null);  
 return markerSymbol;  
 }  
 } );  
 </script>

Answer 1

就我得到的代码而言，它显示了标记与点之间的距离然后单击。您在地图上的每个点击事件上创建点和折线。以下可以提供帮助：

1）请在折线，图形网站上提供id'abc'。

2）然后在每次点击事件中删除id为'abc'的图形和折线。

    dojo.forEach(this.map.graphics.graphics, function(g) {  
         if( g && g.id === "abc" ) {  
        //remove graphic with specific id  
           this.map.graphics.remove(g);  
         }  

}, this);

3）然后你可以创建新的折线并指向你已经在做的事情。

隐藏ArcGis标记

1 个答案: