template
部分
<template>
<el-row style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;">
<el-button type="" icon="el-icon-plus" circle class="zoomin"></el-button>
<el-button type="" icon="el-icon-minus" circle class="zoomout"></el-button>
<el-button type="info" icon="el-icon-thumb" circle class="pan"></el-button>
<el-button type="info" icon="el-icon-full-screen" circle class="fullmap"></el-button>
<el-button type="" icon="el-icon-arrow-left" circle class="beforePic"></el-button>
<el-button type="" icon="el-icon-arrow-right" circle class="afterPic"></el-button>
</el-row>
</template>
js
部分
import * as esriLoader from 'esri-loader'
export default {
data() {
return {
xyText: '',
extent_tag: [ ],
value: '',
options_power: [{
value: 'option-choose',
label: '筛选'
}, {
value: 'option-clean',
label: '清除'
}, {
value: 'option-visible',
label: '显示'
}, {
value: 'setting-extent-xy',
label: '设置坐标'
}, {
value: 'setting-extent',
label: '设置范围'
}],
xy_zdy: {},
extent_zdy: {},
centerDialogVisible: false,
centerDialogVisible_extent: false,
checked: true
}
},
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 navToolbar = new Navigation(map)
query('.zoomin').on('click', () => {
navToolbar.activate(Navigation.ZOOM_IN)
})
query('.zoomout').on('click', () => {
navToolbar.activate(Navigation.ZOOM_OUT)
})
query('.pan').on('click', () => {
navToolbar.activate(Navigation.PAN)
})
query('.fullmap').on('click', () => {
navToolbar.zoomToFullExtent()
})
query('.beforePic').on('click', () => {
navToolbar.zoomToPrevExtent()
})
query('.afterPic').on('click', () => {
navToolbar.zoomToNextExtent()
})
}
}
效果图