初始化地图
引入
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