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

这篇具有很好参考价值的文章主要介绍了基于arcgis js 4.x实现编辑多边形节点问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

 文章来源地址https://www.toymoban.com/news/detail-533904.html

到了这里,关于基于arcgis js 4.x实现编辑多边形节点问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【3Ds Max】可编辑多边形“点”层级的简单使用

    目录 简介 示例 (1)移除 (2)断开 (3)焊接 (4)挤出 (5)切角 (6)目标焊接  (7)连接         在3ds Max中,多边形点层级(Vertex Level)是指可以在编辑多边形网格时直接编辑的顶点(点)级别。您可以通过选择、移动、旋转、缩放等方式来编辑多边形的顶点,以

    2024年02月12日
    浏览(51)
  • 【3Ds Max】可编辑多边形“边”层级的简单使用

    目录 简介 示例  1. 编辑边  (1)插入顶点 (2)移除 (3)分割 (4)挤出  (5)切角 (6)焊接 (7)桥 (8)连接 2. 编辑几何体 (1)创建 (2)塌陷 (3)附加 (4)分离         在3ds Max中,可编辑多边形边层级(Edge Level)是指您可以在编辑多边形网格时直接编辑的

    2024年02月12日
    浏览(53)
  • 【3Ds Max】可编辑多边形“边界”层级的简单使用

    目录 示例 (1)挤出 (2)插入顶点 (3)切角 (4)利用所选内容创建图形 (5)封口 (6)桥 这里我们首先创建一个长方体,然后将其中键部分删除,形成上下底面缺失的长方体,这样就会有两个可选择的边界 (1)挤出 可以设置挤出的宽度和高度 (2)插入顶点 我们可以

    2024年02月11日
    浏览(47)
  • Fabric.js 拖拽顶点修改多边形形状

    我正在参加「掘金·启航计划」 戴尬猴,我是德育处主任 这次要介绍的一个demo是\\\"拖拽多边形定点修改多边形形状\\\"。 其实 Fabric.js 官网也有这个demo:Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂,所以本文就把该demo进一步简

    2024年02月03日
    浏览(106)
  • 基于C++ 的OpenCV绘制多边形,多边形多条边用不用的颜色绘制

    使用基于C++的OpenCV库来绘制多边形,并且为多边形的不同边使用不同的颜色,可以按照以下步骤进行操作: 首先,确保你已经安装了OpenCV库并配置好了你的开发环境。 导入必要的头文件: 创建一个空白的图像,然后绘制多边形,并为每条边选择不同的颜色: 在这个示例中,

    2024年02月13日
    浏览(55)
  • CesiumForUnreal实现多边形裁剪3dTileset效果

    基于CesiumForUnreal插件的 Cartographic Polygon Actor在 Runtime 运行时环境下实现对地形3DTileset的多边形裁剪效果,GIF动图如下: 在Editor中的具体操作过程可以参考CesiumForUnreal官方裁剪地形的教程,本文这里在Runtime环境下进行实现。数据依旧是使用CesiumForUnreal插件加载在线的地形和影

    2024年02月13日
    浏览(57)
  • three.js 点击交互事件 含解决点击的物体与看到的不一致问题(非全屏/多边形偏移)

    在 three.js 中,可以通过添加事件监听器来实现点击交互事件。具体步骤如下: 通过以上方法,可以实现 three.js 中的点击交互事件,并解决点击的物体与看到的不一致问题。

    2024年02月06日
    浏览(62)
  • 【计算几何】判断多边形边界顺逆时针 & C++代码实现

    多边形可以由一个点集 { v 1 , v 2 , . . . , v n } {v_1,v_2,...,v_n} { v 1 ​ , v 2 ​ , ... , v n ​ } 表示,构成多边形的点集确定,多边形边界的顺序也就确定了 有关多边形边界的顺序的示意图,如下图所示: 有时候关于数据格式有规定,要求多边形边界必须为顺时针或者逆时针。 因

    2024年02月07日
    浏览(56)
  • 判断点在多边形内算法的C++实现

    本篇博客介绍了使用射线法判断点在多边形内部还是外部的算法,并通过C++做了具体实现 1. 算法思路 判断平面内点是否在多边形内有多种算法,其中射线法是其中比较好理解的一种,而且能够支持凹多边形的情况。该算法的思路很简单,就是从目标点出发引一条射线,看这

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包