画面.html

<!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("line-button", "top-left");
            view.ui.add("polygon-button", "top-left");
            const draw = new Draw({
                view: view
            });
            // 给绘制多边形按钮添加单击事件。
            document.getElementById("polygon-button").onclick = function() {
                view.graphics.removeAll();
                // 创建并返回一个PolyLineDrawAction实例。
                const action = draw.create("polygon");
                // 在视图上绘制折线时，监听PolyLineDrawAction事件，以便立即向用户提供视觉反馈。
                action.on([
                        "vertex-add",
                        "vertex-remove",
                        "cursor-update",
                        "draw-complete"
                    ],
                    createPolygonGraphic
                );
            };

            function createPolygonGraphic(event){
                const vertices = event.vertices;
                // 此行代码用于，移除各种事件之前添加的图形。
                // 即当前视图中的图形，是实时刷新添加的图形。
                view.graphics.removeAll();
                let vertices2 = vertices.slice();
                vertices2[vertices2.length] = vertices2[0];
                const graphic = new Graphic({
                    geometry: {
                        type: "polygon", // autocasts as Polygon
                        rings: vertices2,
                        spatialReference: view.spatialReference
                    },
                    symbol: {
                        type: "simple-fill", // autocasts as SimpleFillSymbol
                        color: "purple",
                        style: "solid",
                        outline: {  // autocasts as SimpleLineSymbol
                            color: "white",
                            width: 1
                        }
                    }
                });
                view.graphics.add(graphic);
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <!--<div id="line-button" class="esri-widget esri-widget&#45;&#45;button esri-interactive" title="画折线">-->
            <!--<span class="esri-icon-polyline"></span>-->
        <!--</div>-->
        <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
            <span class="esri-icon-polygon"></span>
        </div>
    </div>
</body>
</html>
猜你喜欢
