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