tdt-map-vue2

主要功能介绍

1. 传入 datas 坐标，可渲染点, 传入lines 可渲染线
2. 地图渲染完会触发 init 事件，暴露 map 和 BMapGL 两个对象，可在直接操作地图
3. 地图移动或者 zoom 改变会触发 changeView，监听事件可获取相关地图数据，再从后台重新获取 datas，更新地图点（浏览器变化不会触发 changeView 事件）
4. 传入 viewDatas 坐标，同样渲染点（与 datas 一起，谁改变，就渲染谁，不会同时渲染），viewDatas 的改变会触发地图视图移动，即会把所有 viewDatas 渲染到视图中

使用步骤

// main.js中引入，并注册
import TdtMap from "tdt-map-vue2";
Vue.use(TdtMap, {
  tk: "tk",
});

<tdt-map
  style="width:100vw;height:90vh;"
  :datas="datas"
  :viewDatas="viewDatas"
  @changeView="getNewData"
/>

props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------------- | -------------- | ---- | ----------- | ------------------------------------------ | | datas | array | 否 | [] | 数据，具体看下面 ☆ | | viewDatas | array | 否 | [] | 数据，格式同 datas | | viewTimer | number | 否 | 800 | 地图视图改变防抖毫秒数 | | viewLocation | boolean | 否 | false | changeView 是否携带城市地址信息 | | tk | string | 否 | - | 天地图 tk | | center | number[] | 否 | 杭州经纬度 | 地图 center | | zoom | number | 否 | 15 | 地图 zoom | | mapOptions | object | 否 | - | 百度地图初始化参数 minZoom/maxZoom/mapType | | denyRefresh | boolean | 否 | false | 拒绝地图刷新，即地图移动或 zoom 改变不会触发 changeView 事件 | | lines | Array | 否 | [] | 线数据{id:1,coords:[[116.397428, 39.90923],[116.397428, 39.90923]]} | | coordTrans | Object | 否 | null | 坐标系转换库,传入当前坐标系和目标坐标系{from: 'BD09', to: 'WGS84'}, 坐标系转换 |

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",
  },
];

emits

| 名称 | 说明 | | ------------ | ----------------------------------------------------------------------------- | | init | 地图初始化后暴露，{ BMapGL, map } | | changeView | 地图 zoom 或 center 改变后触发，返回地图数据{bounds:{ne:xxx,sw:xxx},zoom:xxx} | | markerClick | 地图上点被点击后触发{ marker, data, e } | | renderMarker | 地图上点渲染完后触发 | | moveStart | 地图移动开始 | | moveEnd | 地图移动结束 | | mapClick | 点击地图 | | renderLine | 渲染线 |

• 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 | 基本上整个中国，全球 |

备注

1. map, TMap: 组件中地图挂载完后，会将暴露这两个对象，可参照天地图直接操作这两个对象
2. viewDatas 的用法：在父组件提供 input 搜索框，请求后台得到数据后提交给地图组件，地图组件会依据请求到的数据确定地图中心；地图组件会同时监听 datas，而它们的基本逻辑是(地图 center、zoom 改变会需要得到新的 datas),(viewDatas 改变会得到地图新的 center、zoom)