arcgis js 4.x 实现绘制与编辑含节点吸附

最新推荐文章于 2024-06-03 11:59:55 发布

L.傲骨雄风

最新推荐文章于 2024-06-03 11:59:55 发布

阅读量311

点赞数 2

文章标签： arcgis javascript 开发语言

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

版权

<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%;
        }

        #draw{
            position:absolute;
            right:15%;
            top:2%;
        }
        #editor {
            position: absolute;
            right: 12%;
            top: 2%;
        }
        #undo {
            position: absolute;
            right: 9%;
            top: 2%;
        }
        #redo {
            position: absolute;
            right: 6%;
            top: 2%;
        }
       
    </style>

    <link rel="stylesheet"
          href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></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=',
                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=',
                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
            });



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

             // 创建编辑工具
            var sketchViewModel = new SketchViewModel({
                layer: graphicsLayer,
                view: mapview,
                activeFillSymbol:{
                    type: "simple-fill",
                    style: "solid",
                    color: [255, 0, 0, 0.2],
                    outline: {
                        color: [255, 0, 0],
                        width: 1
                    }
                },
                snappingOptions: { 
                    enabled: true, 
                    featureSources: [{
                        layer: graphicsLayer, enabled: true
                    }]
                }
            });

            //绘制
            document.getElementById("draw").addEventListener("click", function () {
                sketchViewModel.updateOnGraphicClick = false;
                sketchViewModel.create("polygon", { "mode": "click" });

            })

            //编辑
            document.getElementById("editor").addEventListener("click", function () {
                sketchViewModel.updateOnGraphicClick = true;

            })
           //撤销
            document.getElementById("undo").addEventListener("click", function () {
                sketchViewModel.undo();

            })
            //恢复
            document.getElementById("redo").addEventListener("click", function () {
                sketchViewModel.redo();

            })
            保存
            //document.getElementById("save").addEventListener("click", function () {
            //    sketchViewModel.updateOnGraphicClick = false;
            //    sketchViewModel.cancel();
            //})
           

            //绘制图形绑定事件
            sketchViewModel.on("create", onGraphicCreate);

            //编辑图形绑定事件
            sketchViewModel.on("update", onGraphicUpdate);



           
            //绘制完执行函数
            function onGraphicCreate(event) {
                if (event.state === "complete") {
                    console.log(event)
                    graphicsLayer.add(event.graphic);
                }

            }

            //编辑完执行函数
            function onGraphicUpdate(event) {
                const graphic = event.graphics[0];
                if (event.state === "complete") {
                    console.log(graphic);
                }
            }

            //编辑完执行函数
            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>
    <button id="draw">绘制</button>
    <button id="editor">编辑</button>
    <button id="undo">撤销</button>
    <button id="redo">恢复</button>
    <!--<button id="save">保存图形</button>-->



</body>
</html>

参考文章