app 端开发时会使用到地图锚点功能,但由于目标设备参差不齐性能表现也不一样,当锚点成千上万时需要点聚合等方法减缓性能的消耗,这里简单说一下 uniapp 上点聚合的使用,基本用到 3 个变量,定义在 data 中的:
1
2
3
| this.map //定义的地图,这里不贴码了
this.cluster //用来创建MarkerClusterer对象,对锚点的增删改查都使用这个来操作.
this.markerArray //需要显示的聚合点数组
|
定义聚合点样式,这里的 count 用在根据聚合点数量动态定义颜色和大小等属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| var count = this.markerArray.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
添加聚合组件,这里的this指向要注意一下
this.map.plugin(["AMap.MarkerClusterer"],function() {
this.cluster = new AMap.MarkerClusterer(
this.map,
this.markerArray,
{
gridSize: 60, //网格像素
minClusterSize: 20, //最小聚合点数量
renderClusterMarker: _renderClusterMarker //上面自定义的样式
}
);
});
|
样式方面可以默认和自定义,文档写的很详细可以看看.对聚合点的操作可以使用
this.cluster.removeMarkers(指定聚合数组)
this.cluster.clearMarkers(销毁所有聚合) 等等方法
踩的坑:
- 如果需要定义多个聚合点按条件显示,记得不显示时需要销毁或移除锚点数组以免聚合点数据紊乱.
- 使用视图 js 时,不用在 data 里创建逻辑 js 已有的数据,在逻辑层标签里绑定数据并 change 到视图 js 的方法后,视图 js 中直接用 this 就可以调用到.