ArcGIS API For JavaScript 4.15 绘制地图：GraphicsLayer、弹出气泡和在地图上绘制线

女爷i 2022-12-26 15:27 207阅读 0赞

## 1、HTML 页面 ##

## index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第三讲-弹出气泡Popup</title>
        <link rel="stylesheet" href="http://localhost/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="http://localhost/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    #viewDiv { 
        width: 100%;
        height: 100%;
    }

## 3、JavaScript API 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/PopupTemplate"
    ], function(
        Map,
        MapView,
        MapImageLayer,
        TileLayer,
        FeatureLayer,
        GraphicsLayer,
        Graphic,
        Point,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        PopupTemplate) { 
    
        var worldCities = new MapImageLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "全球主要城市",
            opacity: 0.5
        });
    
        var worldCountries = new TileLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "全球国家"
        });
    
        var citiesRenderer = { 
            type: "simple",
            symbol: { 
                type: "simple-marker",
                size: 12,
                color: "yellow",
                outline: { 
                    width: 2,
                    color: "red"
                }
            }
        };
    
        // 弹出气泡的模板
        var popupTemplate = new PopupTemplate({ 
            title: "{CITY_NAME}城市详细信息",
            // content: "<table><tr><td>城市名称</td><td>{CITY_NAME}</td></tr>" +
            // "<tr><td>人口数量</td><td>{POP}</td></tr></table>"
            content: [{ 
                type: "fields",
                fieldInfos: [{ 
                    fieldName: "OBJECTID",
                    label: "要素ID"
                }, { 
                    fieldName: "POP",
                    label: "人口"
                }, { 
                    fieldName: "CITY_NAME",
                    label: "城市名称"
                }]
            }]
        });
    
        var cities = new FeatureLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer/0",
            title: "城市",
            outFields: ["OBJECTID", "POP", "CITY_NAME", "POP_RANK"],
            definitionExpression: "POP>1500000",
            renderer: citiesRenderer,
            popupTemplate: popupTemplate
        });
    
        var graphicsLayer = new GraphicsLayer({ 
            title: "前端绘制图层"
        });
    
        var map = new Map({ 
            layers: [worldCountries, worldCities, cities, graphicsLayer]
        });
    
        // 图形要显示的点
        var point = new Point({ 
            longitude: 111.5,
            latitude: 40.8
        });
    
        // 点图形的符号
        var pointSymbol = new SimpleMarkerSymbol({ 
            style: "cicle",
            size: 15,
            color: "red",
            outline: new SimpleLineSymbol({ 
                width: 2,
                color: "blue"
            })
        });
    
        var attributes = { 
            name: "zhangsan",
            age: 20
        }
    
        var pointGraphic = new Graphic({ 
            geometry: point,
            symbol: pointSymbol,
            attributes: attributes
        });
    
        graphicsLayer.add(pointGraphic);
    
        var pointGraphic2 = new Graphic({ 
            geometry: new Point({ 
                longitude: 110.8,
                latitude: 34.6
            }),
            symbol: pointSymbol
        });
    
        graphicsLayer.add(pointGraphic2);
    
        var polyline = { 
            type: "polyline",
            paths: [
                [-111.30, 52.68],
                [-98, 49.5],
                [-93.94, 29.89]
            ]
        };
    
        var polylineSymbol = { 
            type: "simple-line",
            color: [226, 119, 40],
            width: 4
        };
    
        var polylineAttr = { 
            Name: "Keystone Pipeline",
            Owner: "TransCanada"
        };
    
        var polylineGraphic = new Graphic({ 
            geometry: polyline,
            symbol: polylineSymbol,
            attributes: polylineAttr
        });
    
        graphicsLayer.add(polylineGraphic);
    
        var view = new MapView({ 
            container: "viewDiv",
            map: map,
            center: [0, 0],
            zoom: 0
        });
    
        // view.on("click", function(event) { 
        // view.popup.autoOpenEnabled = false;
        // var longitude = event.mapPoint.longitude;
        // var latitude = event.mapPoint.latitude;
        // view.popup.open({ 
        // location: event.mapPoint,
        // title: "信息提示",
        // content: `经度：${longitude}<br>纬度：${latitude}`
        // });
        // });
    });

## 4、实现效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3fca03f8c7e24a27b5b756d4abb8d9b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/85c960247d3f437995eeb8ede96da3e3.png