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

方法

方法名 返回值 说明
show() None 显示区域图
hide() None 隐藏区域图
destroy() None 删除区域图
setData(data: Array.< AreaData >) None 设置区域图的数据(建议数据量不超过1万)
setStylePicker(style: Function) None 设置区域图的样式映射函数
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 设置区域样式

实例

本示例中,介绍如何创建区域图,并进行数据及参数的设置和修改。

JavaScript+HTML
<!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>