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 = https://www.cnblogs.com/vera-7c/archive/2022/11/21/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

標籤：其他

上一篇：自學 TypeScript 第四天，手把手專案搭建

下一篇：如何避免在flutter中的這兩個表單欄位中填寫相同的值