地图实时定位的js代码有哪些（vue+ arcgis for js4.x 地方坐标系地图服务（Spatial Reference））

初始化地图

引入

import * as esriLoader from esri-loader

主要定义

private mapId: string = private map: any private mapview: any private markers: any = {} // 所有类型标记点 private gisConstructor: any // gis 构造函数 private graphicsLayer: any // 图形图层 private sr: any // 坐标系 private gisModules: any = [ esri/Map, esri/layers/TileLayer, // 切片服务 esri/layers/MapImageLayer, // 动态服务 esri/views/MapView, esri/Graphic, // 图形标记 esri/layers/GraphicsLayer, esri/geometry/Point, esri/geometry/SpatialReference // 坐标系定义 ]

初始化地图

esriLoader.loadModules(this.gisModules).then((args: any) => { // arcgis方法 for (let k in args) { let name = this.gisModules[k].split(/).pop() this.gisConstructor[name] = args[k] } // 切片服务图层 let TileLayer = new this.gisConstructor.TileLayer({ url: , id: TileLayer }) // 动态服务图层 let MapImageLayer = new this.gisConstructor.MapImageLayer({ url: , id: MapImageLayer, }) this.map = new this.gisConstructor.Map({ // 图层 layers: [TileLayer, MapImageLayer] }) // 地方坐标系定义 let kt = PROJCS["GUANGZHOU2000",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Gauss_Kruger"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",113.28],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]] this.sr = new this.gisConstructor.SpatialReference({ wkt: kt }) let pt = new this.gisConstructor.Point({ x: yourCenterX, y: yourCenterY, spatialReference: this.sr // 坐标系 }) this.mapview = new this.gisConstructor.MapView({ map: this.map, container: this.mapId, zoom: 5, spatialReference: this.sr, // 坐标系 center: pt }) this.mapview.ui.empty(top-left) }).then(() => { this.createMakers() // 创建坐标点 })

添加标记点

创建坐标对象

this.markers = JSON.parse(JSON.stringify({})) // defaultPoints：所有类型点位数组 this.defaultPoints.forEach((item: any) => { this.markers[item.placeType] = [] }) this.defaultPoints.forEach((item: any) => { let pictureMarkerSymbol = { type: picture-marker, url: item.icon, // 标记图形 width: 24, height: 24, } let point = { type: point, x: Number(item.lat), y: Number(item.lon), spatialReference: this.sr // 坐标系 } // 绘画marker图形 const pointGraphic = new this.gisConstructor.Graphic({ geometry: point, symbol: pictureMarkerSymbol, // 标记点携带数据 attributes: { ...item }, }) this.markers[item.placeType].push(pointGraphic) }) if (this.map) { this.drawnPoints() // 绘制 }

图层添加点

this.graphicsLayer = new this.gisConstructor.GraphicsLayer({ id: 001, title: markerLayer, }) // 将图形添加到图层中 for (let k in this.markers) { this.graphicsLayer.graphics.addMany(this.markers[k]) } // 将图层添加map中 this.map.layers.add(this.graphicsLayer) // 绑定事件 let that = this this.mapview.on(click, function (event: any) { console.log(event, event) that.mapview.hitTest(event.screenPoint).then((responses: any) => { if (responses.results.length > 0) { // marker graphic的attributes const data = responses.results[0].graphic.attributes if (data) { that.$emit(markerClick, data) // 自定义事件 } } }) })

控制标记点显示和隐藏

// controlList：控制列表 this.graphicsLayer.graphics.removeAll() this.controlList.forEach((item: any) => { if (this.markers[item.value]) { if (item.status) { this.graphicsLayer.graphics.addMany(this.markers[item.value]) } // else { // this.graphicsLayer.graphics.removeMany(this.markers[item.value]) // } } })

文档参考

坐标系相关：arcpy投影(二)——基准面变换概念及参数    
    
    
、空间参考对象获取


     


     


、变换关系获取方法梳理与解析（Spatial Reference
 




 




 、ListTransformations）

官方文档：ArcGIS API for JavaScript / API Reference