Arrow 海图 SDK

基于 Leaflet 构建的地图 SDK。

接口介绍

1. 初始化

const map = new MyMap("map");

2. 绘制船舶 [drawShips]

map.drawShips([
    {
      mmsi: "1120154506",
      label: "神华506",
      lng: 121.705,
      lat: 31.3,
      course: 45,
      updatetime: "2024-5-31",
      width: 60,
      length: 110,
    },
  ]);

3. 底图叠加层 [groundOverlay]

map.groundOverlay(
    [
      [31.721139190517842, 121.67430248603551],
      [31.732439796482474, 121.69906802998445],
    ],
    {
      type: "image",
      url: bgPng,
      opacity: 1,
    }
  );

4. 绘制圆圈 [drawCircle]

 map.drawCircle([31.28, 121.75], {
      radius: 10,
      color: #ff0000,
      weight: 2,
      dashArray: "5,5",
      fillColor: "rgba(0,0,0,.5)",
      fillOpacity: 0.3,
  });

5. 绘制轨迹线 [drawTrajectory]

map.drawTrajectory([
  { lat: 31.254086, lng: 121.742848, ts: "2024-7-19 15:32:41" },
  { lat: 31.254086, lng: 121.743048, ts: "2024-7-19 16:00:41" },
  { lat: 31.35, lng: 121.805, ts: "2024-7-20 16:32:41" },
  { lat: 31.37, lng: 121.835, ts: "2024-7-21 18:32:41" },
  { lat: 31.4, lng: 121.9, ts: "2024-7-22 15:32:41" },
])

6. 播放轨迹动画 [playAnimatedMarker]

 map.playAnimatedMarker(
    {
      points: historyLines,
      totalDuration: 10000,
    },
    {
      iconSize: [38, 26],
      iconAnchor: [19, 13],
      iconUrl: icon,
    },
    null, // 每帧动画渲染的回调
    () => {
      // 动画结束
    }
  );

7. 暂停轨迹动画 [pauseAnimatedMarker]

 map.pauseAnimatedMarker(true);

8. 绘制点标记 [drawPointMarkers]

 map.drawPointMarkers([
    {
      lat: 31.374086,
      lng: 121.732848,
      text: "2024-7-19 15:32:41",
      icon: stop1Png,
    },
    { lat: 31.36, lng: 121.805, text: "2024-7-20 15:32:41", icon: stop2Png },
  ]);

9. 绘制 HTML 浮层[drawHtmlOverlay]

map.drawHtmlOverlay(
    [31.28, 121.75],
    `<div class="layer"><div class="name">神华536</div><img width="36" height="36" src="${wavePng}" class="bg" /><div class="triangle"></div></div>`
  );

10. 创建聚合 Marker [createMarkerClusterer]

  map
    .createMarkerClusterer(
      (o) => {
        // 错位布局时html模板
        return `<div
          class="marker"
          style='
            transform: translateX(${
              o.reverse ? "calc(-50% + 14px)" : "calc(50% - 14px)"
            });
            flex-direction: ${o.reverse ? "row-reverse" : "row"}
          '
        >
          <img width='24px' src="${iconPng}" />
          <div class="label" style='flexDirection: ${
            o.reverse ? "row-reverse" : "row"
          }'>
            <div>${o.key}</div>
          </div>
        </div>`;
    })
    .markerClustererSetData(
    [{
    guid: "chenhui",
    position: {
      lng: 121.880877501061,
      lat: 31.84957600087311,
    },
    name: "晨晖区域",
  }]);

11. 绘制原生标记点 [drawMarker]
    默认蓝色图标

map.drawMarker({ lat: 31.3, lng: 121.75 });

12. 绘制原生折线 [drawPolyline]

map.drawPolyline([{ lat: 31.3, lng: 121.75 },{ lat: 31.4, lng: 121.75 }]);

13. 绘制原生多边形 [drawPolygon]

map.drawPolygon([{ lat: 31.3, lng: 121.75 },{ lat: 31.4, lng: 121.75 },{ lat: 31.5, lng: 121.75 }]);

14. 鼠标绘制折线载入数据 [newDrawPolyline]

const c = map.newDrawPolyline(({ id, latLngs, remove }) => {});
c.setData({
    id: "8e6d6c35-cecb-4a37-9833-773e7b143151",
    latLngs: [
      {
        lat: 31.252139190566062,
        lng: 122.28332519531251,
      },
      {
        lat: 31.392329799557228,
        lng: 122.29293823242189,
      },
      {
        lat: 31.400049579500894,
        lng: 122.13741618147185,
      },
      {
        lat: 31.259859656828837,
        lng: 122.12803347785064,
      },
    ],
});

15. 鼠标绘制多边形开启绘制 [newDrawPolygon]

const c = _map.newDrawPolygon(({ id, latLngs, remove }) => {
});
c.openDraw();

16. 开启测量 [startDrawMeasure]

map.startDrawMeasure();

17. 销毁 [destory]

map.destory()