@cssc-ment/tag-collision-detection

地图标记 tag 碰撞检测，循环检测四个方向，如果有碰撞就不展示

用法

const map = L.map('map', {
  // crs: CRS_4326,
  crs: L.CRS.EPSG3857,
  // 不添加属性说明控件
  attributionControl: false,
  //显示中心
  center: [29.169907662611103, 122.30475884137897],
  //最小显示等级
  // minZoom: 3,
  // //最大显示等级
  // maxZoom: 18,
  //当前显示等级
  zoom: 11,
  zoomControl: false,
  doubleClickZoom: false,
  renderer: L.canvas(),
  // //限制显示地理范围
  // maxBounds: [[-90, -180], [90, 180]],
  preferCanvas: true,
});
L.tileLayer(mapConfig.baseLayer).addTo(this.map);
const tagLayer = new L.FeatureGroup().addTo(this.map);
map.setView([28.357778, 121.656389], 11);
const tagCollisionDetection = new TagCollisionDetection(this.map, this.tagLayer);

tagCollisionDetection.updateMapMarkerTag(
  res.data
    .map(a => ({ mmsi: a.mmsi, lat: a.lat, lng: a.lon, name: a.fleetShipBean.sno }))
    .filter(a => !!a.name),
);

API

Class TagCollisionDetection

构造函数

| 参数 | 类型 | 说明 | 是否必填 | | ------- | ------------------------------- | -------------------------------------------- | ------------------------- | | map | leafletjs.Map | leafletjs Map 对象 | 是 | | layer | leafletjs.FeatureGroup | leafletjs FeatureGroup 对象 | 是 | | maxZoom | number | 地图最大缩放比例，如果大于这个比例，就不标记 | 否（默认值 1） | | tagSize | {width: number, height: number} | tag 大小，不包含文字 | 否（width:12, height: 20) |

updateMapMarkerTag

| 参数 | 类型 | 说明 | 是否必填 | | ---- | --------- | ------ | -------- | | tags | MarkerTag | 标记点 | 是 |

type Rect = {
  left: number;
  top: number;
  width: number;
  height: number;
  lng: number;
  lat: number;
  mmsi: string;
};

type MarkerTag = Pick<Rect, 'lng' | 'lat' | 'mmsi'> & { name: string };