arcgis api 图形编辑

最新推荐文章于 2023-08-15 09:58:08 发布

gis小白的成长之路

最新推荐文章于 2023-08-15 09:58:08 发布

阅读量1k

点赞数 1

分类专栏： ARCGIS API 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_36179257/article/details/119865134

版权

ARCGIS API 专栏收录该内容

21 篇文章 18 订阅

订阅专栏

图形编辑，顾名思义，就是对绘制的图形graphicLayer进行编辑，如移动、拉伸、旋转、删除和增加节点的功能。下图是增加节点和拉伸功能的截图。
在这里插入图片描述

实现代码，复制可直接运行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arcgis API 前端加载shp显示</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0px dashed black;
      background-color: rgb(0, 38, 48);
    }

    .btn {
      background-color: #4CAF50;
      color: white;
      border-style: solid;
      border-radius: 4px;
      border-color:#4CAF50;
    }

  </style>
</head>
<body> 
<div id="map">
</div>
<div class="draw" style="z-index: 999;">
  <div  style="position: fixed;left: 20px;display: inline;top: 15px;">
    <button  class="btn" onclick="drawMap()">绘制</button>
    <button  class="btn" onclick="drawStop()">停止</button>
    <button  class="btn" onclick="drawRemove()">移除</button>
  </div>
</div>
<div class="edit" style="z-index: 999;">
  <div style="position: fixed;left: 20px;display: inline;top: 55px;">
    <button  class="btn" onclick="editMap('MOVE')">移动</button>
    <button  class="btn" onclick="editMap('SCALE')">拉伸</button>
    <button  class="btn" onclick="editMap('ROTATE')">旋转</button>
    <button  class="btn" onclick="editMap('EDIT_VERTICES')">折点</button>
    <button  class="btn" onclick="stopEdit()">完成</button>
  </div>
</div>
</body>

<!-- 引入ARCGIS API -->
<script src="https://js.arcgis.com/3.20"></script>
<script type="text/javascript">
  var map, graPolygon;
  require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/GraphicsLayer",
    "esri/toolbars/draw",
    "esri/toolbars/edit",
    'esri/graphic',
    "esri/symbols/SimpleFillSymbol",
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    ArcGISTiledMapServiceLayer,
    GraphicsLayer,
    Draw,
    Edit,
    Graphic,
    SimpleFillSymbol,
    Extent
  ) {

    //地图范围
    var mapExtent = new Extent({
      xmax: 113.799760210539,
      xmin: 106.57095767482662,
      ymax: 20.459116202966324,
      ymin: 18.27952992162579,
      spatialReference: {
        wkid: 4326
      }
    })
   
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });

    map.on('load', function () {
      map.hideZoomSlider()
      map.hidePanArrows()
      map.disableDoubleClickZoom() //禁用双击缩放
    })
    //arcgis 在线地图
    var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
    map.addLayer(myTileLayer)

    //面绘制图层
    var polygonLayer = new GraphicsLayer() 
    map.addLayer(polygonLayer)
  
    //构造绘制工具
    var toolbar = new Draw(map);

    //启动多边形绘制
    drawMap = function() {
      console.log("启动多边形绘制")
      polygonLayer.clear() //移除上次绘制的面
      toolbar.activate(Draw['POLYGON'])
    }

    //绘制完成
    toolbar.on("draw-complete",drawEndEvent);

    //绘制完成后的回调方法
    function drawEndEvent(evt) {
      polygonLayer.clear() //移除上次绘制的面
      let geo = evt.geometry 
      let symbol = toolbar.fillSymbol //面样式
      graPolygon = new Graphic(geo,symbol)
      polygonLayer.add(graPolygon) //每次绘制前清空之前绘制的图形范围
      toolbar.deactivate() //绘制完成后关闭绘制功能
    }

    //停止绘制功能
    drawStop = function() {
      toolbar.deactivate()
    }

    //移除绘制图形
    drawRemove = function() {
      polygonLayer.clear() 
    }
  
    //图形编辑功能
    var edit = new Edit(map)

    //图形编辑的方法
    editMap = function(type) {
      switch(type) {
        case "MOVE": //移动图形
          console.log("启用移动功能")
          edit.activate(Edit.MOVE,graPolygon)  
          break;
        case "SCALE": //拉伸图形
          console.log("启用拉伸功能")
          //构建Edit参数 注：拉伸的时候，可以指定是否保持长宽比例
          var options = { uniformScaling:true }
          edit.activate(Edit.SCALE,graPolygon,options)  
          break;
        case "ROTATE": //旋转图形
          console.log("启用选择功能")
          edit.activate(Edit.ROTATE,graPolygon)  
          break;
        case "EDIT_VERTICES": //折点增删
          //构建Edit参数 注：编辑折点的时候，要指定是否能添加或者删除结点。
          console.log("启用折点增删功能")
          var options = {
            allowAddVertices:true, //能添加结点
            allowDeleteVertices: true //能删除结点
          }
          edit.activate(Edit.EDIT_VERTICES,graPolygon,options)  
          break;
      }
    }

    //关闭编辑功能
    stopEdit = function() {
      console.log("完成编辑，关闭编辑功能")
      edit.deactivate(); //关闭编辑工具
    }

    //用完Edit工具，将工具关闭，点击地图（没有点击到Graphic时结束）
    map.on("click", function() {
      edit.deactivate();
    })
  });
</script>
</html>

gis小白的成长之路

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
arcgis api 图形编辑

图形编辑，顾名思义，就是对绘制的图形graphicLayer进行编辑，如移动、拉伸、选择、删除和增加节点的功能。下图是增加节点和拉伸功能的截图。实现代码，复制可直接运行：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" conte
复制链接

扫一扫

专栏目录