arcgis地图开发测面、测距、定位小工具

arcgis小工具（测面、测线、定位等）
一下三个功能用到的arcgis文件汇总：

import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import Polyline from "@arcgis/core/geometry/Polyline";
import Point from '@arcgis/core/geometry/Point'
import Polygon from "@arcgis/core/geometry/Polygon";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
import Draw from "@arcgis/core/views/draw/Draw";

Vue项目要实现如下效果
##1.点击地图上显示当前点击坐标经纬度效果
核心代码如下：（注意引入要用的arcgis文件）

// 定位点绘制
export function locationPoint(event,map,layerId){
    var layer = map.findLayerById(layerId)
    if(layer === null || layer === undefined){
        layer = new GraphicsLayer({ id: layerId })
        map.add(layer)
    }
    if(layer.graphics&&layer.graphics.length>0){
        layer.graphics.removeAll()
    }
    const openSymbol = {
        type: 'picture-marker', // autocasts as new PictureMarkerSymbol()
        url: require('@/assets/images/dingwei.png'),
        width: '25px',
        height: '25px',
    }
    const geometry = {
        type: 'point', 
        longitude: event.mapPoint.x,
        latitude: event.mapPoint.y
    }
    layer.graphics.add(new Graphic({
        geometry: geometry,
        symbol: openSymbol
    }))
    const textgeometry = {
        type: 'point', 
        longitude: event.mapPoint.x,
        latitude: event.mapPoint.y,
    }
    var textSymbol = {
        type: 'text',
        text: event.mapPoint.x +','+ event.mapPoint.y,
        border: true,
        backgroundColor: '#fff',
        borderLineColor: '#fff',
        borderLineSize: 12,
        color: [255, 255, 255, 0.85],
        haloColor: 'gray',
        haloSize: 1,
        xoffset: '50%',
        yoffset: -20,
        font: {
            size: 14
        },
        verticalAlignment: 'baseline'
    }
    layer.graphics.add(new Graphic({
        geometry: textgeometry,
        symbol: textSymbol
    }))
    
}

##2.测距功能（效果如下图）

核心代码如下：

// 测距绘制
export function drawline(view,map,layerId){
    let draw = new Draw({
         view:view
     })
     var action = draw.create('polyline')
     view.focus()
     action.on('vertex-add',function(evt){
            measureLine(evt.vertices,view,map,layerId);
     })
     action.on('cursor-update',function(evt){
            measureLine(evt.vertices,view,map,layerId);         
     })
     action.on('draw-complete',function(evt){
            measureDisLine(evt.vertices,view,map,layerId);         
     })
     action.on('vertex-remove',function(evt){
         // measureLine(evt.vertices,view,map,layerId);
     })
}
// 绘制测线路径
 function measureLine(vertices,view,map,layerId) {
   var lineLayer = map.findLayerById(layerId)
   if(lineLayer===null||lineLayer===undefined){
       lineLayer = new GraphicsLayer({id:layerId})
        map.add(lineLayer)
    }
    lineLayer.removeAll() //清空上次绘制的线
    let symbol = {  //点样式
       type: "simple-marker",
        color: 'yellow',
        width: 3,
       size: 10,
    }
    //将起点添加到地图
    let startGraphics = new Graphic({
        geometry: new Point({
            type: "point",
            longitude: vertices[0][0], //当底图是投影坐标系时用x,地理坐标系用longitude
            latitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitude
            spatialReference: view.spatialReference //和底图相同的坐标系
        }),
        symbol: symbol
    })
   lineLayer.add(startGraphics)
   //将线添加到地图
   let lineGraphics = new Graphic({
       geometry: new Polyline({
          paths: vertices,
          spatialReference: view.spatialReference
       }),
       symbol: { //线样式
          type: "simple-line", // autocasts as new SimpleFillSymbol
          color: 'yellow',
          width: 2
       }
    });
    lineLayer.add(lineGraphics)
}
// 计算线的距离
 function measureDisLine(vertices,view,map,layerId){
    // this.draw.reset()
    var lineLayer = map.findLayerById(layerId)
    if(lineLayer===null||lineLayer===undefined){
        lineLayer = new GraphicsLayer({id:layerId})
         map.add(lineLayer)
    }
    lineLayer.removeAll()
    let symbol = {  //点样式
        type: "simple-marker",
        color: '#B3EE3A',
        width: 1,
        size: 10,
    }
    //将起点添加到地图
    let startGraphics = new Graphic({
       geometry: new Point({
           type: "point",
           longitude: vertices[0][0], //当底图是投影坐标系时用x,地理坐标系用longitude
           longitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitude
           spatialReference: view.spatialReference //和底图相同的坐标系
       }),
       symbol: symbol
    })
    lineLayer.add(startGraphics)
     //将线添加到地图
     let lineGraphics = new Graphic({
        geometry: new Polyline({
            paths: vertices,
            spatialReference: view.spatialReference
        }),
        symbol: { //线样式
            type: "simple-line", // autocasts as new SimpleFillSymbol
            color: '#B3EE3A',
            width: 2
        }
    });
    lineLayer.add(lineGraphics)
    let linePath = []  //线段坐标集合
    var pointStart = [] //起点
    pointStart.push(vertices[0][0])
    pointStart.push(vertices[0][1])
    linePath.push(pointStart)
    var length = 0
    for (let i = 1; i < vertices.length ; i++) { //获得鼠标移动的坐标信息
        let xy = [] //鼠标当前经纬度
        xy.push(vertices[i][0])
        xy.push(vertices[i][1])     
        linePath.push(xy)
        let line = new Polyline({ //起点到当前鼠标的线段
           paths: linePath,
           spatialReference: {
              wkid:4326
           }
        })
        length = length + parseFloat(geometryEngine.geodesicLength(line,'meters').toFixed(2)) //测距
    }
    let point = {
        type:"point",
        x:vertices[vertices.length-1][0],
        y:vertices[vertices.length-1][1],
        spatialReference: view.spatialReference
    };
    //鼠标位置
    let mouseGraphics = new Graphic({
        geometry:point,
        symbol: symbol
    })
    let lengthText = length.toFixed(2) + 'm'
    let textSymbol = { //距离标注
        type: "text",
        color: "white",
        haloColor: "black",
        haloSize: "2px",
        text: lengthText,
        xoffset: '50px',
        yoffset: '-5px',
    }
    let textGraphics = new Graphic({ //标注位置为鼠标位置
        geometry:point,
        symbol: textSymbol
    });
    //将标注和鼠标位置添加到地图
    lineLayer.addMany([textGraphics, mouseGraphics ])
}

3.测面功能（效果如图)

核心代码如下：

 // 测面绘制
export function drawArea(view,map,layerId){
     let draw = new Draw({
         view:view
     })
     var action = draw.create('polyline')
     view.focus()
     action.on('vertex-add',function(evt){
            measureArea(evt.vertices,view,map,layerId);
     })
     action.on('cursor-update',function(evt){
            measureArea(evt.vertices,view,map,layerId);         
     })
     action.on('draw-complete',function(evt){
            measureDisArea(evt.vertices,view,map,layerId);         
     })
     action.on('vertex-remove',function(evt){
         // measureLine(evt.vertices,view,map,layerId);
     })
}

// 测面绘制面
 function measureArea(vertices,view,map,layerId) {
    var lineLayer = map.findLayerById(layerId)
   if(lineLayer===null||lineLayer===undefined){
       lineLayer = new GraphicsLayer({id:layerId})
        map.add(lineLayer)
    }
    lineLayer.removeAll() //清空上次绘制的线
    let symbol = {  //点样式
       type: "simple-marker",
        color: 'yellow',
        width: 3,
       size: 10,
    }
    //将起点添加到地图
    let startGraphics = new Graphic({
        geometry: new Point({
            type: "point",
            longitude: vertices[0][0], //当底图是投影坐标系时用x,地理坐标系用longitude
            latitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitude
            spatialReference: view.spatialReference //和底图相同的坐标系
        }),
        symbol: symbol
    })
   lineLayer.add(startGraphics)
   //将线添加到地图
   let lineGraphics = new Graphic({
       geometry: new Polyline({
          paths: vertices,
          spatialReference: view.spatialReference
       }),
       symbol: { //线样式
          type: "simple-fill", // autocasts as new SimpleFillSymbol
          color: [3, 255, 240, 0.3],
          width: 2,
          outline:{
            color:'yellow',
            width:2
          }
       }
    });
    lineLayer.add(lineGraphics);
 }
 // 计算面的面积
 function measureDisArea(vertices,view,map,layerId){
   var lineLayer = map.findLayerById(layerId)
   if(lineLayer===null||lineLayer===undefined){
       lineLayer = new GraphicsLayer({id:layerId})
        map.add(lineLayer)
    }
    lineLayer.removeAll() //清空上次绘制的线
    let symbol = {  //点样式
        type: "simple-marker",
        color: 'yellow',
        width: 1,
        size: 10,
    }
    let fillSymbol = { //面样式
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [3, 255, 240, 0.1],
        outline: { // autocasts as new SimpleLineSymbol()
          color: '#B3EE3A',
          width: 2
        }
    }
    let polygon = new Polygon({
        rings: vertices,
        spatialReference: {
            wkid:4326
        }
    })
    let polygonGraphics = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
    })
    lineLayer.add(polygonGraphics);
    var area = geometryEngine.geodesicArea(polygon,'square-meters')
    // 如果出现负值则重新计算
    if(area<0){
        vertices[vertices.length]= vertices[0]
        vertices.reverse()
       let polygon2 = new Polygon({
           rings: vertices,
           spatialReference: {
              wkid:4326
           }
        })
        area = geometryEngine.geodesicArea(polygon2,'square-meters')
    }
    let areaText = parseFloat(area).toFixed(2) + '㎡'
    let center = polygon.centroid
    let pointCenter = {
        type:"point",
        longitude:center.longitude,
        latitude:center.latitude
    };
    let textSymbol = { //面积标注
        type: "text",
        color: "white",
        haloColor: "black",
        haloSize: "2px",
        text: areaText,
      }
      let textGraphics = new Graphic({ //标注为面中心位置
          geometry:pointCenter,
          symbol: textSymbol
      });
      lineLayer.add(textGraphics);
      for (let i = 0; i <vertices.length ; i++) {
        let point = {
            type:"point",
            longitude:vertices[i][0],
            latitude:vertices[i][1],
            spatialReference: view.spatialReference
        };
 
        let pointGraphics=new Graphic({
            geometry:point,
            symbol: symbol
        });
        lineLayer.add(pointGraphics)
      }
}