enn-map
npm 地址
gitlab 地址
主要功能介绍
- 传入 datas 坐标,可渲染点
- 地图渲染完会触发 init 事件,暴露 map 和 BMapGL 两个对象,可在直接操作地图
- 地图移动或者 zoom 改变会触发 changeView,监听事件可获取相关地图数据,再从后台重新获取 datas,更新地图点(浏览器变化不会触发 changeView 事件)
- 传入 viewDatas 坐标,同样渲染点(与 datas 一起,谁改变,就渲染谁,不会同时渲染),viewDatas 的改变会触发地图视图移动,即会把所有 viewDatas 渲染到视图中
- 传入 paths 可渲染移动路径
使用步骤
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 |
地图视图改变防抖毫秒数 |
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 安全考虑
备注
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 白名单)