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,地理坐标系用longitudelatitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitudespatialReference: 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 SimpleFillSymbolcolor: '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,地理坐标系用longitudelongitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitudespatialReference: 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 SimpleFillSymbolcolor: '#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 = 0for (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,地理坐标系用longitudelatitude: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitudespatialReference: 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 SimpleFillSymbolcolor: [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.centroidlet 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)}
}

arcgis地图开发测面、测距、定位小工具相关推荐

React Native for Arcgis 地图开发 LocationCtrl （十五）
定位工具封装和使用 LocationCtrl import React, {useState, useEffect} from 'react'; import {View, Text, ScrollV ...
React Native for Arcgis 地图开发聚合图Cluster （十一）
ClusterLayerCtrl 聚合图层调用封装 import React, {useEffect, useState} from 'react'; import {ScrollView, Styl ...
我用python做了个测词汇量的小工具
大家好,作为爱学习的自己,我特意用python做了个测词汇量的小工具,让自己每天都能够快乐的学习! 1.页面分析这次我们采用的是扇贝网来进行词汇量测试,如图: 我们还是老规矩,首先按F12打开开发者 ...
离线地图开发下实现GPS定位，坐标纠偏回放，偏离路线
一.GPS坐标转换(通过离线算法调用,各类坐标系之间的转换) GPS设备标准坐标采用WGS-84坐标系或北斗导航,需要通过坐标系之间转换才能准确定位到地图上,通过js接口算法函数可简单实现坐标系之间的 ...
Android百度地图开发（二）定位之自动定位及标注（及定位几日内瓦或坐标4.9E-324问题）
接上篇Android百度地图开发(一)之Hello BaiduMap 1.环境配置: 新增权限如下  <uses-permission and ...
如何使用Qt开发一个进制转换小工具
本游戏使用Qt5.8开发这是一款进制转换小工具,比如十二进制的源数据15,如果您选择目标进制7进制的话,那么按下转换按钮,程序会输出[23]:程序的逻辑原理大概如此:首先把输入通过一系列算法转换成b ...
android的百度地图开发（二）定位
参考:http://blog.csdn.net/mr_wzc/article/details/51590485 第一步,初始化LocationClient类 //获取地图控件引用mMapView = ...
Android 百度地图开发（二）--- 定位功能之MyLocationOverlay，PopupOverlay的使用
转载请注明出处http://blog.csdn.net/xiaanming/article/details/11380619 这一篇文章主要讲解的是百度地图的定位功能,然后还有MyLocationOv ...
记录：百度地图开发 ios系统获取定位失
使用百度地图浏览器定位, 安卓手机和pc 浏览器都可以获取到定位, 唯独苹果手机IOS系统获取定位失败, 查看权限什么的都开了 , 最后发现是因为界面地址是http协议的, 界面地址需要使用http ...

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

arcgis地图开发测面、测距、定位小工具相关推荐

最新文章

热门文章