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