arcgis api for javascript------在地图上根据经纬度添加div

项目需求：在地图上根据指定经纬度添加div
完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Get started with graphics - 4.0</title>

    <link rel="stylesheet" href="http://192.168.1.225:8089/arcgis_js_api/library/4.8/esri/css/main.css">
    <script src="http://192.168.1.225:8089/arcgis_js_api/library/4.8/dojo/dojo.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "dojo/domReady!"
        ], function (
            Map,
            MapView,
            Graphic,
            Point,
            SimpleMarkerSymbol
        ) {

                var map = new Map({
                    basemap: "streets"
                });

                var view = new MapView({
                    center: [116, 36],
                    container: "viewDiv",
                    map: map,
                    zoom: 3
                });


                var point = new Point({
                    longitude: 116,
                    latitude: 36
                });
                var markerSymbol = new SimpleMarkerSymbol({
                    color: [226, 119, 40],
                    outline: {
                        color: [255, 255, 255],
                        width: 2
                    }
                });

                var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: markerSymbol
                });

                view.graphics.add(pointGraphic);


                view.watch("extent", function (evt) {
                    var point = view.graphics.getItemAt(0);
                    if (point.geometry) {
                        // 关键代码 点的空间参考需与地图保持一致
                        point.geometry.spatialReference = view.spatialReference;
                        var screenPoint = view.toScreen(point.geometry);
                        console.log(screenPoint)
                        var test = document.getElementById("location");
                        test.style.top = Number(screenPoint.y) + 'px';
                        test.style.left = Number(screenPoint.x) + 'px';
                    }
                });
            });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="location" style="position: absolute;z-index: 999;background:green;">demo</div>
</body>

</html>

效果图：
在这里插入图片描述

我是小怪兽-

发布了56 篇原创文章 · 获赞 32 · 访问量 14万+

私信关注

arcgis api for javascript------在地图上根据经纬度添加div

猜你喜欢