arcgis地图开发测面、测距、定位小工具_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";
1
2
3
4
5
6
7

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
    }))
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

##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 ])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

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)
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144