Openleyer 获取features样式

目录

一、需求说明：

二、业务功能分析：

三、地图点击事件

四、地图要素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