目录
一、需求说明：
二、业务功能分析：
三、地图点击事件
四、地图要素select事件
五、地图双击事件
六、移动到地图点事件
一、需求说明：
若聚合情况下，点击聚合要素，若只有一个要素，则显示详情信息，否则显示详情列表
二、业务功能分析：
获取地图上的点击要素方法有2种途径，
1、interaction中select方法
2、map中forEachFeatureAtPixel方法
其中，当数据量多大的时候，是不建议采用第二种方法，因为forEachFeatureAtPixel的原理，是遍历操作，当数据量大的时候，页面容易卡顿；因此建议采用第一种方法
三、地图点击事件
1 //点击事件
2 clickMap(evt) {
3 let featureMouseOver = this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
4 return feature;
5 });
6 if (!featureMouseOver) return
7 let overFeature = featureMouseOver.getProperties().features
8 if(!overFeature || overFeature.length == 0) return false
9 if (overFeature.length === 1) {// 只有一个元素的情况下
10 let feature = overFeature[0]; //获取该要素
11 let featureData = feature.get('data') || {}
12 this.showFeature(featureData, evt.coordinate)
13 } else if(overFeature.length > 1){// 多个元素的情况下
14 this.showFeatureList(overFeature, evt.coordinate) // 展示设备列表
15 }
16 },四、地图要素select事件
1 // 给页面的要素添加点击事件
2 featureClick(evt) {
3 var selectSingleClick = new ol.interaction.Select({
4 style: new ol.style.Style({
5 image: new ol.style.Circle({
6 radius: 18,
7 fill: new ol.style.Fill({
8 color: 'rgba(70,220,198,0.5)'
9 })
10 })
11 })
12 });
13 this.map.addInteraction(selectSingleClick);
14 selectSingleClick.on('select', e =>{
15 var featuresAry=e.target.getFeatures().getArray();
16 if (featuresAry.length>0){
17 let featureList=featuresAry[0];
18 let coordinate = ol.extent.getCenter(featureList.getGeometry().getExtent()); // 点击的点经纬度
19 // 至此得出聚合图层的要素列表
20 let features=featureList.getProperties().features;
21 this.closeDevicePopup() // 关闭已打开的列表popup
22 this.closeVideoPopup() // 关闭已打开的详情popup
23 if(features.length == 1 ) {
24 let featureData = features[0].get('data') || {}
25 this.showFeature(featureData, coordinate)
26 } else if(features.length > 1) {
27 this.showFeatureList(features, coordinate) // 展示设备列表
28 }
29 }
30 })
31 },查看详情和查看列表方法
Html+js
1 <el-container style="position: relative;">
2 <div id="map" class="map"></div>
3 <!-- 自定义开发控件 -->
4 <div class="tool-box" v-show="hasLoadMap">
5 <map-operation :map="map"></map-operation>
6 </div>
7 <!-- 设备信息弹窗 -->
8 <div class="ol-popup" ref="overlayPopup">
9 <div class="close-icon" @click="closeVideoPopup">x</div>
10 <div>
11 <div class="vedio-selection" @click="showPlayBox(1)">监测</div>
12 <div class="vedio-selection" @click="showPlayBox(2)">回放</div>
13 <div class="vedio-selection" @click="showDeviceInfoBox" v-if="dockingOneForOne">设备信息</div>
14 </div>
15 <div class="eachItem">名称：{{popupDeviceInfo.dev_chann_name}}</div>
16 <div class="eachItem">类型：{{popupDeviceInfo.channel_type}}</div>
17 </div>
18 <!-- 设备聚合列表弹窗 -->
19 <div class="ol-popup-devicelist" ref="deviceListPopup">
20 <div class="close-icon" @click="closeDevicePopup">x</div>
21 <div class="popupTitle">设备信息
22 <span class="popupsubTitle">(合计{{popupDeviceList.length}}个)</span>
23 </div>
24 <div class="popupDeviceOutter">
25 <div v-for="(item,index) in popupDeviceList" :key="index" class="eachItem" :title="item.dev_chann_name" @click="showDeviceInfoFun(item)">
26 <span class="indexCls">{{index+1}}、</span>
27 <img :src="rspImg(item.facade, item.status)" class="popupImg">
28 {{item.dev_chann_name}}
29 </div>
30 </div>
31 </div>
32 </el-container>1 // popup展示，聚合列表数据
2 showFeatureList(overFeature, coordinate) {
3 this.popupDeviceList = []
4 overFeature.forEach(itemFeature =>{
5 const itemFeatureData = itemFeature.get('data') || {}
6 this.popupDeviceList.push(itemFeatureData)
7 })
8 let deviceListPopup = this.$refs.deviceListPopup;
9 if (!_data.deviceListPopup) {
10 _data.deviceListPopup = new ol.Overlay({
11 element: deviceListPopup,
12 offset: [10, 0],
13 });
14 deviceListPopup.style.display = 'block';
15 this.map.addOverlay(_data.deviceListPopup);
16 } else {
17 deviceListPopup.style.display = 'block';
18 _data.deviceListPopup.setOffset([10, 0]); // 设置偏移量
19 _data.deviceListPopup.setElement(deviceListPopup);
20 }
21 _data.deviceListPopup.setPosition(coordinate);
22 },
23 //popup展示设备的具体信息
24 showFeature(featureData, coordinate) {
25 let overlayPopup = this.$refs.overlayPopup;
26 this.popupDeviceInfo = featureData
27 if (!_data.overlayPopup) {
28 _data.overlayPopup = new ol.Overlay({
29 element: overlayPopup,
30 offset: [10, 0],
31 });
32 overlayPopup.style.display = 'block';
33 this.map.addOverlay(_data.overlayPopup);
34 } else {
35 overlayPopup.style.display = 'block';
36 _data.overlayPopup.setOffset([10, 0]); // 设置偏移量
37 _data.overlayPopup.setElement(overlayPopup);
38 }
39 _data.overlayPopup.setPosition(coordinate);
40 this.setCurrentDevice(featureData)
41 },
42 //关闭overlayPopup
43 closeVideoPopup() {
44 let overlayPopup = this.$refs.overlayPopup;
45 overlayPopup.style.display = 'none';
46 },
47 //关闭overlayPopup
48 closeDevicePopup() {
49 let deviceListPopup = this.$refs.deviceListPopup;
50 deviceListPopup.style.display = 'none';
51 },五、地图双击事件
1 //双击地图事件
2 dbclickMap(evt) {
3 let featureMouseOver = this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
4 return feature;
5 });
6 if (featureMouseOver) {
7 let featureProperties = featureMouseOver.getProperties();
8 if (!featureProperties.features) return;
9 //聚合情况下
10 if (featureProperties.features.length > 1) {
11 //双击聚合图层放大
12 let view = this.map.getView();
13 view.setZoom(view.getZoom() + 2);
14 view.setCenter(featureMouseOver.getGeometry().getCoordinates()); //设置地图显示中心
15 }
16 }
17 },
六、移动到地图点事件
// 监听鼠标移动，移动到feature上时，鼠标变为可点击的状态
this.map.on('pointermove', (e) => {
// 获取像素位置
let pixel = this.map.getEventPixel(e.originalEvent);
// 根据点位像素位置，获取此位置的要素feature
let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
return feature;
});
// 要素存在，并且是需要改变鼠标样式为pointer的feature，鼠标样式变为pointer，否则auto
if (feature && feature.get('pointer')) {
this.map.getTargetElement().style.cursor = 'pointer';
} else {
this.map.getTargetElement().style.cursor = 'auto';
}
});
