openlayers 聚合图层点击事件--点击feature展示相关信息操作

聚合情况下，点击聚合要素，则显示聚合的设备信息；若只有一个要素，则显示设备信息；聚合情况下：点击设备信息，则继续弹出点击的这个设备详情

 

业务功能分析：

获取地图上的点击要素方法有2种途径，

1、interaction中select方法

2、map中forEachFeatureAtPixel方法

其中，当数据量多大的时候，是不建议采用第二种方法，因为forEachFeatureAtPixel的原理，是遍历操作，当数据量大的时候，页面容易卡顿；因此建议采用第一种方法；

在以下的地图初始化方法init中，

　　this.clickMap(evt)方法，就是采用了第二种map中forEachFeatureAtPixel的做法，因此被注释；

　　this.featureClick()方法，是后来后来优化的方法，采用第一种interaction中select方法 。

 

 仅截取部分核心代码，仅供借鉴

1、地图部分代码

其中

id="map"是地图渲染的部分

ref="overlayPopup"是设备信息弹窗

ref="deviceListPopup" 设备聚合列表弹窗

        <el-container style="position: relative;">
            <div id="map" class="map"></div>
            <!-- 自定义开发控件 -->
            <div class="tool-box" v-show="hasLoadMap">
                <map-operation :map="map"></map-operation>
            </div>
            <!-- 设备信息弹窗 -->
            <div class="ol-popup" ref="overlayPopup">
                <div class="close-icon" @click="closeVideoPopup">x</div>
                <div>
                    <div class="vedio-selection" @click="showPlayBox(1)">监测</div>
                    <div class="vedio-selection" @click="showPlayBox(2)">回放</div>
                    <div class="vedio-selection" @click="showDeviceInfoBox" v-if="dockingOneForOne">设备信息</div>
                </div>
                <div class="eachItem">名称：{{popupDeviceInfo.dev_chann_name}}</div>
                <div class="eachItem">类型：{{popupDeviceInfo.channel_type}}</div>
            </div> 
            <!-- 设备聚合列表弹窗 -->
            <div class="ol-popup-devicelist" ref="deviceListPopup">
                <div class="close-icon" @click="closeDevicePopup">x</div>
                <div class="popupTitle">设备信息
                    <span class="popupsubTitle">(合计{{popupDeviceList.length}}个)</span>
                </div>
                <div class="popupDeviceOutter">
                    <div v-for="(item,index) in popupDeviceList" :key="index" class="eachItem" :title="item.dev_chann_name" @click="showDeviceInfoFun(item)">
                        <span class="indexCls">{{index+1}}、</span>
                        <img :src="rspImg(item.facade, item.status)" class="popupImg">
                        {{item.dev_chann_name}}
                    </div>
                </div>
            </div>
        </el-container>

2、地图初始化代码

#method里面

    //初始化
        init() {
            let appCode = 'appCode';
            let layersUrl = sessionStorage.getItem('mapUrl');
            let viewCenter = JSON.parse(sessionStorage.getItem('viewCenter'));
            let mapLayer = initMapLayer(_data.mapType, layersUrl);

             ///鸟瞰图控件
            this.OverviewMapObj = new ol.control.OverviewMap({
                collapsed: false,
                view: new ol.View({
                    center: viewCenter,
                    maxZoom: 18,
                    minZoom: 12,
                    zoom: 13,
                    projection: 'EPSG:4326', //需要跟map中的view一致
                }),
            });
            this.map = new ol.Map({
                layers: mapLayer,
                view: new ol.View({
                    center: viewCenter,
                    maxZoom: 18,
                    minZoom: 8,
                    zoom: 13,
                    projection: 'EPSG:4326',
                }),
                controls: ol.control.defaults({
                    zoomOptions: {
                        zoomInTipLabel: '放大', //Default is Zoom in
                        zoomOutTipLabel: '缩小', //Default is Zoom out
                    },
                    }).extend([
                        new ol.control.MousePosition({
                            coordinateFormat: ol.coordinate.createStringXY(5), //保留5位小数
                        }),
                        new ol.control.ScaleLine(),
                        // new ol.control.ZoomSlider(),
                        this.OverviewMapObj
                    ]),
                interactions: ol.interaction.defaults({
                    doubleClickZoom: false, // 取消双击放大功能交互
                }),
                target: 'map',
            });

            //   双击事件
            this.map.on('dblclick', evt => {
                this.dbclickMap(evt);
            });
            //   单击事件
            // this.map.on('click', evt => {
            //     this.clickMap(evt);
            // });        
            this.featureClick();    // 要素点击事件           
            // this.addListener();
        },

 

3、地图点击事件

对应init里面的click事件

        //点击事件
        clickMap(evt) {
            let featureMouseOver = this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                return feature;
            });
            if (!featureMouseOver) return 
            let overFeature = featureMouseOver.getProperties().features
            if(!overFeature || overFeature.length == 0) return false
            if (overFeature.length === 1) {// 只有一个元素的情况下
                let feature = overFeature[0]; //获取该要素
                let featureData = feature.get('data') || {}
                this.showFeature(featureData, evt.coordinate) 
            } else if(overFeature.length > 1){// 多个元素的情况下
                this.showFeatureList(overFeature, evt.coordinate)   // 展示设备列表
            }
        },

 

4、地图要素select事件

       // 给页面的要素添加点击事件
        featureClick(evt) {
            var selectSingleClick = new ol.interaction.Select({
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 18,
                        fill: new ol.style.Fill({
                            color: 'rgba(70,220,198,0.5)'
                        })
                    })
                })
            });
            this.map.addInteraction(selectSingleClick);
            selectSingleClick.on('select', e =>{
                var featuresAry=e.target.getFeatures().getArray();
                if (featuresAry.length>0){
                    let featureList=featuresAry[0];
                    let coordinate = ol.extent.getCenter(featureList.getGeometry().getExtent());    // 点击的点经纬度
                    // 至此得出聚合图层的要素列表
                    let features=featureList.getProperties().features;   
                    this.closeDevicePopup() // 关闭已打开的列表popup
                    this.closeVideoPopup()  // 关闭已打开的详情popup
                    if(features.length == 1 ) {
                        let featureData = features[0].get('data') || {}
                        this.showFeature(featureData, coordinate) 
                    } else if(features.length > 1) {
                        this.showFeatureList(features, coordinate)   // 展示设备列表
                    }
                }
            })
        },

 

5、地图双击事件。

聚合点击时，和双击事件关系不大，此处仅为记录双击的事件而言

        //双击地图事件
        dbclickMap(evt) {
            let featureMouseOver = this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                return feature;
            });
            if (featureMouseOver) {
                let featureProperties = featureMouseOver.getProperties();
                if (!featureProperties.features) return;
                //聚合情况下
                if (featureProperties.features.length > 1) {
                    //双击聚合图层放大
                    let view = this.map.getView();
                    view.setZoom(view.getZoom() + 2);
                    view.setCenter(featureMouseOver.getGeometry().getCoordinates()); //设置地图显示中心
                }
            }
        },

 

6、查看详情和查看列表方法

附加代码：　

// popup展示，聚合列表数据
        showFeatureList(overFeature, coordinate) {
            this.popupDeviceList = []
            overFeature.forEach(itemFeature =>{
                const itemFeatureData = itemFeature.get('data') || {}
                this.popupDeviceList.push(itemFeatureData)
            })
            let deviceListPopup = this.$refs.deviceListPopup;
            if (!_data.deviceListPopup) {
                _data.deviceListPopup = new ol.Overlay({
                    element: deviceListPopup,
                    offset: [10, 0],
                });
                deviceListPopup.style.display = 'block';
                this.map.addOverlay(_data.deviceListPopup);
            } else {
                deviceListPopup.style.display = 'block';
                _data.deviceListPopup.setOffset([10, 0]); // 设置偏移量
                _data.deviceListPopup.setElement(deviceListPopup);
            }
            _data.deviceListPopup.setPosition(coordinate);
        },
        //popup展示设备的具体信息
        showFeature(featureData, coordinate) {
            let overlayPopup = this.$refs.overlayPopup;
            this.popupDeviceInfo = featureData
            if (!_data.overlayPopup) {
                _data.overlayPopup = new ol.Overlay({
                    element: overlayPopup,
                    offset: [10, 0],
                });
                overlayPopup.style.display = 'block';
                this.map.addOverlay(_data.overlayPopup);
            } else {
                overlayPopup.style.display = 'block';
                _data.overlayPopup.setOffset([10, 0]); // 设置偏移量
                _data.overlayPopup.setElement(overlayPopup);
            }
            _data.overlayPopup.setPosition(coordinate);
            this.setCurrentDevice(featureData)
        },
        //关闭overlayPopup
        closeVideoPopup() {
            let overlayPopup = this.$refs.overlayPopup;
            overlayPopup.style.display = 'none';
        },
         //关闭overlayPopup
        closeDevicePopup() {
            let deviceListPopup = this.$refs.deviceListPopup;
            deviceListPopup.style.display = 'none';
        },