ArcGIS API for JavaScript 实现graphicsLayer弹窗

时间 2021-08-15 标签 arcgis graphics infowindow attributes javascript

需求

需要在graphicsLayer中实现点击图标，出现弹窗显示图标的详情信息。

实现效果

开发思路

获取图层中的要素
对获取的要素进行graphic化（设置图标、属性）并添加到graphicsLayer中
给graphicsLayer添加弹窗

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
    <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>