1. enn-map

enn-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 地图视图改变防抖毫秒数
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 白名单)