yymap-markercluster

yymap-markercluster 是一个聚合图层插件

CDN

<script type="text/javascript" src="https://unpkg.com/yymap-markercluster/dist/yymap-markercluster.min.js"></script>

警告

unpkg 比较慢，如果你嫌慢的话，可以把这个资源下载下来

YY.ClusterLayer

YY.ClusterLayer 是导出的命名空间

creation

• constructor(id,data,[options])
  • {Array[YY.Point]} data
  • {Object} options:
    • {Number} maxClusterZoom: 最大的聚合等级
    • {Object} textSymbol: 文字样式
      • textSize: 12, //文字大小
      • textDx: 0,
      • textDy : 0,
      • textFill:"black"
    • {Object} symbol: 聚合图标样式
      • markerType: 'ellipse',
      • markerFill : { property:'count', type:'interval', stops: [[0, 'rgba(110, 204, 57, 1)'], [100, 'rgba(240, 194, 12, 1)'], [500, 'rgba(241, 128, 23, 1)']] },//不同的数量，标注不同的颜色;
      • markerFillOpacity : 1,
      • markerLineOpacity : 1,
      • markerLineWidth : 3,
      • markerLineColor : '#fff',
      • markerWidth :{ property:'count', type:'interval', stops: [[0, 40], [9, 40], [99, 40]] },
      • markerHeight: { property:'count', type:'interval', stops: [[0, 40], [9, 40], [99, 40]] },

 {
    textSymbol: {
        textSize: 12,
        textDx: 0,
        textDy: 0,
        textFill: "white"
    },
    symbol: {
        markerType: 'ellipse',
        markerFill: {
            property: 'count',
            type: 'interval',
            stops: [[0, 'green'], [9, 'blue'], [99, 'red']]
        }, //不同的数量，标注不同的颜色，0-9 green,9-99 blue,>99 red;
        markerFillOpacity: 1,
        markerLineOpacity: 1,
        markerLineWidth: 3,
        markerLineColor: '#fff',
        markerWidth: {
            property: 'count',
            type: 'interval',
            stops: [[0, 40], [9, 40], [99, 40]]
        },
        markerHeight: {
            property: 'count',
            type: 'interval',
            stops: [[0, 40], [9, 40], [99, 40]]
        },
    },
}

examples

基本聚合例子

var map = new YY.Map("map", {
    center: [120.53955699850121, 31.317533128255576],
    zoom: 15,
});

var tileLayer = YY.LayerLookup.lookup("amap");
map.addBaseLayer(tileLayer);

var markers = [];
// // data from realworld.50000.1.js
let data = gsAreaPoi.data;
for (var i = 0; i < data.length; i++) {
    var a = data[i];
    markers.push(new YY.Point([a.lng, a.lat], null, {
        name: a.name
    }));
}

var clusterLayer = new YY.ClusterLayer(YY.H.uuid(), markers, {});

map.addLayer(clusterLayer);

method

getId()

• 获取 ID
• 返回值： String/Number

setId(id)

• 设置 id
• 参数
  • {String/Number} id
• 返回值： this

getMap()

• 获取地图对象
• 返回值： YY. Map

setZIndex(zIndex)

• 设置层级，一般情况下无需修改，特定情况下可以访问该方法修改图层的层级
• 参数
  • {Number} zIndex :
• 返回值： this

getZIndex()

• 获取层级
• 返回值： Number

addPoints(points)

demo

• 添加点
• 参数
  • {Array[YY.Point]} points： 点的集合
• 返回值： this

getPoints()

• 获取点的集合

• 返回值： Array[YY. Point]

getClusters()

• 获取聚合点的集合

• 返回值： Array[Object]

removePoints(points)

• 移除点
• 参数
  • {Array[YY.Point]} points： 点的集合
• 返回值： this

clear()

• 清除数据

• 返回值： this

show()

• show
• 返回值： this

hide()

• hide
• 返回值： this

isVisible()

• 是否可见
• 返回值： Boolean

getOpacity()

• 获取透明度
• 返回值： Number

setOpacity(opacity)

• 设置透明度

• 参数

  • {Number} opacity ：

• 返回值： this

getCount()

• 获取覆盖物数量
• 返回值： Number

isEmpty()

• 是否为空，是否自身不含有覆盖物
• 返回值： Boolean

hit(lnglat, [options])

• 命中覆盖物，通过经纬度查看是否有覆盖物被选中
• 参数
  • {YY.LngLat} lnglat :
  • {Object} options :
• 返回值： Array[YY. Point||Object]