tdt-map-vue2
主要功能介绍
1. 传入 datas 坐标，可渲染点, 传入lines 可渲染线
2. 地图渲染完会触发 init 事件，暴露 map 和 BMapGL 两个对象，可在直接操作地图
3. 地图移动或者 zoom 改变会触发 changeView，监听事件可获取相关地图数据，再从后台重新获取 datas，更新地图点（浏览器变化不会触发 changeView 事件）
4. 传入 viewDatas 坐标，同样渲染点（与 datas 一起，谁改变，就渲染谁，不会同时渲染），viewDatas 的改变会触发地图视图移动，即会把所有 viewDatas 渲染到视图中
使用步骤
``
js
// main.js中引入，并注册
import TdtMap from "tdt-map-vue2";
Vue.use(TdtMap, {
tk: "tk",
});
`
`
html
style="width:100vw;height:90vh;"
:datas="datas"
:viewDatas="viewDatas"
@changeView="getNewData"
/>
`
props
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ----------------- | -------------- | ---- | ----------- | ------------------------------------------ |
| datas | array | 否 | [] | 数据，具体看下面 ☆ |
| viewDatas | array | 否 | [] | 数据，格式同 datas |
| viewTimer | number | 否 | 800 | 地图视图改变防抖毫秒数 |
| viewLocation | boolean | 否 | false | changeView 是否携带城市地址信息 |
| positionControl | boolean | 否 | true | 是否显示缩放平移控件 |
| zoomControl | boolean | 否 | true | 是否显示地图缩放控件 |
| 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}，高优先级 |
| isCustomMarker | boolean | 否 | - | 是否自定义 marker，默认 false，为 true 时，会使用 initTianDiMapMarker 方法渲染 marker |
- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、style(对应样式)、anchor(label 偏移量)的对象
例如：
`
js
[
{
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)