需求
需要在graphicsLayer中實作點選圖示，出現彈窗顯示圖示的詳情資訊。
實作效果
開發思路
- 擷取圖層中的要素
- 對擷取的要素進行graphic化（設定圖示、屬性）并添加到graphicsLayer中
- 給graphicsLayer添加彈窗
實作代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" target="_blank" rel="external nofollow" >
<script src="https://js.arcgis.com/3.25/"></script>
<style>
*{
padding: 0;
margin: 0;
}
html,body,#mapDiv{
height: 100%;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<script>
require([
"dojo/ready",
"dojo/parser",
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"dojo/domReady!"
], function(ready,parser,Map,ArcGISDynamicMapServiceLayer,FeatureLayer,GraphicsLayer,Graphic,PictureMarkerSymbol,InfoTemplate) {
parser.parse();
var map = new Map("mapDiv");
var baseLayer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/wfMap/ngstreet/MapServer");
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/wfMap/ngstreetShape/MapServer/1",{
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var graphicsLayer = new GraphicsLayer();
var szPictureSymbol = new PictureMarkerSymbol('./images/loc.png', 16, 16);
map.addLayers([baseLayer,featureLayer,graphicsLayer]);
var infoTemplate = new InfoTemplate("Attributes",
"<p>FID:${FID}</p>" +
"<p>NAME:${NAME}</p>" +
"<p>address:${address}</p>"
);
var handle = map.on("update-end", function(){
for(var item of featureLayer.graphics){
var graphic = new Graphic(item.geometry, szPictureSymbol,item.attributes);
graphicsLayer.add(graphic);
}
graphicsLayer.setInfoTemplate(infoTemplate);
handle.remove();
});
})
</script>
</body>
</html>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)