画点 - 4.11.html

最新推荐文章于 2023-09-28 10:45:58 发布

学无止境慢慢来

最新推荐文章于 2023-09-28 10:45:58 发布

阅读量241

点赞数

分类专栏： arcgis_js_api_demo4.11

本文链接：https://blog.csdn.net/weixin_42193179/article/details/89925343

版权

arcgis_js_api_demo4.11 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>画点 - 4.11</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.11/"></script>
    <!--我的接口。-->
    <!--<link rel="stylesheet" href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css">-->
    <!--<script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/dojo/dojo.js"></script>-->
    <!--上下两接口都行。-->
    <!--<script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>-->
    <style>
        html, body, #viewDiv{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/views/draw/Draw",
            "esri/Graphic"
        ], function(Map, MapView, Draw, Graphic) {
            const map = new Map({
                basemap: "gray"
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 16,
                center: [18.06, 59.34]
            });

            // 添加绘图工具按钮。
            view.ui.add("point-button", "top-left");
            const draw = new Draw({
                view: view
            });
            document.getElementById("point-button").onclick = function() {
                view.graphics.removeAll();
                enableCreatePoint();
            };

            function enableCreatePoint(){
                var action = draw.create("point");
                action.on("cursor-update", function (evt) {
                    createPointGraphic(evt.coordinates);
                });
                action.on("draw-complete", function (evt) {
                    createPointGraphic(evt.coordinates);
                });
            }

            function createPointGraphic(coordinates){
                view.graphics.removeAll();
                var point = {
                    type: "point", // autocasts as /Point
                    x: coordinates[0],
                    y: coordinates[1],
                    spatialReference: view.spatialReference
                };
                var graphic = new Graphic({
                    geometry: point,
                    symbol: {
                        type: "simple-marker", // autocasts as SimpleMarkerSymbol
                        style: "square",
                        color: "red",
                        size: "16px",
                        outline: { // autocasts as SimpleLineSymbol
                            color: [255, 255, 0],
                            width: 3
                        }
                    }
                });
                view.graphics.add(graphic);
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
            <span class="esri-icon-point"></span>
        </div>
    </div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
画点 - 4.11.html

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>画点 - 4...
复制链接

扫一扫