0.0.1 • Published 2 years ago
enn-map-v3
npm 地址
gitlab 地址
主要功能介绍
- 传入 datas 坐标，可渲染点
- 地图渲染完会触发 init 事件，暴露 map 和 BMapGL 两个对象，可在直接操作地图
- 地图移动或者 zoom 改变会触发 changeView，监听事件可获取相关地图数据，再从后台重新获取 datas，更新地图点（浏览器变化不会触发 changeView 事件）
- 传入 viewDatas 坐标，同样渲染点（与 datas 一起，谁改变，就渲染谁，不会同时渲染），viewDatas 的改变会触发地图视图移动，即会把所有 viewDatas 渲染到视图中
- 传入 paths 可渲染移动路径
使用步骤
// main.js中引入，并注册
import EnnMap from "enn-map-v3";
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 | 地图视图改变防抖毫秒数 |
| 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 事件 |
例如：
[
{
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
备注
map, BMapGL: EnnMap 组件中地图挂载完后，会将暴露这两个对象，可参照百度地图直接操作这两个对象- 使用了 BMapGLLib 的 RichMarker，对代码进行了修改，添加了类 enn-rich-marker，方便修改样式
- viewDatas 的用法：在父组件提供 input 搜索框，请求后台得到数据后提交给地图组件，地图组件会依据请求到的数据确定地图中心；地图组件会同时监听 datas，而它们的基本逻辑是(地图 center、zoom 改变会需要得到新的 datas),(viewDatas 改变会得到地图新的 center、zoom)
- 目前发现自定义图标可能会有像素偏差，icon size 比列一定要设置与 icon 原图一致
- x jkw个人账号创建的百度ak，仅供开发测试使用，其referer白名单为*(线上正式ak请设置合理的Referer白名单)