hyMap api说明
配置项
options
series
style
data
方法
类方法
实例方法
1.配置项
1.1 options选项说明
options:
{
show: true, //地图的显示状态 true为显示 false 为不显示
roam: 'true', // true|false|drag(只拖拽)|scale(只缩放) 开启缩放、平移功能
center: [118.6277, 36.588921], //当前视角中心: [经度, 纬度]
zoom: 6, //当前地图缩放级别
scaleLimit: [3, 20], //滚轮缩放的级别范围
theme: 'http://192.168.1.201:8003/hyMapStyle/libs/customMap?types=d3',
token: 'pk.eyJ1Ijoid3V4aWFvcWlhbmciLCJhIjoiY2l2MHZ5eDY2MDA0dzJ5bjA0dTI0aTgxZyJ9.CLyrXBbCKxlSzB8CtCPZZA',
control:[] //添加控件 字符串或者对象 'ViewControl' | 'DrawControl' | 'LayerControl' | 'MapMeasureControl' | 'NavigationControl' | {type: 'NavigationControl',position: 'top-right'}
}
1.2 series选项说明
series:[{
id: 2,
data: values,
type: 'symbol', // 'symbol'|'heatmap'|'line'|'clusters'|'video'|'fill'|'echarts'|'circle'
visible: true,
symbolStyle: {
normal: {
style
},
emphasis: {
style
}
},
showPopup: false //显示气泡框
}];
1.3 data数据格式说明
data:[
object:{
id:id，//数据唯一标识。必须
geoCoord:[x,y]//经纬度坐标 必须
name:'name' //名称
value:'23213' //值 必须。
}
]
1.4 style样式格式说明
1.4.1 serie的type类型为'symbol'时
style:{
'visibility':'visible',
'symbol-placement':'point',
'icon-allow-overlap':false,
'icon-ignore-placement':true,
'icon-optional':false,
'icon-size':1,
'icon-text-fit':'none',
'icon-image':'poi',
'icon-rotate':0,
'icon-padding':0,
'icon-offset':[0,0],
'icon-anchor':'center',
'text-field':'',
'text-font':['Open Sans Regular','Arial Unicode MS Regular'],
'text-size':16,
'text-max-width':10,
'text-line-height':1.2,
'text-letter-spacing':0,
'text-anchor':'center',
'text-max-angle':45,
'text-rotate':0,
'text-padding':0,
'text-keep-upright':true,
'text-transform':'none',
'text-offset':[0,0],
'text-allow-overlap':false,
'text-ignore-placement':false,
'text-optional':false,
//paint
'icon-opacity':1,
// 'icon-color': '#000'
'text-color': '#fff',
'text-opacity': 1,
'text-halo-color':'rgba(0, 0, 0, 0)',
'text-halo-width': 0
}
1.4.2 serie的type类型为'heatmap'时
style:{
'visibility':'visible',
'heatmap-radius':30,
'heatmap-weight':1,
'heatmap-intensity':1,
'heatmap-color':['interpolate',['linear'],['heatmap-density'],
0,'rgba(0, 0, 255, 0)',
0.1,'royalblue',
0.3,'cyan',
0.5,'lime',
0.7,'yellow',
1,'red'],
'heatmap-opacity':1
}
1.4.3 serie的type类型为'clusters'时
style:{
'visibility': 'visible',
'circle-color': {
stops: [
[0, '#51bbd6'], //数量为0到100时候圆的颜色
[100, '#f1f075'], //数量为100到750时候圆的颜色
[750, '#f28cb1'] //数量为750以上时候圆的颜色
]
},
'circle-radius': {
stops: [
[0, 20], //数量为0到20时候的圆的半径
[100, 30],
[750, 40]
]
},
'unclustered-point': { //未聚合的单独点的样式
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
},
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], //字体样式
'text-size': 12 //字体大小
}
1.4.4 serie的type类型为'circle'时
style:{
'visibility':'visible',
'circle-radius': 0, //半径
'circle-blur': 0, //
'circle-opacity': 1,
'circle-color': '#000000',
'circle-translate': [0, 0],
'circle-stroke-width': 0,
'circle-stroke-color': '#000000',
'circle-stroke-opacity': 1
}
1.4.5 serie的type类型为'fill'时
style:{
'visibility': 'visible',
'fill-outline-color': '#6b38ed', //边框颜色
'fill-color': '#1cedd6',
'fill-opacity': 1 //透明度,
}
1.4.6 serie的type类型为'line'时
style:{
'visibility': 'visible',
'line-cap': 'round',
'line-join': 'miter',
'line-miter-limit': 2,
'line-round-limit': 1.05,
'line-opacity': 1,
'line-color': '#ccc',
'line-translate': [0, 0],
'line-width': 1,
'line-gap-width': 0,
'line-offset': 0,
'line-blur': 0,
'line-dasharray': [1]
}
1.4.7 serie的type类型为'video'时
style:{
'raster-opacity':0.8, //透明度
'raster-hue-rotate':30, //色调
'raster-brightness-min':0.1, //亮度
'raster-brightness-max':0.8
}
2.方法
2.2 实例方法
- 注册事件
eventName:''click'|'unClick'|'contexmenu'|'tooltipclick'|'mouseover'|'drawStart'
fun1:instance.on(eventName, handler)
eg:on('click', fn)| on('click', (param, event) => {
console.log(param)
}) | on('mouseover', fn) | on('zoom', fn)
fun2:instance.on(eventName, layerID,handler)
eg:map.on('click','layerID',(param) => {
console.log(param)
})
绑定对地图区域点击 地图上元素的点击