基于 mapbox-gl-js 的扩展封装了 markerlayer 图层,支持 Marker 聚合自动避让

• 本程序参考了作者 @huanlii Mapbox GL JS Cookbook --echarts的文章并做了封装。

安装

npm install @jindin/mapbox-gl-marker-layer

使用

import MarkerLayer from'mapbox-gl-layer/MarkerLayer';

const map = new mapboxgl.Map({
  ....
  })
  const clusterLayer = new MarkerLayer({
    id: "cluster-marker-layer",
    data: {
      type: "FeatureCollection",
      features: [
        ....
      ],
    },
    cluster: false, //是否聚合。true: 类似于图标自动避让效果
    clusterRadius: 25, //聚合半径, 默认25
    minZoom: 5,
    maxZoom: 12,
    onCreateMarker: (feature: GeoJSON.Feature) => {
        //创建自定义Marker
      return new mapboxgl.Marker();
    },
  } as MarkerLayerOptions);

  map.addLayer(clusterLayer);

更新数据源

通过   clusterLayer.loadData("/data/point-1.json") 来更新数据源