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

2024-05-16 06:42:16
开发
32

<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>

参考文章

SketchViewModel | API Reference | ArcGIS Maps SDK for JavaScript 4.29 | ArcGIS Developers

原文地址:https://blog.csdn.net/xlp789/article/details/138927939 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1790875372347330560.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

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

相关推荐

最近更新

热门阅读

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