组件leftmap常用API集合，绘图撒点的方法总结（持续更新）

一、地图组件的安装引用

二、创建绘制图层的方法

三、地图撒点的方法案例

四、地图撒点，多变形绘制的方法和案例

1.海图撒点的方法案例。

//引入地图组件的方法
import {L} from "@msa/map-leaflet";

//地图绘制的方法 
 async initDcrNavigationBaseInfoItem() {
//1.创建图层
      const drawLayerGroup = new L.FeatureGroup();
//2.把图层挂载到全局的地图上
      drawLayerGroup.addTo(window.leafletMap);
//3.拿到经纬度数组进行点位处理
      this.dcrNavigationBaseInfoList.forEach((item) => {
//4.解构出经纬度，如果其中一个缺失,则不绘制点位
        const { lat, lng } = item;
        if (!lat || !lng) {
          return;
        }
//5.如果点位存在，则添加他的经纬度，并给点位设置自定义的图标
        const layer = new L.Marker([lat, lng], {
          icon: new L.DivIcon({
            iconSize: [20, 25],
            iconAnchor: [8, 25],
            html: '<i class="iconfont icon-mapmarker" style="font-size:20px;color: red;"></i>',
          }),
          ...item,
          opacity: 1,
        });
//6.然后把每一个创建的点位加入到图层中
        drawLayerGroup.addLayer(layer);
     
    },

// 清除某个点位
const redrawingPoint = (data: DcrNavigationBaseInfo) => {
  const { lat, lng } = data;
  if (lat && lng) {
    if (layersInfo.value.length > 0) {
      const layerToRemove = layersInfo.value.find((item) => item.data.id === data.id)?.layer;
//清除某个点位的方法
      drawLayerGroup.value.removeLayer(layerToRemove);
//
      layersInfo.value = layersInfo.value.filter((item) => item.data.id !== data.id);
    }
  }
};

2.多边形的海图绘制

window.globalDrawLayer.createPolygon();

3.点 绘制

     window.globalDrawLayer.createMarker();

4.线段绘制

  window.globalDrawLayer.createPolyline();

5.矩形的绘制

  window.globalDrawLayer.createRectangle();

6.圆形的绘制

window.globalDrawLayer.createCircle();

7.扇形的绘制

 window.globalDrawLayer.createCircle();

五、复杂逻辑的使用介绍

1.点位的聚合