点聚合

一个地图只会有一个点聚合实例

调用方法

markerClusterer(option)

返回一系列的marker对应的tag数组，通过tag可实现指定marker的删除

option

名称	类型	说明
list	ListItem[]	marker数组，必填
styles	object	自定义聚合后的图标风格 参考官网MarkerClustererOptions
girdSize	number	聚合计算时网格的像素大小，默认60
maxZoom	number	最大的聚合级别，大于该级别就不进行聚合。默认无穷大
success	function	调用成功回调
fail	function	调用失败回调

ListItem

名称	类型	说明
lnglat	lnglat	经纬度，必填
options	MarkerOptions	marker配置

点聚合方法

markerClustererFn(options)

options

名称	类型	说明
function	string	方法名，必填
params	any	参数，根据调用的方法填写对应的参数，remove方法本参数传递的事tag值或tag数组
success	function	调用成功回调
fail	function	调用失败回调

示例代码

  let tags = []
  // 随机坐标
  let arrayObj: any = [];
  for (var i = 0; i < 20; i++) {
    let marker = {
      lnglat: [Math.random() * 40 + 85, Math.random() * 30 + 21],
      options: {
        title: i
      }
    };
    arrayObj.push(marker);
  }
  // 创建点聚合
  TDTRenderRef.value
    .markerClusterer({
      list: arrayObj
    })
  // 清除所有marker
  TDTRenderRef.value.markerClustererFn({
    function: 'clearMarkers'
  });
  // 新增marker，新增的也会返回对应的tags
  TDTRenderRef.value.markerClustererFn({
    function: 'addMarkers', // 若为addMarker，params为单个marker数据，非数组
    params: [
      {
        lnglat: [106.48535, 29.62378]
      },
      {
        lnglat: [106.48535, 29.62398]
      }
    ]
  });
  // 删除指定marker
  TDTRenderRef.value.markerClustererFn({
    function: 'removeMarkers', // 若为removeMarker方法，params为单个tag，非数组
    params: [cluTags[0], cluTags[1]]
  });

贡献者

mosowe