聚合情况下,点击聚合要素,则显示聚合的设备信息;若只有一个要素,则显示设备信息;聚合情况下:点击设备信息,则继续弹出点击的这个设备详情
业务功能分析:
获取地图上的点击要素方法有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-po