arcgis 4.x 编辑图层

最新推荐文章于 2024-06-18 16:46:09 发布

chiguanggu3963

最新推荐文章于 2024-06-18 16:46:09 发布

阅读量454

点赞数

文章标签： javascript sketch ViewUI

原文链接：https://my.oschina.net/u/3516665/blog/3062745

版权

<html>

   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
       <title>Sketch update validation - 4.10</title>

               const map = new Map({
                   basemap: "hybrid",
                   layers: [graphicsLayer]
               });

               const view = new MapView({
                   container: "viewDiv",
                   map: map,
               });

// 设置图形点击事件
setUpGraphicClickHandler();

               view.when(function() {
                   // 添加图形
                   var newDevelopmentGraphic = new Graphic({
                       geometry: webMercatorUtils.geographicToWebMercator(new Polygon({ // 用 webMercatorUtils（geometry）将经纬度转平面坐标
                           rings: [
                               [-111.30, 52.68],
                               [-98, 49.5],
                               [-93.94, 29.89],
                               [-93.4, 29.9]
                           ],
                           spatialReference: view.spatialReference
                       })),
                       symbol: {
                           type: "simple-fill",
                           style: "solid",
                           color: [0, 170, 255, 0.8],
                           outline: {
                               color: [255, 255, 255],
                               width: 2
                           }
                       },
                       attributes: {
                           newDevelopment: "new store"
                       }
                   });

// 将绘制的图形添加到view
graphicsLayer.addMany([newDevelopmentGraphic]);
//===============================线（结束）===================================================

//===============================点（开始）===================================================
                   var pointGraphic = new Graphic({
                       geometry: webMercatorUtils.geographicToWebMercator({ // 用 webMercatorUtils（geometry）将经纬度转平面坐标
                           type: "point", // autocasts as new Point()
                           longitude: -117.1376635742038,
                           latitude: 34.13644900200571,
                           spatialReference: view.spatialReference
                       }),
                       symbol: {
                           type: "simple-marker",
                           color: [0, 170, 255, 0.8],
                           outline: {
                               color: [255, 255, 255],
                               width: 2
                           }
                       },
                       attributes: {
                           newDevelopment: "new store"
                       }
                   });

                   graphicsLayer.addMany([pointGraphic]);
//===============================点（结束）===================================================
//===============================线（开始）====================================================
                   var polylineGraphic = new Graphic({
                       geometry: webMercatorUtils.geographicToWebMercator({
                           type: "polyline",
                           paths: [[
                               [-111.10, 52.8],
               [-100, 49.8],
               [-90.94, 29.39]
               ]],
                           spatialReference: view.spatialReference
                   }),
                       symbol: {
                           type: "simple-line",
                           color: [0, 170, 255, 0.8],
                           width: 2
                       },
                       attributes: {
                           Name: "Keystone Pipeline",
                           Owner: "TransCanada",
                           Length: "3,456 km",
                           newDevelopment: "new store"
                       }
                   });

graphicsLayer.addMany([polylineGraphic]);

                   sketchViewModel = new SketchViewModel({
                       view: view,
                       layer: graphicsLayer,
                       updateOnGraphicClick: false,
                       defaultUpdateOptions: { // 设置更新操作的默认选项
                           toggleToolOnClick: false // 仅启用重塑操作
                       }
                   });

                   $("#huizhi").click(function() {
                   sketchViewModel.update([polylineGraphic], {
                           tool: "reshape"
                       });
               });

});

               // 设置图形点击事件
               function setUpGraphicClickHandler() {
                   // 鼠标点击事件
                   view.on("click", function(event) {
                       // 如果当前图形正在被编辑,直接退出编辑
                       if(sketchViewModel.state === "active") {
                           return;
                       }

                       view.hitTest(event).then(function(response) {
                           var results = response.results;
                           results.forEach(function(result) {

                               console.log(clickCount);
                               if(clickCount == 2) {
                                   if(result.graphic.layer === sketchViewModel.layer && result.graphic.attributes && result.graphic.attributes.newDevelopment) {
                                       sketchViewModel.update([result.graphic], {
                                           tool: "reshape"
                                       });
                                   }
                                   clickCount = 1;
                               } else {
                                   clickCount++;
                               }
                           });
                       });


                   });
               }

           });
       </script>
   </head>

</html>

转载于:https://my.oschina.net/u/3516665/blog/3062745

chiguanggu3963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis 4.x 编辑图层

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-...
复制链接

扫一扫