Nothing, Plus More

    enn-map

    0.1.18 • Public • Published

    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 白名单)

    Keywords

    Install

    npm i enn-map

    DownloadsWeekly Downloads

    34

    Version

    0.1.18

    License

    ISC

    Unpacked Size

    138 kB

    Total Files

    24

    Last publish

    Collaborators

    • jiangkewen