## react地图Map组件文档
#### https支持
==注: 天地图,arcgis类型地图的插件js,如果也需要是https,就需要当前页面的请求模式也是https的.
地图的插件,是由地图api初始化时,异步引入的,通过当前页面的document.location.protocol做了https的判断==
```
https的配置方式:(仅供参考)
将如下代码,放入根目录的html中
window.VtxPublicServiceAddress = {
//地图api地址的http方式
httpOrhttps: 'https',
//地图服务地址ip
mapServerURL: 'https://vortexplugin.cloudhw.cn/mapplugin',
//arcgis地图服务ip
arcgisServerURL: 'https://vortexplugin.cloudhw.cn/gis',
};
```
**注:react组件创建地图时会在window中添加VtxMap对象.**
VtxMap对象中通过mapId储存了map对象.
例:
可以通过window.VtxMap[mapId]来获取对应的map对象.
使用天地图的人注意:天地图api的一些问题.使用如测距,添加点/线/面/圆等功能时.全局中有一个map对象.请不要冲突.(必须设置在全局,不然功能报错!)
### 1.0地图创建和介绍（）
调用地图组件后,组件会根据传入的mapId自动创建地图,需注意的是,同一个页面的多个地图的mapId不可以一样.
地图默认使用百度，如需切换高德或天地图，设置字段mapType=‘amap’或者mapType=‘tmap’即可；
如果需要使用ref函数取得地图实例，请用getMapInstance函数代替。
| 参数 | 描述| 是否必填 | 取值范围，格式| 默认|
|--|---|--|---|--|
| mapId| 地图唯一标识符| 必填 | string| \--|
| mapStyle| 地图样式| 非必填 | 各地图自定义样式参数见mapStyle示例 | \--|
| coverageType| 使用矢量图或卫星图| 非必填| string:'wx'/'sl'(默认不填就是矢量图)| -- |
| wkid| 坐标系编号 与mapServer的wkid| 必填| string/number| 4326 |
| mapType| 地图类型| 必填| string
**bmap 百度地图
amap 高德地图
tmap 天地图
gmap arcgis地图**| bmap|
| mapServer | 只有arcgis需要 gis服务 现在支持wmts和gis | 必填| Object
**详见mapServer示例** | 浙江wmts地图服务 |
>**mapStyle**
```
**百度地图自定义样式2种:**
参考地址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom
1.百度提供的(String)
mapStyle: ''
参考参数:
默认地图样式(normal),清新蓝风格(light),自然绿风格(grassgreen)
黑夜风格(dark),红色警戒风格(redalert),精简风格(googlelite)
午夜蓝风格(midnight),浪漫粉风格(pink),青春绿风格(darkgreen)
清新蓝绿风格(bluish),高端灰风格(grayscale),强边界风格(hardedge)
2.自定义的(Array[Object])
mapStyle: [{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'visibility': 'on',
'color': '#ffffffff'
}
}]
**高德地图自定义样式2种:**
参考地址:https://lbs.amap.com/api/javascript-api/guide/map/map-style/
1.高德提供的(String)
mapStyle: 'amap://styles/参数'
参考参数:
标准(normal),马卡龙(macaron),涂鸦(graffiti)
远山黛(whitesmoke),幻影黑(dark),草色青(fresh),
极夜蓝(darkblue),靛青蓝(blue),月光银(light),雅士灰(grey)
2.自定义的
mapStyle: 'amap://styles/地图样式ID'
**天地图**
天地图提供
mapStyle: ''
参考参数: black,indigo
```
>**mapServer示例**
```
{
services:[
{
type: 'wmts',//服务类型'gis','wmts'
url: []//服务地址,即地图图层
//以下3个字段，会有提供
tilematrixset: '',
format: '',
layer: [],
gisServer: '',//在type是gis的时候有效,可选如下4种类型 ArcGISDynamicMapServiceLayer ArcGISImageServiceLayer ArcGISImageServiceVectorLayer ArcGISTiledMapServiceLayer
} ],
origin: {x:-180, y:90},//底图初始点位
wkid: '',//地图坐标唯一编号 对照表地址:https://www.cnblogs.com/liweis/p/5951032.html
fullExtent: { xmin,ymin,xmax,ymax },//地图最大经纬度区间
initialExtent: { xmin,ymin,xmax,ymax },//地图初始化经纬度区间
defaultType: '2D',//地图展示类型(未用,写死)
switchTypeArrays: ['2D','satellite'],//地图可切换的类型(未用,写死)
//lods的level必须从0开始,哪怕没有这个层级,避免zoom出错. }
lods: [
{
level: 0,//地图zoom等级
resolution: 111,//分辨率
scale: 11,//缩放比例
},
...
]
```
### 1.0.1地图-地面图片图层添加(imageOverlays)
说明: 地面图层参数为数组/对象,具体参数如下:
==注:只有天地图,百度,高德地图支持,arcgis需要使用其他方式实现==
参数 | 描述 | 是否必填 | 取值范围，格式 | 默认
---|---|---|---|---
ne | 左上角经纬度 | 是 | Array[number,number]/经纬度,如[120,30] | --
sw | 右下角经纬度 | 是 | Array[number,number]/经纬度,如[120,30] | --
opacity | 图片透明度 | 否 | number/0-1 | 1
displayOnMinLevel | 最小展示zoom等级 | 否 | number/根据地图类型取值 | 2/3
displayOnMaxLevel | 最大展示zoom等级 | 否 | number/根据地图类型取值 | 18/19
url | 图片地址 | 是 | 'http://xxx' | --
---
### 1.1添加/删除/更新点（mapPoints）
#### 说明
操作mapPoints的数据,组件会自己匹配删除,刷新,新增的操作.
例1.删除点,删除mapPoints中的数据即可
例2.刷新点,刷新mapPoints中的数据即可
例3.新增点,mapPoint中存在原本没有的id数据时,会自动添加新的点
mapPoints
格式:Arrary[object]
包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|---------------|------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
| id | Id唯一标识 | 必填 | string | --|
| longitude | 经度 | 必填 | Float/string | --|
| latitude | 纬度 | 必填 | Float/string | --|
| url | 图标url | 非必填 | string | --|
| canShowLabel | 是否显示下标 | 非必填 | true/false
==注:该参数的显隐只在首次加点时有效,后期的改动无效(类似于default)== 建议:当有需求显隐切换效果时,使用切换labelClass来实现效果. | false |
| labelClass | 使用label时,自定义label样式 | 非必填 | String
例:'classA classB classC,'
==注:使用该参数时,canShowLabel需要为true,否则无效果==（olMap无效） | 'label-content' |
| config | 样式信息，图标大小等 | 非必填 |**详见mapPoints-config示例** |--| 'label-content' |
|markerContent | 点样式 跟url冲突,存在markerContent时,url不展示 | 非必填 | HTMLDOM | -- |
>**mapPoints-config示例**
```
{
width: number,//图标宽 默认30,
height: number,//图标高 默认30,
zIndex: number,//数字,设置点的层级,在非markerContent加点时有效
labelContent: string,//下标文字
labelPixelX: number,//x,轴下标偏移量
labelPixelY: number,//y,轴下标偏移量
markerContentX: number,//x,点偏移量
markerContentY: number,//y,点偏移量
//备注:1.设置偏移量必须设置宽/高
//下面3个参数,在图标点时有效, markerContent时无效.
deg: number,//设置点的旋转角度,数字number就行
isAnimation: bealoon,//Bealoon,true时会有动画效果(react版支持)
animationDelay: number,//设置动画效果的执行时间,如3(number) (react版支持)
autoRotation: bealoon,//设置移动动画时,是否自动旋转角度.(true:旋转,false:不旋转) 默认不旋转.
BAnimationType: number,//设置点位百度自带动画.天地图没有动画和旋转效果 0:跳动 1:坠落 注:这个字段在markerContent时无效
labelStyle: {
font: '14px 微软雅黑 bold', //字体
fill: '#FFFFFF', //文字颜色
backgroundFill: '#FF00FF', //背景色
...
},// 设置下标样式（仅对olMap有效），更多属性参考：
[Openlayer](https://openlayers.org/en/v6.15.1/apidoc/module-ol_style_Text-Text.html)
}
```
### 1.2添加/删除/更新线（mapLines）
#### 说明
操作mapLines的数据,组件会自己匹配删除,刷新,新增的操作.
例1.删除点,删除mapLines中的数据即可
例2.刷新点,刷新mapLines中的数据即可
例3.新增点,mapLines中存在原本没有的id数据时,会自动添加新的点
==google地图虚线支持不佳==
mapLines
格式:Arrary[object]
包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------|----------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| id | Id唯一标识 | 必填 | string |-- |
| paths | 经纬度数组 至少2个点 | 必填 | Float
例: [[117.468021,38.890092],[119.468021,36.890092]] | -- |
| config | 样式信息 | 非必填 | **详见mapLines-config示例**| -- |
>**mapLines-config示例**
```
{
config : {
lineType : string,//线类型（实线solid，虚线dashed）默认实线solid
lineWidth : number,//线宽, 默认5
color : string,//线颜色, 默认[]
pellucidity : number,//线透明度(0-1), 默认1
isHidden: bealoon,//是否显示线false:线展示true:线隐藏
}
}
```
### 1.3添加/删除/更新面（mapPolygons）
#### 说明
操作mapPolygons的数据,组件会自己匹配删除,刷新,新增的操作.
例1.删除点,删除mapPolygons中的数据即可
例2.刷新点,刷新mapPolygons中的数据即可
例3.新增点,mapPolygons中存在原本没有的id数据时,会自动添加新的点
==google地图 多边形边线不支持虚线==
mapPolygons
格式:Arrary[object]
包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------|----------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| id | Id唯一标识 | 必填 | string | -- |
| rings | 经纬度数组 至少3个点 | 必填 | Float
例: [[119.468021,38.890092],[116.468021,39.890092],[114.468021,37.890092]] | -- |
| config | 样式信息 | 非必填 | **mapPolygons-config示例** | -- |
>**mapPolygons-config示例**
```
{
lineType: string,线类型（实线solid，虚线dashed）默认实线solid
lineWidth: number,线宽, 默认5
color: string,填充颜色, 默认[]
pellucidity: number,填充透明度(0-1), 默认1
lineColor: string,线颜色, 默认''
lineOpacity: number,线透明度, 默认1
}
```
### 1.3添加/删除/更新圆（mapCircles）
#### 说明
操作mapCircles的数据,组件会自己匹配删除,刷新,新增的操作.
例1.删除点,删除mapCircles中的数据即可
例2.刷新点,刷新mapCircles中的数据即可
例3.新增点,mapCircles中存在原本没有的id数据时,会自动添加新的点
mapCircles
格式:Arrary[object]
包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------|------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| id | Id唯一标识 | 必填 | string | -- |
| longitude | 经度 | 必填 | Float | -- |
| latitude | 纬度 | 必填 | Float | -- |
| radius | 半径, 单位是m/米默认50 | 必填 | Float | -- |
| config | 样式信息 | 非必填 | **mapCircles-config示例** | -- |
>**mapCircles-config示例**
```
{
lineType: string,线类型（实线solid，虚线dashed）默认实线solid
lineWidth: number,线宽, 默认5
color: string,填充颜色, 默认'\#FFF'
pellucidity: number,填充透明度(0-1), 默认1
lineColor: string,线颜色, 默认''
lineOpacity: number,线透明度, 默认1
}
```
---
### 1.4清除全部图元(isClearAll)
#### 说明
**==因为清除所有图元的方法和(点圆面线)的数据传入冲突,所以要想清空地图图元的同时,需要清空传入的(点圆面线)的数据;不然会渲染异常.==**
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|------------|--------------|----------|----------------|------|
| isClearAll | 是否清空地图
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | -- |
### 1.5设置中心点(mapCenter,setCenter)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------|---------------------------|----------|------------------------------|------|
| mapCenter | 中心位置 [经度,纬度] | 必填 | Array [117.468021,38.890092] | -- |
| setCenter | 设为true时,设置中心才生效
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | -- |
### 1.6将指定图元id展示在视野内(mapVisiblePoints,setVisiblePoints)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|------------------|---------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| mapVisiblePoints | 将指定图元id展示在视野内 | 必填 | Object
**详见mapVisiblePoints示例** | -- |
| setVisiblePoints | 设为true时,设置展示才生效
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon| -- |
>**详见mapVisiblePoints示例**
```
{
fitView: string,
type: string
}
fitView:
1.'point'展示所有点
2.'line'展示所有线
3.'polygon'展示所有面
4.'circle'展示所有圆
*1-4的方式(只适合于已经在地图上展示的图元,新加的图元需要聚焦,则需要使用第5种方式自己传入id集合)
5.String/Array,需要展示的id集合,可以是','区分的String,也可以是的Array
type: (高德地图只有all类型)
1.center:只设置最佳中心点
2.zoom:只设置最佳zoom
3.all:设置最佳展示
```
### 1.7聚合点(mapCluster,setCluster)
#### 说明
聚合只能聚合点,所以传id时要注意只能传点的id,传其他图元的id会报错.
==注:点位animation动画效果也聚合冲突.(所以含有动画效果的点会在聚合时被过滤)==
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|------------|---------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------|------|
| mapCluster | 聚合点 | 必填 | 1.''自动聚合所有点
2.String/Array,需要聚合的id集合,可以是','区分的String,也可以是的Array
==注:天地图的点聚合有限制.只能聚合没有下标的url点位.其他都不行== | -- |
| setCluster | 设为true时,设置展示才生效
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | -- |
### 1.8设置比例尺(mapZoomLevel,setZoomLevel)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------------|-----------------------------|----------|----------------|------|
| mapZoomLevel | 设置地图比例尺 | 必填 | Number | -- |
| setZoomLevel | 设为true时,设置聚合点才生效
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | -- |
### 1.9测距工具(mapRangingTool,isRangingTool)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|----------------|---------------------------------|----------|----------------|------|
| mapRangingTool | 测距后的回调方法 | 非必填 | Function(obj) | -- |
| isRangingTool | 设为true时,测距工具会被调用一次
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | -- |
### 2.0图元编辑(editGraphicId,editGraphicChange)
#### 说明
**天地图的markerContent创建点的图元没有编辑功能**
**天地图的编辑回调只有在执行了切换编辑或关闭编辑时才执行（天地图没有监听的api）**
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------------|--------------------------------------------------------------------|----------|----------------|-------|
| isDoEdit | 是否开启编辑图元
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |
| isEndEdit | 是否关闭编辑图元
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |
| editGraphicId | 需要编辑的图元id; | 必填 | String | -- |
| editGraphicChange | 每次编辑后的回调,想保存编辑后的图元样式就替换原来的数据.不然会还原 | 必填 | Function(obj) | -- |
---
### 2.1移入图元或移出图元事件(mouseOverGraphic,mouseOutGraphic)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|------------------|--------------|----------|----------------|------|
| mouseOverGraphic | 移入图元事件 | 必填 | Function(obj) | -- |
| mouseOutGraphic | 移出图元事件 | 必填 | Function(obj) | -- |
### 2.2图元点击事件(clickGraphic)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------------|--------------|----------|----------------|------|
| clickGraphic | 图元点击事件 | 必填 | Function(obj) | -- |
### 2.3地图拖拽事件 (dragMapStart, dragMapEnd)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------------|------------|----------|----------------|------|
| dragMapStart | 拖拽开始时 | 必填 | Function(obj) | -- |
| dragMapEnd | 拖拽结束后 | 必填 | Function(obj) | -- |
### 2.4绘制边界线 (boundaryName)[百度/高德的数据]
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------------|------------------------|----------|---------------------------------------|------|
| boundaryName | 需要绘制边界线的关键字 | 必填 | Array[String]
例如:['相城区','姑苏区'] | -- |
### 2.5地图缩放事件(zoomStart,zoomEnd)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------|------------|----------|----------------|------|
| zoomStart | 缩放开始时 | 必填 | Function(obj) | -- |
| zoomEnd | 缩放开始时 | 必填 | Function(obj) | -- |
### 2.5图元绘制事件(mapDraw, isDraw, drawEnd)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------|------------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------|
| isDraw | 控制是否绘制图元
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |
| drawEnd | 绘制图元结束后回调 | 必填 | Function(obj) | -- |
| mapDraw | 绘制图元前需传的参数 | 必填 | **详见mapDraw示例**| -- |
| isCloseDraw | 控制是否手动关闭图元绘制功能
**(使用前后不一致的随机数也可以)** | 选填 | Bealoon | false |
>**mapDraw示例**
```
{
geometryType: 'circle',
parameter: {},
data: {id:id }
}
注释:
1.geometryType:表示绘制的图元类型 point/polyline/polygon/circle/rectangle 点/线/面/圆/矩形
2. parameter绘制图元样式的参数:
point对应{
url: //绘制点的样式图片地址,
width://绘制点的图片宽,
height://绘制点的图片高
markerContentX x,点偏移量
markerContentY y,点偏移量
}
polyline对应{
color://线颜色,
pellucidity://线透明度,
lineWidth://线宽度
lineType : 线类型（实线solid，虚线dashed）默认实线solid
}
polygo/circle/rectangle对应{
color://填充色,
lineColor://线颜色,
lineOpacity://线透明度,
lineWidth://线宽度,
pellucidity://填充透明度
lineType : 线类型（实线solid，虚线dashed）默认实线solid
}
3. data存放绘制的图元的id (不能与其他图元重复)
设置了固定id,每次绘制图元会将上次同id的图元删除,
不设置id的情况下,id是随机生成的,不会清除上次绘制的图元.
```
---
### 2.6设置比例尺 (showControl)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------|----------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| showControl | 设置比例尺参数 | 必填 | Object
**详见showControl** | -- |
>**详见showControl**
```
{
location: string,//位置 tl:左上 bl:左下 tr:右上 br:右下
type: string,//比例尺类型 all:所有功能都存着的比例尺 small: 只有横移和加减的比例尺 pan:只有横移的比例尺zoom:只有加减的比例尺
null:只显示比例尺,无比例尺功能 注:高德地图中 small和pan是一样的效果
天地图中all 和small和 pan 和zoom 都一样只有加减的比例尺功能
}
```
### 2.7根据id显示隐藏的图元 (showGraphicById) [废弃,用ref调用,天地图没有该功能]
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------------|----------------|----------|----------------|------|
| showGraphicById | 显示图元的方法 | 必填 | Function(id) | -- |
### 2.8根据id隐藏图元 (hideGraphicById) [废弃,用ref调用,天地图没有该功能]
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------------|----------------|----------|----------------|------|
| hideGraphicById | 隐藏图元的方法 | 必填 | Function(id) | -- |
==注:同时设置最大和最小比例尺时,最大比例尺的值一定要大于最小比例尺.否则设置无效==
### 2.9设置地图最大展示比例尺 (maxZoom)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|---------|------------------------|----------|----------------|------|
| maxZoom | 设置地图最大展示比例尺 | 必填 | Number (3-19) | -- |
### 3.0设置地图最小展示比例尺 (minZoom)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|---------|------------------------|----------|----------------|------|
| minZoom | 设置地图最小展示比例尺 | 必填 | Number (3-19) | -- |
### 3.1地图移动事件(moveStart,moveEnd)
#### 说明
1.使用方式跟dragMapEnd一样,区别在于,moveEnd事件是地图移动完后出发.
dragMapEnd事件是在松掉鼠标时触发.
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------|------------|----------|----------------|------|
| moveStart | 缩放开始时 | 必填 | Function(obj) | -- |
| moveEnd | 缩放开始时 | 必填 | Function(obj) | -- |
### 3.2添加/删除/更新边界线（customizedBoundary）
#### 说明
边界线,是环卫一张图特殊需求.
具体使用方式跟mapLines一样.
区别在于.区分边界线和正常线.便于其他线修改和边界线修改之间,没有冲突.
customizedBoundary包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------|----------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| id | Id唯一标识 | 必填 | string | -- |
| paths | 经纬度数组 至少2个点 | 必填 | Float
例: [[117.468021,38.890092],[119.468021,36.890092]] | -- |
| config | 样式信息 | 非必填 | **详见customizedBoundary-config示例**| -- |
>**customizedBoundary-config示例**
```
config : {
lineType: string,//线类型（实线solid，虚线dashed）默认实线solid
lineWidth: number,//线宽, 默认5
color: string,//线颜色, 默认[]
pellucidity: number,//线透明度(0-1), 默认1
isHidden: bealoon,//是否显示线 true:线展示 false:线隐藏
}
```
### 3.3开关地图路况(isOpenTrafficInfo)
#### 说明.
百度,高德地图有该功能,天地图没有对应的api功能.
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------------|--------------|----------|------------------------------------|-------|
| isOpenTrafficInfo | 是否展示路况 | 必填 | Bealoon
true:展示路况
false:关闭展示 | False |
### 3.4添加/删除/更新海量点（mapPointCollection）
#### 说明
注:高德海量点与百度海量点区别很大,所以暂时没有封装,遇到点数太多加载过慢的情况,可以使用zoomMap.js/optimizingPointMap.js这2个优化性能的组件.
操作mapPointCollection的数据,组件会自己匹配删除,刷新,新增的操作.
例1.删除点,删除mapPointCollection中的数据即可
例2.刷新点,刷新mapPointCollection中的数据即可
例3.新增点,mapPointCollection中存在原本没有的id数据时,会自动添加新的点
mapPointCollection
格式:Arrary[object]
包含的属性：
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|--------|-------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|
| id | Id唯一标识 | 必填 | string | -- |
| points | 经纬度对象数组 | 必填 | Array[Object]
例: [{lng:120,lat:30}]
==注:想要保存的数据可以放在对象中.点击事件会返回== | -- |
| shape | 样式信息(固定的5个样式) | 非必填 | String
例:(只能填如下5个)
circle圆形
star星形
square方形
rhombus菱形
waterrdrop水滴状，该类型无size和color属性 | 'circle' |
| size | 样式信息{固定的7个大小} | 非必填 | String
例:(只能填如下7个)
tiny宽高为2px\*2px
smaller宽高为4px\*4px
small宽高为8px\*8px
normal宽高为10px\*10px
big宽高为16px\*16px
bigger宽高为20px\*20px
huge宽高为30px\*30px | 'normal' |
| color | 样式信息 | 非必填 | String
例:'\#d340c3' | '\#d340c3' |
### 3.5清除所有海量点功能(clearAllPointCollection)
正常可以不使用,将mapPointCollection清空就可以删除所有海量点
#### 说明.
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------------------|----------------|----------|----------------|-------|
| clearAllPointCollection | 清除所有海量点
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | False |
### 3.6海量点点击事件(clickPointCollection)
#### 说明.
==注: 高德 arcgis海量点是自己实现的,由于dom层级原因,没有实现click事件.==
==有用到切换地图的,使用海量点请不要使用点击事件....这个解决不了!!!!==
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|----------------------|----------------|----------|----------------|------|
| clickPointCollection | 海量点点击事件 | 必填 | Function(obj) | \-- |
### 3.7绘制热力图(heatMapData)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-------------|------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|
| heatMapData | 绘制热力图的数据 | 必填 | **详见heatMapData示例**| -- |
>**heatMapData示例**
```
{
data: [
{
"lng":120.173004,//lng 经度
"lat":30.280188,//lat 纬度
"count":50//count 权重值
}
],
config: {
radius: 20 //热力图半径,默认20
visible: Bealoon,//控制热力图显隐,默认true
max: 100, //最大权重值默认100
//渐变区间(ui没有定就不要设置该字段)
gradient: {
0:'rgb(102,255, 0)',
.5:'rgb(255,170,0)',
1:'\#FF33FF'
},
opacity: number, //透明度0-1
}
}
```
### 3.8删除指定图元(mapRemove,isRemove)
#### 说明
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|-----------|----------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------|
| mapRemove | 删除图元的标识 | 必填 | Array[Object]
**详见mapRemove示例**| -- |
| isRemove | 是否删除的控制
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |
>**详见mapRemove示例**
```
[
{id: 'p00',type:'point'},
{id:'xxx',type:'draw'}
]
注:id是要删除图元的id
type:分为draw/point/line/polygon/circle
draw代表该图元是绘制出来的,其他的参数代表的是正常渲染的图元.
```
### 3.9地图点击事件(clickMap)
#### 说明.
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|----------|--------------|----------|----------------|------|
| clickMap | 地图点击事件 | 必填 | Function(obj) | \-- |
### 4.0地图区域限制(areaRestriction,isSetAreaRestriction,isClearAreaRestriction)
#### 说明.
google地图 只能初始设置,并且无法取消
| 参数 | 描述 | 是否必填 | 取值范围，格式 | 默认 |
|------------------------|--------------------------------------------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------|-------|
| areaRestriction | 限制区域的sw(西南)和ne(东北) 注:设置经纬度时要注意方位完全对应,对应出错,效果会出问题 | 必填 | Array[sw[],ne[]] 例:
百度:[[115.377628,38.082111],[118.909909,39.50744]]
高德:[[115.345746,39.488275],[117.455121,40.322595]] | -- |
| isSetAreaRestriction | 是否设置区域限制
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |
| isClearAreaRestriction | 是否关闭区域限制
**(使用前后不一致的随机数也可以)** | 必填 | Bealoon | false |