基于arcgis js 4.x实现编辑多边形节点问题

L.傲骨雄风

已于 2023-07-05 00:49:20 修改

阅读量1.3k

点赞数 1

分类专栏： arcgis-js 文章标签： arcgis

于 2023-07-05 00:42:01 首次发布

本文链接：https://blog.csdn.net/xlp789/article/details/131546238

版权

arcgis-js 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

此代码示例展示了如何在JavaScript环境中使用ArcGISMapsSDK创建地图视图，并添加WebTileLayer来显示天地图瓦片数据。同时，它还演示了如何利用SketchViewModel创建和编辑图形。

摘要由CSDN通过智能技术生成

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Synchronize MapView and SceneView | Sample | ArcGIS Maps SDK for
        JavaScript 4.26
    </title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>

    <link rel="stylesheet"
          href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer",
            "esri/widgets/Editor",
            "esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/layers/WebTileLayer",
            "esri/geometry/Extent", "esri/geometry/Point",
            "esri/widgets/Sketch/SketchViewModel",
], (
                Map,
            MapView, Graphic, GraphicsLayer, Editor,
            TileLayer, WMTSLayer, WebTileLayer, Extent, Point,SketchViewModel
            ) => {
            const map = new Map();
          

           var tdtVecLayer = new WebTileLayer({
                urlTemplate:
                    'http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
            })
            var tdtPoiLayer = new WebTileLayer({
                urlTemplate:
                    'http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
            })

         
            map.add(tdtVecLayer);
            map.add(tdtPoiLayer);

            var mapview = new MapView({
                container: "viewDiv",
                center: [118.884968, 32.12381],
                zoom: 14,
                map: map
            });


            /**** 构造多边形***/
            const rings = [
                [  // first ring
                    [118.884968, 32.12381],
                    [118.894968, 32.12381],
                    [118.894968, 32.13381],
                    [118.884968, 32.13381],
                    [118.884968, 32.12381]
                ]
            ];
         

            let polygon = {
                type: "polygon",  // autocasts as new Polyline()
                rings: rings
            };

            let polygonSymbol = {
                type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                color: [226, 119, 40],
                width: 4
            };

            let polylineGraphic = new Graphic({
                geometry: polygon,
                symbol: polygonSymbol,
            });
            /**** 构造多边形***/


            let graphicsLayer = new GraphicsLayer();
            graphicsLayer.add(polylineGraphic);

            map.add(graphicsLayer);


             // 创建编辑工具
            var sketchViewModel = new SketchViewModel({
                layer: graphicsLayer,
                view: mapview,
                defaultUpdateOptions: "move"
            });
            //如果设置false，则单击无法实现选择要素进行更新操作 
            //sketchViewModel.updateOnGraphicClick = false;
            sketchViewModel.on("update", onGraphicUpdate);
           
           
            //监听函数
            function onGraphicUpdate(event) {
                const graphic = event.graphics[0];
                if (event.state === "complete") {
                    //取到更改之后的要素
                    console.log(graphic);
                }
            }
        });

    </script>
</head>
<body>
    <div id="viewDiv" style="float: left; width: 100%; height: 100%"></div>
</body>
</html>