tdtmapcomponentvsf
v1.1.0
Published
使用天地图 api 与 web components 技术实现可以复用的地图框架 天地图 api http://lbs.tianditu.gov.cn/api/js4.0/class.html Web Components https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
Downloads
12
Readme
使用天地图 api 与 web components 技术实现可以复用的地图框架 天地图 api http://lbs.tianditu.gov.cn/api/js4.0/class.html Web Components https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
1.Web Components 技术简介
基本构成
Custom elements（自定义元素）：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML 模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
生命周期
connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。
disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。
adoptedCallback：当自定义元素被移动到新文档时被调用。
attributeChangedCallback：当自定义元素的一个属性被增加、移除或更改时被调用
CSS伪类
:defined：匹配任何已定义的元素，包括内置元素和使用 CustomElementRegistry.define() 定义的自定义元素。
:host：选择 shadow DOM 的 shadow host，内容是它内部使用的 CSS（containing the CSS it is used inside）。
:host()：选择 shadow DOM 的 shadow host，内容是它内部使用的 CSS（这样您可以从 shadow DOM 内部选择自定义元素）— 但只匹配给定方法的选择器的 shadow host 元素。
:host-context(): 选择 shadow DOM 的 shadow host，内容是它内部使用的 CSS（这样您可以从 shadow DOM 内部选择自定义元素）— 但只匹配给定方法的选择器匹配元素的子 shadow host 元素。2.实现思路（以 Marker 为例）
1) 依照https://developer.mozilla.org/zh-CN/docs/Web/Web_Components 基本写法创建一个组件
2) constructor:构造函数中是做一些初始化的操作，在组件身上绑定创建的实例方便页面操作，绑定自定义属性atb对象，所有的自定义属性经过校验后都存储在atb对象中方便组件内部操作,绑定map对象，parentNode上的map。
3) connectedCallback:第一次创建时使用天地图api创建对应的覆盖物，并为覆盖物添加相应的监听事件，最后在地图上添加该覆盖物
注意：覆盖物等地图实例的创建，在页面中都要写在ld-map组件内！！！没有明确写有插槽的组件内编写的标签也无效。
4) observedAttributes:监听自定义的属性，当属性改变时组件触发attributeChangedCallback(name, oldValue, newValue)
name为属性名用switch选择调用对用的方法，在方法中使用天地图api修改地图与atb对象。oldValue, newValue为新旧值
5）disconnectedCallback:当组件从页面中被删除时执行的回调，使用天地图api销毁对应的覆盖物或者地图3.页面使用组件步骤及开发中遇到的问题与解决方案 (可能并非最佳方案,仅供参考)
1) 导入地图组件与天地图api:已将所有的组件与需要用到的样式打包上传到npm仅需在项目终端中npm i tdtmapcomponent并将打包后的组件引入项目中即可
<script src="./node_modules/tdtmapcomponent/index.js"></script>
或者 import 'tdtmapcomponent'
上面的方法为全部导入，按需导入组件：npm i tdtmapcomponentvsf 这个npm包有完整的代码，在components文件夹中导入对应的组件就可以，需注意tdtmapcomponent中直接导入了天地图api的js文件，tdtmapcomponentvsf中需要手动配置天地图api或者导入tdt.js文件
2) 使用组件:web components的组件名中间必须有- 为的是区分自定义标签，在组件上定义自定义属性为组件传入值！！！(注意自定义属性都是小写,不是小写的在组件内也会被改为小写)
例如 <ld-marker lng="116.40769" lat="39.89945" id="marker1" icon="./imgs/myPoint.png" iconanchorx="19" opacity="1000" iconanchory="35" iconsize="35" draggable="true"></ld-marker>
3) 地图实例方法的调用: 有些地图实例的方法太多了，而且大部分在更改属性时就能调用并不需要单独封装方法，因此如果需要在页面内调用该实例的方法时只需要获取dom，在dom上绑定的对象调用需要调用的方法即可
4) 覆盖物的监听事件绑定: 找到组件的dom,监听对应的事件名，事件名格式为事件+覆盖物名称例如 clickMarker ,dblclickMarker
其中传参e为绑定监听事件时创建的CustomEvent对象，里面的detail有组件的dom对象与天地图api触发该事件时的返回的参数
原生:document.querySelector('#marker1').addEventListener('dblclickMarker',handleClickMarker)
function handleClickMarker(e){
console.log(e);
}
vue中绑定事件的写法更加简单
<map @clickMap="clickMapHandle"></map>
methods:{
clickMapHandle(e){
console.log(e);
}
}
5) 自定义属性的绑定: 根据手册下面的给出的自定义属性为组件绑定需要的属性前面加上data-。
1.原生中绑定或改变自定义属性的方法: 获取组件的dom对象，再对自定义属性进行操作。
例：document.querySelector('ld-marker').setAttribute('opacity',0.5)
2.Vue中绑定或改变自定义属性的方法:
问题1：Vue中的v-bind并不能为组件传入自定义键值对，因为v-bind将标签上v-bind化了的属性解析出属性集合attrs，在start回调中返回
在start回调中创建ASTElement，createASTElement(… ,attrs, …)创建后ASTElement会生成attrsList和attrsMap(具体可以了解v-bind源码解析)。在组件内部是通过dom上的attrbute获取自定义属性键值对，所以不能使用v-bind。
解决方法:命名方式改为data-XXXX ，在试验过程中发现data-XXX的自定义属性在Vue中传入组件后并不会消失，而且能正常显示所绑定的值
例：<ld-marker ref="marker" data-lng="116.40769" data-lat="39.89945" ></ld-marker>
data(){
return {
lng:116.40769
lat:39.89945
}
},
问题2:当我们需要传入或者修改数组/对象的格式的自定义属性时，组件内部接受到的值格式会发生变化。[[120.39,39],[121,39.4]] ===> 120.39,39,121,39.4
解决方法:使用JSON.stringify将数组/对象格式转化为字符串，组件内部再将字符串JSON.parse转换回原来的数组格式。
例：传值<ld-polyline ref="polyline" :data-points='JSON.stringify(points)'></ld-polyline>
data(){
return {
points:[[116.5,39.4],[116.9,39.4],[116.6,39.7],[116.1,39.0]],
lng:116.40769
lat:39.89945
}
},
组件内if(newValue.constructor === String && Array.isArray(JSON.parse(newValue)) ){
newValue=JSON.parse(newValue)
....
}
6)组件注销前后的自定义函数:当组件从地图上被注销前后开发者可能需要在注销前对页面或者地图做一些处理。例如移除marker时将打开的infowwindow关闭，用户在移除某个覆盖物前系统对用户进行提示....等等
解决方法：在组件上添加自定义事件beforeDestoryWCS,destoryWCS(注销前为beforeDestoryWCS，注销后为destoryWCS名称不可变),组件内部disconnectedCallback生命周期里，且在从地图里移除覆盖物前触发自定义事件beforeDestoryWCS。
由于组件执行顺序是先执行disconnectedCallback再执行js所以挂载前的生命周期无法实现
例：页面中
function test() {
console.log('组件注销后');
}
document.querySelector('ld-marker').addEventListener('beforeDestoryWCS',test)
组件内
disconnectedCallback() {
if (this.map && this.marker){
this.dispatchEvent(new Event('beforeDestoryWCS'));
this.map.removeOverLay(this.marker);
}
}
7)组件内使用组件：在页面中引入组件后，使用js创建组件，需要注意组件要挂载在哪个节点后面
例：
const infoWindow=document.createElement('ld-infowindow')
infoWindow.setAttribute('data-visible',false)
infoWindow.setAttribute('data-offset','0,-40')
this.parentNode.appendChild(infoWindow)
8) 复杂业务时组件无法满足业务需求的解决方法：像部分服务类的api用组件创建不方便使用所有没有封装，但是在window上挂载了T对象就是天地图api,组件身上挂载了相应的在地图上的实例。通过天地图api与组件身上的覆盖物实例可以很方便地通过api来操作地图,创建覆盖物，使用服务类api等等操作4.参考手册
基本类型
LngLatBound 类型 "[[130,39],[131,40]]" LngLat 类型 "120,39" points 类型 "[[130,39],[131,40],[122,35],[451,45]]"
地图主类
map (地图 方法较多请参考官网)
自定义属性(属性名, 用途，类型，默认值)
width 地图的宽度 number 400
height 地图的高度 number 400
center 地图的初始化中心点 LngLat 0,0
maxbounds 地图被限制在给定的地理边界内 LngLatBound null
zoom 地图的初始化级别 number 12
maxzoom 地图允许展示的最大级别 number null
minzoom 地图允许展示的最小级别 number null
projection 指定地图的投影方式 EPSG:4326/EPSG:900913 （目前只有 EPSG:900913 可用，需要展示大地平面投影通过添加图层的方式）
事件
clickMap {type, target, lnglat, containerPoint } 左键单击地图时触发此事件。
dblclickMap {type, target, lnglat, containerPoint } 鼠标双击地图时会触发此事件。
contextmenuMap {type, target, lnglat, containerPoint } 右键单击地图时触发此事件。
mousemoveMap {type, target, lnglat, containerPoint } 鼠标在地图区域移动过程中触发此事件。
mouseoverMap {type, target, lnglat, containerPoint } 鼠标移入地图区域时触发此事件。
mouseoutMap {type, target, lnglat, containerPoint } 鼠标移出地图区域时触发此事件。
movestartMap {type, target} 地图移动开始时触发此事件。
moveMap {type, target} 地图移动过程中触发此事件。
moveendMap {type, target} 地图移动结束时触发此事件。
zoomstartMap {type, target} 地图更改缩放级别开始时触发触发此事件。
zoomendMap {type, target} 地图更改缩放级别结束时触发触发此事件。
addoverlayMap {type, target, addoverlay } 当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件。
removeoverlayMap {type, target, removeoverlay } 当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件。
addcontrolMap {type, target, addcontrol } 当使用Map.addControl()方法向地图中添加单个控件时会触发此事件。
removecontrolMap {type, target, removecontrol } 当使用Map.removeControl()方法移除单个控件时会触发此事件。
clearoverlaysMap {type, target} 当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件。
dragstartMap {type, target } 开始拖拽地图时触发。
dragMap {type, target } 拖拽地图过程中触发。
dragendMap {type, target } 停止拖拽地图时触发。
layeraddMap {type, target, layer } 添加一个自定义地图图层时触发此事件。
layerremoveMap {type, target, layer } 移除一个自定义地图图层时触发此事件。
loadMap {type, target} 调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图瓦片。
resizeMap {type, target, newSize, oldSize } 地图可视区域大小发生变化时会触发此事件。
levelsMap {type, target, minzoom, maxzoom } 调用setMinZoom和setMaxZoom时会触发此事件。覆盖物
marker 点位图像标注(有传入 icon 属性就创建 Icon 对象，没有传入 Icon 就创建 Marker 对象)
自定义属性
lng 经度 number 0
lat 纬度 number 0
icon 图标类用来表达注记 string（图片路径）null
iconanchorx 有 icon 时 icon 的 x 轴上的偏移 number null
iconanchory 有 icon 时 icon 的 y 轴上的偏移 number null
iconsize 有 icon 时 icon 的大小 number 30
opacity 设置透明度 number 0-1 1
draggable 决定注记是否可被鼠标或触摸拖动 boolean false
zindex 设置 z-index number 1
事件
clickMarker {type,target,lnglat,containerPoint } 点击标注图标后会触发此事件
dblclickMarker {type,target,lnglat,containerPoint } 双击标注图标后会触发此事件
mousedownMarker {type,target,lnglat,containerPoint } 鼠标在标注图标上按下触发此事件
mouseupMarker {type,target,lnglat,containerPoint } 鼠标在标注图标释放触发此事件
mouseoutMarker {type,target,lnglat,containerPoint } 鼠标离开标注图标时触发此事件
mouseoverMarker {type,target,lnglat,containerPoint } 当鼠标进入标注图标区域时会触发此事件
dragstartMarker {type,target } 当用户拖动标注图标时触发
dragMarker {type,target,lnglat } 当用户拖动标注图标时不断触发
dragendMarker {type,target,lnglat } 当用户停止拖动标注图标时触发
removeMarker {type,target } 移除标注图标时触发Infowindow (信息的窗口)
自定义属性
visible boolean 是否可见 false
lng number 经度 0
lat number 纬度 0
content string/HTMLELEMENT 弹框内容 null
弹框内容的第二种展示方式：使用插槽(如果使用插槽展示弹框内容无法监听内容变化，建议使用 content,content 与插槽两种方式不可混用)
例如：
<ld-infowindow data-lat="39" data-lng="116" data-visible="true" data-offset="0,-25"data-styles="background:green">
<div>
<span style="color:red ;">123</span>
<span style="color:red ;">321</span>
</div>
</ld-infowindow>
minWidth number 弹出框的最小宽度 50
maxWidth number 弹出框的最大宽度 300
maxHeight number 设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器 null
autoPan boolean 是否开启信息窗口打开时地图自动移动（默认关闭） false
closeButton boolean 控制弹出窗口中出现的关闭按钮 true
offset Point 弹出窗口位置的补偿值 在同一图层中打开弹出窗口时对于控制锚点比较有用 0，0
autoPanPadding Point 在地图视图自动平移产生后弹出窗口和地图视图之间的边缘 0，0
closeOnClick boolean 是否开启点击地图关闭信息窗口（默认关闭） false
事件
closeInfowindow {type, target, lnglat } 信息窗口被关闭时触发此事件
openInfowindow {type, target, lnglat } 信息窗口被打开时触发此事件
clickcloseInfowindow {type, target } 点击信息窗口的关闭按钮时触发此事件Polyline (折线)
自定义属性
points points 坐标数组 必传
color string 折线颜色 "#0000FF"
weight number 折线的宽度，以像素为单位 3
opacity number 折线的透明度（范围 0-1 之间） 0.5
lineStyle string 拆线的样式（solid 或 dashed） "solid"
事件
click {type,target,lnglat,containerPoint } 点击折线后会触发此事件
dblclick {type,target,lnglat,containerPoint } 双击折线后会触发此事件
mousedown {type,target,lnglat,containerPoint } 鼠标在折线上按下触发此事件
mouseup {type,target,lnglat,containerPoint } 鼠标在折线释放触发此事件
mouseout {type,target,lnglat,containerPoint } 鼠标离开折线时触发此事件
mouseover {type,target,lnglat,containerPoint } 当鼠标进入折线区域时会触发此事件
remove {type,target } 移除折线时触发Polygon (多边形)
自定义属性
points 字符串格式的数组 坐标数组 必传
color string 折线颜色 "#0000FF"
weight number 折线的宽度，以像素为单位 3
opacity number 折线的透明度（范围 0-1 之间） 0.5
lineStyle string 拆线的样式（solid 或 dashed） "solid"
fillColor string 返回多边形的填充颜色 #0000FF
fillOpacity number 设置多边形的填充透明度。当参数为 0 时，折线覆盖物将没有填充效果 0.2
事件
click {type,target,lnglat,containerPoint } 点击折线后会触发此事件
dblclick {type,target,lnglat,containerPoint } 双击折线后会触发此事件
mousedown {type,target,lnglat,containerPoint } 鼠标在折线上按下触发此事件
mouseup {type,target,lnglat,containerPoint } 鼠标在折线释放触发此事件
mouseout {type,target,lnglat,containerPoint } 鼠标离开折线时触发此事件
mouseover {type,target,lnglat,containerPoint } 当鼠标进入折线区域时会触发此事件
remove {type,target } 移除折线时触发Rectangle (矩形)
自定义属性
bounds LngLatBounds 矩形范围。 必传
color string "#0000FF" 矩形边线颜色
weight number 3 矩形边线的宽度，以像素为单位
opacity number 0.5 矩形边线的透明度（范围 0-1 之间）
fillColor String "#0000FF" 矩形填充颜色，当参数为空时，折线覆盖物将没有填充效果
fillOpacity number 0.2 矩形填充的透明度（范围 0-1 之间）
lineStyle string "solid" 矩形边线的样式（solid 或 dashed）
事件
click {type,target,lnglat,containerPoint } 点击矩形后会触发此事件
dblclick {type,target,lnglat,containerPoint } 双击矩形后会触发此事件
mousedown {type,target,lnglat,containerPoint } 鼠标在矩形上按下触发此事件
mouseup {type,target,lnglat,containerPoint } 鼠标在矩形释放触发此事件
mouseout {type,target,lnglat,containerPoint } 鼠标离开矩形时触发此事件
mouseover {type,target,lnglat,containerPoint } 当鼠标进入矩形区域时会触发此事件
remove {type,target } 移除矩形时触发Circle (圆)
自定义属性
center LngLat 圆心经纬度坐标 必传
radius number 圆的半径，以米点单位 必传
color string "#0000FF" 圆边线颜色
weight number 3 圆边线的宽度，以像素为单位
opacity number 0.5 圆边线的透明度（范围 0-1 之间）
fillColor String "#0000FF" 圆填充颜色,当参数为空时，折线覆盖物将没有填充效果
fillOpacity number 0.2 圆填充的透明度（范围 0-1 之间）
lineStyle string "solid" 圆边线的样式（solid 或 dashed）
事件
click {type,target,lnglat,containerPoint } 点击圆后会触发此事件
dblclick {type,target,lnglat,containerPoint } 双击圆后会触发此事件
mousedown {type,target,lnglat,containerPoint } 鼠标在圆上按下触发此事件
mouseup {type,target,lnglat,containerPoint } 鼠标在圆释放触发此事件
mouseout {type,target,lnglat,containerPoint } 鼠标离开圆时触发此事件
mouseover {type,target,lnglat,containerPoint } 当鼠标进入圆区域时会触发此事件
remove {type,target } 移除圆时触发图层类
TileLayer (自定义的地图图块层)
自定义属性
url string 图层的路径 必传
minZoom number 0 此图层的最低缩放级别
maxZoom number 18 此图层的最高缩放级别
errorTileUrl string "" 当没有瓦片时所显示的错误图片地址
opacity number 1.0 设置图层的透明度（0.0-1.0）默认值为 1.0 不透明
zIndex number null 图层的显示顺序
bounds LngLatBounds null 设置指定范围内显示瓦片
事件
loading {type, target} 当瓦片图层开始加载瓦片时触发
load {type, target} 当瓦片图层加载完可见瓦片后触发
tileloadstart {type, target, coords, tile } 瓦片请求和开始加载时触发
tileload {type, target, coords, tile } 在加载瓦片时触发
tileunload {type, target, coords, tile } 在瓦片被移除时触发（比如打开了 unloadInvisibleTiles）
tileerror {type, target, coords, tile } 瓦片错误时触发控件类
ControlZoom (地图缩放控件，可以缩放和移动地图)
自定义属性
position enum ControlPosition T_ANCHOR_TOP_RIGHT 控件初始位置，在四角位置之一
zoomInText string "+" 放大层级按钮的文字显示
zoomOutText string "-" 缩小层级按钮的文字显示
zoomInTitle string "放大" 放大层级按钮的标题显示
zoomOutTitle string "缩小" 缩小层级按钮的标题显示工具类
MarkTool (标注点位工具)
自定义属性
follow number false 标记图标是否跟随鼠标
iconUrl String "" 请求图标图片的 URL（脚本中的绝对或相对路径）
iconSize Point Point(25, 41) 图标可视区域的大小
iconAnchor Point Point(12, 41) 图标的定位锚点此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值
use boolean false 是否使用工具
事件
mouseup { type, target, currentLnglat,currentMarker, allMarkers } 在用户每完成一次标注时触发事件
参数说明：
currentLnglat:：用户在地图上标的坐标
currentMarker：用户当前的标注点对象
allMarkers：用户使用工具所有的标注点对象PolygonTool (多边形工具)
自定义属性
color string "#0000FF" 多边形边线颜色
weight number 3 多边形边线的宽度，以像素为单位
opacity number 0.5 多边形边线的透明度（范围 0-1 之间）
fillColor String "#0000FF" 多边形填充颜色当参数为空时，折线覆盖物将没有填充效果
fillOpacity number 0.2 多边形填充的透明度（范围 0-1 之间）
lineStyle string "solid" 多边形边线的样式（solid 或 dashed）
showLabel boolean false 是否显示面积，如果不显示面积，则可以作为画面控件使用，默认值为 true
use boolean false 是否使用工具
事件
draw {type,target,currentLnglats,currentArea,currentPolygon,allPolygons } 用户双击完成一次折线绘制时触发事件
参数说明：
currentLnglats：用户当前绘制的多边形的点坐标数组
currentArea：用户最后绘制的多边形的地理面积
currentPolygon：当前所画多边形的对象
allPolygons： 获取工具所有绘制的多边形
addpoint {type,target,currentLnglats,currentArea,currentPolygon,allPolygons } 用户在多边形绘制过程中，每次点击底图添加节点时触发事件
参数说明：
currentLnglats：最后绘制的多边形的顶点坐标数组
currentArea：用户最后绘制的折线的地理面积
currentPolygon：当前临时绘制的多边形
allPolygons:获取工具所有绘制的多边形PolylineTool (折线工具)
自定义属性
color string "#0000FF" 折线颜色
weight number 3 折线的宽度，以像素为单位
opacity number 0.5 折线的透明度（范围 0-1 之间）
lineStyle string "solid" 拆线的样式（solid 或 dashed）
showLabel boolean false 是否显示距离，如果不显示距离，则可以作为画线控件使用，默认值为 true（可选）
use boolean false 是否使用工具
事件
draw {type,target,currentLnglats,currentArea,currentPolygon,allPolygons } 用户双击完成一次折线绘制时触发事件
参数说明：
currentLnglats：用户当前绘制的多边形的点坐标数组
currentArea：用户最后绘制的多边形的地理面积
currentPolygon：当前所画多边形的对象
allPolygons： 获取工具所有绘制的多边形
addpoint {type,target,currentLnglats,currentArea,currentPolygon,allPolygons } 用户在多边形绘制过程中，每次点击底图添加节点时触发事件
参数说明：
currentLnglats：最后绘制的多边形的顶点坐标数组
currentArea：用户最后绘制的折线的地理面积
currentPolygon：当前临时绘制的多边形
allPolygons:获取工具所有绘制的多边形RectangleTool (矩形工具)
自定义属性
color string "#0000FF" 矩形边线颜色
weight number 3 矩形边线的宽度，以像素为单位
opacity number 0.5 矩形边线的透明度（范围 0-1 之间）
fillColor String "#0000FF" 矩形填充颜色，当参数为空时，折线覆盖物将没有填充效果
fillOpacity number 0.2 矩形填充的透明度（范围 0-1 之间）
lineStyle string "solid" 矩形边线的样式（solid 或 dashed）
use boolean false 是否使用工具
事件
draw {type,target,currentBounds,currentRectangle,allRectangles } 用户每次完成拉框操作时触发事件。
参数说明：
currentBounds：用户拉框选择的地理范围。
currentRectangle：用户绘制的矩形图形对象。
allRectangles：所有绘制的矩形对象。CircleTool (画圆工具)
自定义属性
color string "#0000FF" 圆边线颜色
weight number 3 圆边线的宽度，以像素为单位
opacity number 0.5 圆边线的透明度（范围 0-1 之间）
fillColor String "#0000FF" 圆填充颜色，当参数为空时，折线覆盖物将没有填充效果
fillOpacity number 0.2 圆填充的透明度（范围 0-1 之间）
lineStyle string "solid" 圆边线的样式（solid 或 dashed）
use boolean false 是否使用工具
事件
draw {type,target,currentCenter,currentRadius,currentCircle,allCircles } 用户拖动绘制圆时触发。
参数说明：
currentCenter：中心点的地理坐标。
currentRadius：半径，单位为米。
currentCircle：用户最后绘制的圆对象。
allCircles:用户所有绘制的圆对象。
drawend {type,target,currentCenter,currentRadius,currentCircle,allCircles } 用户完成绘制圆时触发。
参数说明：
currentCenter：中心点的地理坐标。
currentRadius：半径，单位为米。
currentCircle：用户最后绘制的圆对象。
allCircles:用户所有绘制的圆对象。菜单类
ContextMenu (右键菜单)
自定义属性
width number 120 指定此菜单项的宽度，菜单以最长的菜单项宽度为准。
items array
text string 菜单项显示的文字
callback Function 点击菜单时的回调函数(函数体，且函数内的 this 指向的是当前的组件)
'[["放大","this.map.zoomIn()"],["缩小","this.map.zoomOut()"]]'
事件
open {point,type,target } 右键菜单打开时触发事件，
参数说明：
point 表示菜单开启时的像素坐标点。
close {type,target } 右键菜单关闭时触发事件。组件类
MarkerClusterer (大量标注点,点位聚合)
自定义属性
markers array [] 要聚合的标注点数组
girdSize number 60 聚合计算时网格的像素大小，默认 60
maxZoom number 无穷大 最大的聚合级别，大于该级别就不进行聚合
styles string 无 聚集点的样式
例：
[{
"url":"http://api.tianditu.gov.cn/img/map/cluster/heart30.png",
"size":[30,26],
"textColor":"#000000",
"textSize":8,
"range":[0,50]
},{
"url":"http://api.tianditu.gov.cn/img/map/cluster/heart40.png",
"size":[42,36],
"textColor":"#ff0000",
"textSize":10,
"range":[50,400]
}]服务类
DrivingRoute (获取驾车路线规划方案) 天地图的路径规划接口太卡了，经常返回不了结果，所以改用高德地图的 Web API 接口，所以在小范围的路径规划路线可能与地图有小返回的偏差。
自定义属性
startlnglat LngLat 0,0 开始点
endlnglat LngLat 0,0 结束点
line boolean false 是否自动画线自定义功能组件(根据项目需求编写的组件)
placeSearch (地名搜索)数据从天地图的 WEB 地名搜索服务 API 获取
自定义属性
bounds string 115.7,39.4,117.4,41.6 搜索的范围
level string 12 查询的级别（参考天地图 WEB 服务 API 的地名搜索 V2.0）
queryType string 7 搜索类型4.Web Components 地图组件与用 API 创建组件的优缺点
优点：
1.减少代码量
2.可复用性，作为组件的优点 Web Components 地图组件同样可以减少代码重复
3.以 HTML 标签的形式创建组件对于开发人员来说有更高的可读性，符合逻辑，使用 API 创建组件一旦业务复杂代码的复杂程度上升不利于后续开发
4.可以根据项目配置主体组件。例如配置好 ICON 组件，配置固定的图标，偏移量；polyline 配置好折线的颜色，宽度，透明度，样式。需要传入的字段仅仅只有坐标就可以展示在地图上。
缺点：
1.兼容性不高，有些低版本的浏览器并不支持 Web Components
2.学习成本较高，如果需要对组件进行二次封装，或者对组件进行修改不仅仅要学习地图 API 还要学习 Web Components