GeoHey API系列：DataViz API

GeoHey提供了数据上图App来对数据进行可视化。那如果想在自己的App中对数据进行可视化展示，怎么办呢？用GeoHey DataViz API来实现！

第一步：加载一张底图

使用GeoHey JavaScript SDK加载一张在线地图，如以下代码：

G.ready(function() {
	map = new G.Map('mapContainer', {
		maxExtent: [-2e7, -2e7, 2e7, 2e7]
	});
	tileLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		cluster: ['a', 'b', 'c']
	});
	tileLayer.addTo(map);
});

具体可参考博文使用 GeoHey JavaScript SDK 显示地图。

第二步：编写配置参数

在GeoHey平台选择数据，以JSON格式编写配置参数，如下参数表示把两个用户数据配置成单值渲染和单色渲染的可视化效果，其中点数据显示文本标注：

[
    {
        "dataUid": "74f3b27765c14185abd0411347b127b5",
        "dataType": "private",
        "vizConfig": {
            "type": "polygon-category",
            "fillOpacity": 0.8,
            "outlineColor": "#ffffff",
            "outlineWidth": 1,
            "outlineOpacity": 0.8,
            "fieldName": "fid",
            "buckets": [
                {
                    "value": 33,
                    "color": "#c00000"
                },
                {
                    "value": 32,
                    "color": "#ca1d00"
                },
                ......
                {
                    "value": 2,
                    "color": "#009d72"
                },
                {
                    "value": 1,
                    "color": "#00a661"
                }
            ],
            "labelField": null,
            "labelFont": null,
            "labelSize": 12
        }
    },
    {
        "dataUid": "8fa107617ee84b408f1ba76e321b37fb",
        "dataType": "private",
        "vizConfig": {
            "type": "marker-simple",
            "labelField": "公司简称",
            "labelFont": "Microsoft YaHei Regular",
            "labelSize": 12,
            "markerColor": "#ff2900",
            "markerSize": 7,
            "markerOpacity": 0.8,
            "outlineColor": "#ffffff",
            "outlineWidth": 1,
            "outlineOpacity": 0.8
        }
    }
]

第三步：配置并显示

在GeoHey平台账户页面创建AK，用于访问凭证。将配置参数发送到DataViz API，获取配置地图ID并显示，如以下代码：

$.ajax({
	type : 'GET',
	url : 'http://geohey.com/s/dataviz/config?callback=callback&ak=ZjQ2MjM3Y2ZkMzhlNDQyMzgwMTJmY2U4YTQ5NGI4NjA',
	dataType: 'jsonp',
	data : {
		configJson: JSON.stringify(config)
	},
});
function callback(data){
	if (data.code == 0) {
		var url = "http://geohey.com/s/dataviz/" + data.data.vizId
				+ '/{z}/{x}/{y}.png?retina={i}&ak=ZjQ2MjM3Y2ZkMzhlNDQyMzgwMTJmY2U4YTQ5NGI4NjA';
		var vizLayer = new G.Layer.Tile(url, {
			crossOrigin: ''
		});
		vizLayer.addTo(map);
	} 
}

结果如下图：

稍等！有没有注意到在访问数据可视化url后面有个retina={i}？
对的，支持高清！