Gis地图标记+弹窗

最新推荐文章于 2024-06-18 11:23:38 发布
545522390
最新推荐文章于 2024-06-18 11:23:38 发布
阅读量584
点赞数
本文链接：https://blog.csdn.net/u013239476/article/details/108188105
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
        Add or remove graphics from a FeatureLayer | Sample | ArcGIS API for
        JavaScript 4.16
    </title>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #add {
            margin-bottom: 5px;
        }

        #actions {
            padding: 5px;
        }

        button:disabled {
            opacity: 0.4;
            -moz-opacity: 0.4; /* Firefox and Mozilla browsers */
            -webkit-opacity: 0.4; /* Safari */
            cursor: default;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Basemap",
            "esri/layers/VectorTileLayer",
            "esri/layers/FeatureLayer",
            "esri/Graphic",
            "esri/widgets/Legend"
        ], function (
            Map,
            MapView,
            Basemap,
            VectorTileLayer,
            FeatureLayer,
            Graphic,
            Legend
        ) {
            // create map using custom basemap from ArcGIS Online
            const map = new Map({
                basemap: new Basemap({
                    baseLayers: [
                        new VectorTileLayer({
                            portalItem: {id: "474f0cb226884dd68f707ab0f2f1aa10"}
                        })
                    ],
                    referenceLayers: [
                        new VectorTileLayer({
                            portalItem: {id: "1768e8369a214dfab4e2167d5c5f2454"}
                        })
                    ]
                })
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [-122.18, 37.49] // longitude, latitude
            });

            var measureThisAction = {
                title: "联系他",
                id: "concatc",
                className: "concatc",
                image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/live/Measure_Distance16.png"
            };
            var template = {
                // autocasts as new PopupTemplate()
                title: "{Type}",
                content: "内容：{Content}，标记的ID：{ObjectID}",
                actions: [measureThisAction]
            };
            view.popup.on("trigger-action", function (event) {
                // Execute the measureThis() function if the measure-this action is clicked
                if (event.action.id === "concatc") {
                    alert('请拨打' + parseInt(Math.random() * (19999999999 - 13999999999 + 1) + 13999999999, 10))
                }
            });

            // create empty FeatureLayer
            const monumentLayer = new FeatureLayer({
                // create an instance of esri/layers/support/Field for each field object
                title: "National Monuments",
                fields: [
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    },
                    {
                        name: "Content",
                        alias: "Content",
                        type: "string"
                    },
                    {
                        name: "Type",
                        alias: "Type",
                        type: "string"
                    },
                    {
                        name: "LATITUDE",
                        alias: "LATITUDE",
                        type: "string"
                    }
                ],
                objectIdField: "ObjectID",
                geometryType: "point",
                spatialReference: {wkid: 4326},
                source: [], // adding an empty feature collection
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "web-style", // autocasts as new WebStyleSymbol()
                        styleName: "Esri2DPointSymbolsStyle",
                        name: "landmark"
                    }
                },
                popupTemplate: template
            });
            map.add(monumentLayer);

            // apply the edits to the layer
            const makerData = {
                LATITUDE: 37.897,
                LONGITUDE: -122.5811,
                TYPE: "标题",
                Content: `<span style="color:red" class="name">内容</span>`
            };
            const makerData2 = {
                LATITUDE: 35.897,
                LONGITUDE: -115.5811,
                TYPE: "标题2",
                Content: `<span style="color:red" class="name">内容2</span>`
            };
            monumentLayer
                .applyEdits({
                    addFeatures: [
                        new Graphic({
                            geometry: {
                                type: "point",
                                latitude: makerData.LATITUDE,
                                longitude: makerData.LONGITUDE
                            },
                            attributes: makerData
                        })
                    ]
                }).then((results) => {
                if (results.addFeatureResults.length > 0) {
                    var objectIds = [];
                    results.addFeatureResults.forEach(function (item) {
                        objectIds.push(item.objectId);
                    });
                    // query the newly added features from the layer
                    monumentLayer
                        .queryFeatures({
                            objectIds: objectIds
                        })
                        .then(function (results) {
                            console.log(
                                results.features.length,
                                "features have been added."
                            );
                            setTimeout(() => {
                                alert(333)
                                //删除所有图层，参考 
                                //https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#methods-summary
                                map.removeAll();
                                setTimeout(() => {
                                    alert(666)
                                    //添加图层，参考 
                                    //https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#methods-summary
                                    map.add(monumentLayer);
                                }, 5000)

                            }, 5000)
                            $("#name").click(() => {
                                alert('click')
                            })
                        });
                }
            })
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="actions" class="esri-widget">
    <button class="esri-button" id="add">Add 7 Features</button>
    <button class="esri-button" id="remove">Remove 7 Features</button>
</div>
</body>
</html>
545522390
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Gis地图标记+弹窗

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Add or remove graphics fro
复制链接

扫一扫