ArcGIS API for JS 4.x 卷帘分析
首先来开卷帘分析官网的demo
let swipe = new Swipe({
view: view,
leadingLayers: [layer1, layer2],
trailingLayers: [layer3],
direction: "vertical", // swipe widget will move from top to bottom of view
position: 50 // position set to middle of the view (50%)
});
view.ui.add(swipe);
view是地图的view,leadingLayers是上面(左边)的图层数组,trailingLayers是下面(右边)的图层数组,direction是拉动的轴的方向,position是轴在屏幕中的位置百分比。
接下来实现卷帘分析
在MapTree中添加卷帘分析的数据
在MapTool.vue中添加卷帘分析按钮
添加点击事件的响应
撰写卷帘分析代码
//卷列分析
async _initSwipe(){
const _self = this;
const view = _self.$store.getters._getDefaultView;
const [Swipe] = await loadModules(["esri/widgets/Swipe"],options);
const topLayer = view.map.findLayerById('swipeLayerTop');
const bottomLayer = view.map.findLayerById('swipeLayerBottom');
if(topLayer && bottomLayer){
_self.swipe = new Swipe({
view:view,
leadingLayers:[topLayer],
trailingLayers:[bottomLayer],
position:50,
});
view.ui.add(_self.swipe);
}else{
_self.$message({
message:'请添加至少两张业务图层',
type:'warning'
});
return;
}
}//卷列分析
async _initSwipe(){
const _self = this;
const view = _self.$store.getters._getDefaultView;
const [Swipe] = await loadModules(["esri/widgets/Swipe"],options);
const topLayer = view.map.findLayerById('swipeLayerTop');
const bottomLayer = view.map.findLayerById('swipeLayerBottom');
if(topLayer && bottomLayer){
_self.swipe = new Swipe({
view:view,
leadingLayers:[topLayer],
trailingLayers:[bottomLayer],
position:50,
});
view.ui.add(_self.swipe);
}else{
_self.$message({
message:'请添加至少两张业务图层',
type:'warning'
});
return;
}
}
实现卷帘分析
如果觉得我讲的不错的话,就点个关注、收藏吧,这对我很重要!代码我会放在我的微信公众号上:“老靳的 WebGIS”,请在微信公众号上给我发消息,得到代码哦!