YY. TileClusterLayer

基于瓦片对点集进行聚合图层, 基于YY. VectorLayer
其主要用来解决大规模的点的聚合

creation

• constructor(id, options)

  • id：图层 ID
  • options 图层配置项
    • options.maxClusterZoom: 最大聚合层级
    • options.clusterMarkerSymbol:获取聚合点样式的函数
    • options.markerEvents:图层上所有点的事件集合
    • options.clusterDispersion:当点击聚合点时是否开启扩散效果
    • options.dispersionCount:支持扩散效果的聚合点的最大数据量
    • options.dispersionDuration:扩散延迟时间

  参数	描述	默认值
  maxClusterZoom	最大聚合层级	18
  clusterMarkerSymbol	获取聚合点样式的函数	null
  markerEvents	图层上所有点的事件集合	null
  clusterDispersion	当点击聚合点时是否开启扩散效果	false
  dispersionCount	支持扩散效果的聚合点的最大数据量, 注意数据量不要太大，否则会卡	100
  dispersionDuration	扩散延迟时间(ms)	100

栅格聚合图层 DEMO

//获取聚合点的样式
function getClusterMarkerSymbol(count) {
    const symbol = {
        markerType: "ellipse",
        markerWidth: 55,
        markerHeight: 55,
        markerFill: "#fff",
        markerLineWidth: 0,
        markerFillOpacity: 1,
        markerOpacity: 1,
        textSize: 15,
        textName: count,
        textHaloFill: "#000",
        textHaloRadius: 1.2,
        textFill: "#fff",
    };
    if (count > 5000) {
        symbol.markerFill = "red";
    } else if (count > 1000) {
        symbol.markerFill = "yellow";
    }
    return new YY.Style(symbol);
}

const tileClusterLayer = new YY.TileClusterLayer("tileClusterLayer", {
    maxClusterZoom: 17,
    //when cluster marker mouseover will show children markers
    clusterDispersion: true,
    // show cluster marker children max count
    dispersionCount: 500,
    //get cluster marker symbol
    clusterMarkerSymbol: getClusterMarkerSymbol,
    // cluster marker,marker events
    markerEvents: {
        click: function(e) {
            console.log(e);
            if (e.target.getProperties().isCluster) {
                console.log("is cluster marker");
            }
        },
        mouseover: function(e) {},
        // ....
    },
});
tileClusterLayer.addTo(map);
const features = gsAreaPoi.data.map((d) => {
    return {
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [d.lng, d.lat],
        },
        properties: {
            name: d.name
        },
        symbol: YY.Style.formatImage({
            markerWidth: 20,
            markerHeight: 30
        }),
    };
});
tileClusterLayer.setData({
    type: "FeatureCollection",
    features
});

methods

setData(geojson)

• 设置新的数据
• 参数
  • {GeoJSON} geojson :
• 返回值： this

其他方法参考YY. VectorLayer