# enn-map-v3

> vue3版本的地图

Latest version **0.0.1** (published 2022-06-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install enn-map-v3
pnpm add enn-map-v3
yarn add enn-map-v3
bun add enn-map-v3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-06-01 |
| First published | 2022-06-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 145.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | jiangkewen |

## Links

- npm: https://www.npmjs.com/package/enn-map-v3
- npm.io page: https://npm.io/package/enn-map-v3

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.36
- [echarts](https://npm.io/package/echarts.md) ^5.3.2

## Recent versions

- 0.0.1 (latest) — 2022-06-01

## README

# enn-map-v3

[npm 地址](https://www.npmjs.com/package/enn-map-v3)

[gitlab 地址](http://10.0.3.8/m8/frontend-common/enn-map-v3)

- 依赖：百度地图webgl版v1.0

## 主要功能介绍

1. 传入 datas 坐标，可渲染点
2. 地图渲染完会触发 init 事件，暴露 map 和 BMapGL 两个对象，可在直接操作地图
3. 地图移动或者 zoom 改变会触发 changeView，监听事件可获取相关地图数据，再从后台重新获取 datas，更新地图点（浏览器变化不会触发 changeView 事件）
4. 传入 viewDatas 坐标，同样渲染点（与 datas 一起，谁改变，就渲染谁，不会同时渲染），viewDatas 的改变会触发地图视图移动，即会把所有 viewDatas 渲染到视图中
5. 传入 paths 可渲染移动路径

## 使用步骤

```js
// main.js中引入，并注册
import EnnMap from "enn-map-v3";
Vue.use(EnnMap, {
  ak: "ak",
});
```

```html
<enn-map
  style="width:100vw;height:90vh;"
  :datas="datas"
  :viewDatas="viewDatas"
  :paths="paths"
  :imgs="iconImgs"
  @changeView="getNewData"
/>
```

## props

| 参数              | 类型           | 必填 | 默认值              | 说明                                       |
| ----------------- | -------------- | ---- | ------------------- | ------------------------------------------ |
| datas             | array          | 否   | []                  | 数据，具体看下面 ☆                         |
| viewDatas         | array          | 否   | []                  | 数据，格式同 datas                         |
| paths             | array          | 否   | []                  | 路径数据，具体看下面 □                     |
| imgs              | array          | 否   | -                   | 自定义图标，具体看下面 △                   |
| allPathTime       | number         | 否   | 10                  | 路径运动总时长                             |
| infoWidth         | string         | 否   | max-content         | 弹框宽度                                   |
| maxInfoWidth      | string         | 否   | 300px               | 弹框最大宽度                               |
| infoImgWidth      | string         | 否   | 300px               | 弹框图片宽度                               |
| infoImgHeight     | string         | 否   | 150px               | 弹框图片高度                               |
| infoAnchor        | number         | 否   | -26                 | 弹框 y 轴偏移                              |
| viewTimer         | number         | 否   | 800                 | 地图视图改变防抖毫秒数                     |
| ak                | string         | 否   | -                   | 百度地图 ak                                |
| center            | number[]       | 否   | 杭州经纬度          | 地图 center                                |
| zoom              | number         | 否   | 15                  | 地图 zoom                                  |
| mapOptions        | object         | 否   | -                   | 百度地图初始化参数 minZoom/maxZoom/mapType |
| zoomControl       | object/boolean | 否   | null                | 百度自带的缩放控件                         |
| locationControl   | object/boolean | 否   | null                | 百度自带定位放控件                         |
| customZoomControl | object/boolean | 否   | true                | 自定义缩放控件                             |
| customTypeControl | object/boolean | 否   | true                | 自定义地图类型控件                         |

## datas ☆ 介绍

| 参数    | 类型            | 必填 | 默认值 | 说明                                                  |
| ------- | --------------- | ---- | ------ | ----------------------------------------------------- |
| id      | string/number   | 是   | -      | 唯一标识，用于点清理等工作，必传                      |
| lng     | string          | 是   | -      | 点经度                                                |
| lat     | string          | 是   | -      | 点纬度                                                |
| img     | image           | 否   | -      | 展示图片                                              |
| infos   | 二维数组/string | 否   | -      | 展示的文字                                            |
| icon    | index           | 否   | -      | 根据传入的 imgs，设置每个点的图标，不传则使用百度默认 |
| noClick | boolean         | 否   | -      | 不触发点击 marker 事件                                |

例如：

```js
[
  {
    id: "4968-a081",
    lat: "31.792512",
    lng: "116.829919",
    img: "http://192.168.0.222:10010/static/media/default.jpg",
    infos: [
      ["名称", "#次高压4#"],
      ["压力", "六安次高压"],
      ["标号", "站至合肥新奥啊啊啊啊啊啊啊门站"],
      ["标号222", "站至合肥新奥啊啊啊啊啊啊啊门站"],
    ],
    icon: 0,
  },
  {
    id: 2,
    lat: 20,
    lng: 116,
    infos: "将会被渲染成richInfo",
  },
];
```

## paths □ 介绍

| 参数         | 类型          | 必填 | 默认值       | 说明                |
| ------------ | ------------- | ---- | ------------ | ------------------- |
| id           | string/number | 是   | -            | id                  |
| points       | number[]      | 是   | -            | 路径经纬度{lng,lat} |
| info         | string        | 否   | -            | 移动点渲染的文字    |
| img          | string        | 否   | -            | 移动点渲染的图片    |
| strokeColor  | string        | 否   | rgb(0,0,200) | rgb 路径颜色        |
| strokeWeight | string        | 否   | 5            | 路径宽度            |

## imgs △ 介绍

| 参数 | 类型     | 必填 | 默认值 | 说明                   |
| ---- | -------- | ---- | ------ | ---------------------- |
| icon | image    | 是   | -      | 图标                   |
| size | number[] | 是   | -      | 图标宽高，注意比列设定 |

## emits

| 名称         | 说明                                                                          |
| ------------ | ----------------------------------------------------------------------------- |
| init         | 地图初始化后暴露，{ BMapGL, map }                                             |
| changeView   | 地图 zoom 或 center 改变后触发，返回地图数据{bounds:{ne:xxx,sw:xxx},zoom:xxx} |
| markerClick  | 地图上点被点击后触发{ marker, data, e }                                       |
| renderMarker | 地图上点渲染完后触发                                                          |

- changeView: 因为 viewDatas 改变导致视图发生改变，不应该触发 changeView，这个时候如果想获取地图视图，建议使用 map.getBounds()和 map.getZoom()手动获取相关数据

## 百度地图 zoom 大致范围

| zoom    | 级别                             |
| ------- | -------------------------------- |
| 16 往上 | 更细节                           |
| 14-15   | 看清居民区、商业区、医院的颜色块 |
| 12-13   | 市区、城市、地铁线               |
| 11-12   | 市级，周围市                     |
| 9-10    | 省级，1-2 个省                   |
| 7-8     | 省级，4-5 个省                   |
| 6-7     | 省级，小半个中国                 |
| 4-6     | 基本上整个中国，全球             |

## todos

- [x] 点聚合渲染: 使用普通方式渲染
- [x] loading：暂时去掉，打包问题
- [x] 路径
- [ ] 路径完善
- [ ] z-index 问题
- [ ] 地区搜索框
- [ ] infos 安全考虑

## 备注

1. `map`, `BMapGL`: EnnMap 组件中地图挂载完后，会将暴露这两个对象，可参照[百度地图](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show)直接操作这两个对象
2. 使用了 BMapGLLib 的 RichMarker，对代码进行了修改，添加了类 enn-rich-marker，方便修改样式
3. viewDatas 的用法：在父组件提供 input 搜索框，请求后台得到数据后提交给地图组件，地图组件会依据请求到的数据确定地图中心；地图组件会同时监听 datas，而它们的基本逻辑是(地图 center、zoom 改变会需要得到新的 datas),(viewDatas 改变会得到地图新的 center、zoom)
4. 目前发现自定义图标可能会有像素偏差，icon size 比列一定要设置与 icon 原图一致
5. x jkw个人账号创建的百度ak，仅供开发测试使用，其referer白名单为*(线上正式ak请设置合理的Referer白名单)

---
_Source: https://npm.io/package/enn-map-v3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._