@cssc-ment/tag-collision-detection v0.1.2

@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

构造函数

updateMapMarkerTag

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 };