# arrow-map

**Repository Path**: shi-mingmin/arrow-map

## Basic Information

- **Project Name**: arrow-map
- **Description**: 海图SDK使用示例
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://shi2310.github.io/arrow-map/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-18
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Arrow 海图 SDK

基于 Leaflet 构建的地图 SDK。
![alt text](demo.png "示例")

## 接口介绍

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. 获取桥梁检测绘制对象 [getDrawPolyArray]

```
const polyArray = map.getDrawPolyArray(
    ({ id, latLngs, type, extra }) => {
      // 数据变化
    },
    {
      polygon: { color: "#348bc3", fillColor: "#fff" },
      polyline: { color: "#ff0000" },
    }
  )

// 载入数据
polyArray.load([
    {
      id: "1fa2cad8-bc3b-4b5c-95e2-d2ee4c5fdfab",
      latLngs: [
        {
          lat: 31.252139190566062,
          lng: 122.28332519531251,
        },
        {
          lat: 31.392329799557228,
          lng: 122.29293823242189,
        },
        {
          lat: 31.393305088224245,
          lng: 122.27349937215057,
        },
        {
          lat: 31.253114508640227,
          lng: 122.26391511708012,
        },
      ],
      type: "polygon",
      extra: { name: "测试1" },
    },
])

// 开启绘制
polyArray.openDraw("polygon", { name: "测试" });
```

18. 销毁 [destory]

```
map.destory()
```