首页 > 其他分享 >vue+ arcgis for js4.x 地方坐标系地图服务(Spatial Reference)

vue+ arcgis for js4.x 地方坐标系地图服务(Spatial Reference)

时间:2022-11-21 14:26:27浏览次数:86  
标签:vue Reference gisConstructor markers js4 item let any esri

初始化地图

引入

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

标签:vue,Reference,gisConstructor,markers,js4,item,let,any,esri
From: https://www.cnblogs.com/vera-7c/p/16911260.html

相关文章

  • vue 倒计时组件
    引用自https://github.com/cgygd/vue2-countdown页面中使用<count-downv-on:start_callback="countDownS_cb(1)"v-on:end_callback="countDownE_cb(1)":currentTime=......
  • Vue 定义全局过滤器
    使用Moment插件实现时间的转换。//定义全局过滤器开始//引入组件importMomentfrom'moment';//配置中文转换Moment.locale('zh-cn');Vue.filter('convertTi......
  • avue-data使用记录
    1、大屏需要在bladeX框架里使用,是vue项目,avue-data生成的是html,愣转成vue代码没有成功解决:转为跳转至html文件中,文件存放在public文件夹下.vue文件中直接跳转文件存放......
  • vue组件中的作用域插槽
    插槽<slot>可以在父组件使用子组件时,改变子组件类容。作用域插槽可以使得父组件页面可以使用子组件的数据:v-slotv-slot具名插槽使用<templatev-slot:header><h1>......
  • 全局安装vue-cli 和项目创建
    npmiwebpack-g#安装webpacknpmivue-cli-g#安装脚手架vueinitwebpackdemo#创建项目全局安装vue-cli和项目创建npminstall-g@vue/cli#用npm安装脚......
  • java报错:The reference to entity
    java关于报错:Thereferencetoentity"characterEncoding"mustendwiththe';'delimiter.Java解析XML文件错误。错误信息提示代码类似如下:Thereferencetoentity"......
  • vue学习
    #1安装vue-cli脚手架:sudonpminstall-gvue-cli#2查看可以使用哪个模板:vuelist#3vueinitwebpack(模板名称)sell(项目名称)#4安装过程:--Projectnamesell......
  • vue 3.0 常用api 的简介
    vue3.0生命周期写法一和vue2.x一致区别在于(beforeUnmount、unmount)名称不一样写法二在setup中使用,需要引用如:import{onBeforeMount}from‘vue’Setup(){......
  • 没必要阅读 Vue 源码吧?
    Vue的渐进式设计使得它非常容易上手,在最简单的情况下,我们只需要引入Vue的JS文件,然后newVue()即可使用声明式渲染。Vue的文档编写也比较优秀,方便使用者一步一步深入......
  • 超级详细的Vue安装与配置教程
    原文: https://www.jb51.net/article/251371.htm超级详细的Vue安装与配置教程 Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要......