百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式

一、问题
公司的项目中在百度地图上生成了成千上万的点，所以使用了标记聚合器MarkerClusterer来处理海量点，但是每个点根据异常类型，分为正常（绿色）和异常（红色），这时如果用了聚合器，只有没被聚合的时候才能看得出来是否异常，因此处理逻辑是，一个聚合如果包含一个及以上的异常点，则显示红色。不包含任何异常点就显示绿色图片效果如下：
缩小后

二、解决方案：
1、生成标记marker时，添加是否异常的属性值

let marker = new BMap.Marker(new BMap.Point(X, Y), {icon});
marker.isAbnormal = Boolean(abnormal_type);

2、生成聚合器options时，添加异常图片样式abnormalStyles

 let options = {markers,styles:[],abnormalStyles:[]}// 设置聚合icon样式var sizes = [53, 56, 66, 78, 90];for(var i = 0, size; size = sizes[i]; i++){options.styles.push({url:this.normalIconUrl + i + '.png',//绿色图片路径size: new BMap.Size(size, size)});options.abnormalStyles.push({url:this.abnormalIconUrl + i + '.png',//红色图片路径size: new BMap.Size(size, size)});//异常图片样式}//for循环的简洁写法this.markerClusterer = new BMapLib.MarkerClusterer(this.map, options); //生成聚合器

3、修改聚合器文件MarkerClusterer_min.js
3.1 将自定义聚合后的图标风格存给MarkerClusterer实例

3.2 给聚合添加方法：判断该聚合对象中是否有异常类型的marker

/*** 判断一个聚合对象中是否有异常类型的marker* @param {Marker} markers 该聚合对象中的所有的标记marker。* @return {Boolean} true 包含异常标记 false 不包含。*/Cluster.prototype._isAbnormal = function(markers) {return markers.find((item)=>{return item.isAbnormal === true})};

3.3 在更新该聚合的显示样式时，如果该聚合包含异常点，则该聚合的样式TextIconOverlay实例重新设置样式，但是看了TextIconOverlay_min.js文件中，只定义了setPosition更新位置和setText更新文字的方法，并没有定义更新图片的方法，所以我们需要自己定义

4、在TextIconOverlay_min.js文件中，定义设置css样式的方法

/***设置该覆盖物的css。*@param {styles}  styles 要设置styles。*@return 无返回值。*/TextIconOverlay.prototype.setStyles = function (styles) {if(styles){this._styles = styles;this._updateCss();//写好的更新css的方法}};

三、OK，大功告成！理一下思路：
整个修改过程，需要了解一下重绘过程，就很简单了。聚合器重画_reDraw()时，先清除上一次的聚合的结果，在根据所给定的标记，创建聚合点，并且遍历所有聚合点，进行重新渲染render。关键就是重新渲染中的updateClusterMarker函数，更新该聚合的显示样式，也即TextIconOverlay。该函数中，有调用重新渲染更新位置和聚合数字的函数，因此，更新样式也需要在这里进行，查看TextIconOverlay源代码，并没有现成的更新样式的方法，这是可以参考setPosition和setText两个函数来自行定义setStyles方法，简单在初始化函数里找一下，就可以看到有一个_updateCss的方法

所以我们根据_updateCss方法来自定义setStyles方法，修改该样式实例的_styles，并抛出，就可以了

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式相关推荐

百度地图后台获取数据，根据经纬度定位标记点，弹出通知窗口
通过ajax获取后台的经纬度信息和其他信息,根据经纬度信息在地图上显示标记点,点击标记点显示通知窗口 <body> <div id="allmap">< ...
百度地图点聚合MarkerClusterer性能优化
公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...
百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题download
最近在做百度地图相关的项目,由于要解决大批量点位渲染的问题,所以使用了聚合MarkerClusterer,但是在使用的过程中,碰到很多问题,例如如何获得已经聚合了的marker.给marker设置了l ...
百度地图点聚合优化重写
vue 引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...
百度地图点聚合功能如何提高性能
点聚合提高加载效率百度示例上面的点聚合功能加载到一万个点就有点卡了,下面进入代码部分 map_juhe.html <!DOCTYPE html> <html lang=" ...
百度地图MarkerClusterer点过多时卡顿问题
问题原因:由于百度地图不断渲染DOM的原因导致点过多时,会出现地图卡顿问题卡顿代码: /*** 向该聚合添加一个标记.* @param {Marker} marker 要添加的标记.* @retur ...
解决百度地图多点聚合卡顿问题
由于百度地图提供的MarkerClusterer_min.js 比较卡顿特此提供加速后的MarkerClusterer_min.js 源码如下 /*** @fileoverview MarkerCl ...
百度地图-图标过多卡顿解决方案
点聚合 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxx& ...
百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）
目录百度地图_账号和获取密钥百度地图_初始化百度地图_变更地图类型百度地图_添加控件百度地图_改变控件位置百度地图_添加覆盖物百度地图_自定义标注图标百度地图_添加文本标注百度地图_ ...

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式相关推荐

最新文章

热门文章

百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式

百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式相关推荐

最新文章

热门文章

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式相关推荐