enn-map

npm 地址

gitlab 地址

主要功能介绍

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

使用步骤

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

<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 | 地图视图改变防抖毫秒数 | | viewLocation | boolean | 否 | false | changeView 是否携带城市地址信息 | | 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 事件 | | titleKeys | string | 否 | - | 指定 infos 中哪个数据有悬浮 title | | infoBtn | {text:'xxx'} | 否 | - | 添加按钮，会触发全局的 mapClick 事件 | | labelFn | function | 否 | - | 自定义 Label，返回{content,style,anchor}，高优先级 |

• labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、style(对应样式)、anchor(label 偏移量)的对象

例如：

[
  {
    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 组件中地图挂载完后，会将暴露这两个对象，可参照百度地图直接操作这两个对象
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 白名单)