功能 | ID |
---|---|
筛选 | #option-choose |
清除筛选 | #option-clean |
显示隐藏控制 | #option-visible |
筛选函数中的layerDefinitoin
控制筛选条件
js
部分
// 我们需要在该组件装载之后做的事情都放在该方法里
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)
var tjUAVLayerLD = new ArcGISDynamicMapServiceLayer(tjUAVurl)// 筛选
map.addLayer(tjUAVLayer)
// *************************************************************************************** //
var that = this
// 筛选
function btnLayerDefinitions() {
map.removeLayer(tjUAVLayer)
var layerDefinitoin = []
layerDefinitoin[0] = 'payMon_suz > 20'
tjUAVLayerLD.setLayerDefinitions(layerDefinitoin)
map.addLayer(tjUAVLayerLD)
that.opensuccess()
}
// 清除筛选
function optinClean() {
map.removeLayer(tjUAVLayerLD)
map.addLayer(tjUAVLayer)
that.opensuccess()
}
function btnVisible() {
if (that.options_power[2].label === '隐藏') {
// 打开所有显示
var visible = []
for (var i = 0; i < tjUAVLayer.layerInfos.length; i++) {
visible.push(i)
}
tjUAVLayer.setVisibleLayers(visible)
that.options_power[2].label = '显示'
} else {
// 关闭所有显示
visible = [-1]
tjUAVLayer.setVisibleLayers(visible)
that.options_power[2].label = '隐藏'
}
that.opensuccess()
}
// *************************************************************************************** //
query('#option-choose').on('click', btnLayerDefinitions)
query('#option-clean').on('click', optinClean)
query('#option-visible').on('click', btnVisible)
})
}
}