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>   

在线试一试

这篇文章对您解决问题是否有帮助?

已解决
未解决