enn-group-map

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

• 点聚合渲染: 使用普通方式渲染
• loading：暂时去掉，打包问题
• 路径
• 路径完善
• 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 白名单)