qq.maps.visualization.Area 类
Area 是用于创建区域图的类，继承自 qq.map.Overlay。
构造函数
语法：new qq.maps.visualization.Area(options);
参数：options: { AreaOptions }（必填）区域图参数。其属性如下表
AreaOptions 说明：
| 名称 |
类型 |
说明 |
| map |
Map |
（必填）显示区域图的地图 |
| stylePicker |
Function |
样式映射函数，参数为AreaData，要求返回值符合AreaStyle对象格式 |
| onClick |
Function |
点击回调函数，参数为AreaEvent |
| onMouseOver |
Function |
鼠标移入回调函数，参数为AreaEvent |
| onMouseOut |
Function |
鼠标移出回调函数，参数为AreaEvent |
| zIndex |
Number |
图层的层叠顺序，数字从小到大对应层叠顺序从下至上，默认为0 |
方法
| 方法名 |
返回值 |
说明 |
| show() |
None |
显示区域图 |
| hide() |
None |
隐藏区域图 |
| destroy() |
None |
删除区域图 |
| setData(data: Array.< AreaData >) |
None |
设置区域图的数据（建议数据量不超过1万） |
| setStylePicker(style: Function) |
None |
设置区域图的样式映射函数 |
| setZIndex(zIndex: Number) |
None |
设置图层的层叠顺序 |
| getZIndex() |
Number |
获取图层的层叠顺序 |
| rerender() |
None |
更新显示图形 |
AreaData 说明：
| 名称 |
类型 |
说明 |
| coords |
Array.< Number > |
区域边界坐标数组，按照[lat0, lng0, lat1, lng1, …]的格式 |
| attributes |
* |
区域附加属性，会加入到AreaPolygon |
AreaStyle 说明：
| 名称 |
类型 |
说明 |
| fillColor |
Color |
填充颜色 |
| strokeColor |
Color |
边线颜色 |
| strokeWidth |
Number |
边线宽度 |
AreaEvent 说明：
| 名称 |
类型 |
说明 |
| target |
AreaPolygon |
事件发生时鼠标所在区域，若不属于任何区域，则返回null |
| latLng |
LatLng |
事件发生时鼠标所在位置经纬度 |
| pixel |
Point |
事件发生时鼠标所在位置像素坐标 |
AreaPolygon 说明：
| 名称 |
类型 |
说明 |
| coords |
Array.< Number > |
区域边界坐标数组 |
| attributes |
* |
区域的附加属性 |
| style |
AreaStyle |
区域的样式 |
| setStyle(style: AreaStyle) |
Function |
设置区域样式 |
实例
本示例中，介绍如何创建区域图，并进行数据及参数的设置和修改。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>区域图示例</title>
<style type="text/css">
html, body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
width: 100%;
height: 90%;
}
button {
width: 100px;
border: 1px solid #555;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script charset="utf-8" src="https://3gimg.qq.com/lightmap/jsapi_testDemo/vplugin/data/areadata.js"></script>
<script>
window.onload = function() {
var data = areadata;
var map = new qq.maps.Map(document.getElementById("container"), {
zoom: 4,
center: new qq.maps.LatLng(36.212827, 108.559044)
});
//hover时polygon的style
var activedStyle = {
lineWidth: 0.5,
lineColor: 'rgba(255,255,255, .5)',
fillColor: 'rgba(255, 255, 0, .8)'
};
//设置当前hover的polygon的颜色
function setNew(polygon){
polygon._originalStyle = polygon.style;
polygon.setStyle(activedStyle);
}
//还原上一个hover的polygon的颜色
function resetOld(polygon){
polygon.setStyle(polygon._originalStyle);
delete polygon._originalStyle;
}
//创建可视化对象
var area = new qq.maps.visualization.Area({
map: map,
stylePicker: function(shapeData){
return {
strokeWidth: 1,
strokeColor: 'rgba(0, 0, 0, .5)',
fillColor: 'rgba(255, 0, 0, .6)',
}
},
onMouseOver: function(e){
if(e.target) {
setNew(e.target);
area.rerender();
}
},
onMouseOut: function(e) {
if(e.target) {
resetOld(e.target);
area.rerender();
}
}
});
//设置数据，更改数据时也用这个接口
area.setData(data);
// 监听button事件，更改区域图配置参数
document.getElementById("setOptions").addEventListener("click", function(e) {
var target = e.target;
switch (target.id) {
case "show":
if (area.visible) {
area.hide();
} else {
area.show();
}
break;
case "data":
area.setData(data.slice(0, 10));
break;
case "stylePicker":
area.setStylePicker(function(areaData) {
var color = `rgba(255, ${Math.floor(100 * (1 - areaData.count / 70))}, 0, ${areaData.count / 70})`;
return {
fillColor: color
};
});
break;
case "destroy":
area.destroy();
}
});
}
</script>
</head>
<body>
<div id="container"></div>
<div id="setOptions">
<button id="show">显示/隐藏</button>
<button id="data">更新数据</button>
<button id="stylePicker">改变样式</button>
<button id="destroy">删除对象</button>
</div>
</body>
</html>
在线试一试