ArcGis 마커 숨기기

Question

지도에서 새 점이 클릭되면 마커를 숨기는 방법에 대한 제안 또는 구현 옵션을 찾으려고합니다.

우리의 응용 프로그램에서 사용자가지도의 특정 핀을 클릭하면 click 이벤트와 관련된 새로운 위도/경도의 핀이 표시됩니다. 나는. 포인트는 오클라호마에 있어야하지만지도에는 텍사스가 표시되므로 마커 텍사스를 클릭하면 오클라호마의 새로운 마커가 표시됩니다. 문제는 사용자가 새 지점을 선택할 때마다 이전 선택 항목의 표식을 "숨길"수 없으므로 화면을 혼란스럽게합니다.

이 문제를 어떻게 처리 할 수 ​​있을지에 대한 제안이 있으십니까?

코드는 다음과 같습니다 :

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

는 지금까지 내가 코드를 얻을, 그것은 마커과 점 사이의 거리가 다음 clicked.You지도에 클릭 할 때마다 이벤트에 점과 폴리 라인을 만드는 보여줍니다. 다음은 도움이 될 수 있습니다 :

1) 폴리 라인, 그래픽 사이트에 'abc'라고 ID를 제공하십시오.

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) 그러면 이미 수행중인 것처럼 새 폴리 라인과 포인트를 만들 수 있습니다.