初始化地图

引入

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

转载注明原文：https://www.cnblogs.com/vera-7c/p/16911260.html