Vue + ArcGIS api 设置范围+坐标

修改中心坐标需要是地理坐标系

功能 ID 函数
控制修改中心坐标的Dialog的显示 #setting-extent-xy dialogSetXYVisible
实现修改中心坐标 ‘#XYDialogOK’ btnSettingXY
控制修改范围的Dialog的显示 #setting-extent dialogSetExtentVisible
实现修改范围 ‘#extentDialogOK’ btnSettingExtent
变量 含义
extent_zdy 修改范围的值
xy_zdy 修改XY的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
mounted() {
esriLoader.setDefaultOptions({ version: '3.28' })
this.createMap()
},

methods: {
createMap: function() {
esriLoader.loadModules(['esri/map',
'esri/geometry/Extent',
'esri/layers/ArcGISDynamicMapServiceLayer',
'dojo/query',
'esri/toolbars/navigation',
'esri/geometry/Point',
'dojo/domReady!'], { css: true })
.then(([Map, Extent, ArcGISDynamicMapServiceLayer, query, Navigation, Point]) => {

var tjUAVurl = 'http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer'

var map = new Map('map', {
extent: new Extent({
xmin: 114.4134760856628,
ymin: 40.13100080490112,
xmax: 118.36547288894677,
ymax: 41.64383821487438,
spatialReference: {
wkid: 4326
}
}),
logo: false
})

var tjUAVLayer = new ArcGISDynamicMapServiceLayer(tjUAVurl)
map.addLayer(tjUAVLayer)

var that = this

function dialogSetXYVisible() {
that.centerDialogVisible = true
}

function btnSettingXY() {
if (map.extent.spatialReference.wkid === 4326) {
console.log(map.extent.spatialReference.wkid)
var point = new Point(that.xy_zdy.x, that.xy_zdy.y)
map.centerAt(point)
that.opensuccess()
} else {
that.openWarning()
}
}
function dialogSetExtentVisible() {
that.centerDialogVisible_extent = true
}

function btnSettingExtent() {
map.setExtent(that.extent_zdy)
that.opensuccess()
}

// *************************************************************************************** //

query('#setting-extent-xy').on('click', dialogSetXYVisible)
query('#XYDialogOK').on('click', btnSettingXY)
query('#setting-extent').on('click', dialogSetExtentVisible)
query('#extentDialogOK').on('click', btnSettingExtent)
})
},

opensuccess() {
this.$message({
message: 'success',
type: 'success'
})
},
openWarning() {
this.$message({
message: '非地理坐标系',
type: 'warning'
})
}

}

文章目录