ArcGIS API for JavaScript 实现graphicsLayer弹窗

朴灿烈づ我的快乐病毒、 2021-09-17 04:12 472阅读 0赞

### 需求 ###

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

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 开发思路 ###

1.  获取图层中的要素
2.  对获取的要素进行graphic化（设置图标、属性）并添加到graphicsLayer中
3.  给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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/7fe4bb7a62594346b9ec9e01c13dabe6.png