老靳的WebGIS

老靳的WebGIS

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;
            }
        }

实现卷帘分析