【趁热打铁】20行代码搞定酷炫全球航线图

昨天麦穗在博客中写到了如何在GeoHey网页中绘制华丽丽的全球航线图，相信也有一些网友跟着博客走了一遍，今天麦穗就趁热打铁，和大伙讲讲如何用GeoHey SDK开发全球航线地图，并配置自己喜欢的地图底图吧！

当然了，要完成这个博客的内容，大家得先将全球机场数据在GeoHey的数据上图中进行配置，具体如何配置还请翻回上一篇博客【图文详解】如何画出华丽丽的全球航线图，这里麦穗就不再赘述啦O(∩_∩)O！

一、准备网页素材

网页首先需引用g.css、jquery.min.js和g.min.js三个文件，在线引用方式如下：

<link rel="stylesheet" href="http://dist.geohey.com/g-js/latest/lib/g.css">
<script type="text/javascript" src="http://dist.geohey.com/g-js/latest/lib/g.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

接着准备好地图底图：

  var map, tileLayer;
  G.ready(function(){          
      map = new G.Map('map-container', {recordStatus: false});
	  tileLayer = new G.Layer.Tile('http://geohey.com/s/mapping/e6cb778fce114dcca5943e0e56c11fc0/all?z={z}&x={x}&y={y}&retina=@2x&ak=OGEzZjExMDZlNjdkNGVkN2FiZTgzMDU3NTg2ZDE4NWI', {crossOrigin: ''});
	  tileLayer.addTo(map);
    });

这个时候，你可能会想用自己绘制的地图模板，那么你就需要先使用地图DIY制作专属自己的个性地图：

选择好地图模板，并自己确定好配置方案，其实麦穗一般就新建地图DIY后直奔保存菜单，然后点击复制地图UID的按钮，这个时候你就获得了你想要用的地图模板的UID。

接着你还得确定前面代码使用到的ak参数，ak参数的获取很简单，在网页个人账号|开发者秘钥中复制专属自己账户的key值（若是你还没有添加秘钥，可以先添加秘钥）：

二、获取全球航线数据配置参数

首先进入数据上图的页面，打开已经配置好的全球航线数据，点击保存菜单，然后在该菜单中点击导出配置数据，接着网站将弹出关于参数配置的对话框，点击复制到剪切板按钮。

在网页文件中直接将复制内容赋值给config变量，如下：

var config = [
	{
		"dataUid": "c7a57208625245a2a9a1ef7567b0bdde",
		"dataType": "private",
		"filter": null,
		"vizConfig": {
			"labelField": null,
			"labelFont": "Microsoft YaHei Regular",
			"labelSize": 12,
			"lineColor": "#4a53ff",
			"lineOpacity": 0.03,
			"lineWidth": 1,
			"type": "polyline-simple"
		}
	},
	{
        "dataUid": "5ad85cad11854e35858af28ff1fb08bb",
		"dataType": "private",
		"filter": null,
		"vizConfig": {
			"labelField": null,
			"labelFont": "Microsoft YaHei Regular",
			"labelSize": 12,
			"markerColor": "#9f98fa",
			"markerSize": 1,
			"markerOpacity": 0.5,
			"outlineColor": "#eae6ff",
			"outlineWidth": 1,
			"outlineOpacity": 0.2,
			"type": "marker-simple"
		}
	}
]

三、将全球航线数据可视化

最后就是对航线数据进行可视化了，这个步骤可以参考GeoHey HTTP API提供的数据可视化接口。在地图框架中添加$.ajax()方法，将全球航线数据绘制在新的图层中，最后再将图层叠加到地图上（这里也涉及到ak参数的调用哦，若是自己的数据一定要将ak参数进行替换）：

$.ajax({ 
		type: 'POST',
        dataType: 'jsonp',
		url: 'http://geohey.com/s/dataviz/config?ak=OGEzZjExMDZlNjdkNGVkN2FiZTgzMDU3NTg2ZDE4NWI',
		data:{
			configJson: JSON.stringify(config)
		},
		success: function(data) {
	    var layer = new G.Layer.Tile('http://geohey.com/s/dataviz/' + data.data.vizId  + '/{z}/{x}/{y}.png?ak=OGEzZjExMDZlNjdkNGVkN2FiZTgzMDU3NTg2ZDE4NWI&retina=@2x', {crossOrigin: ''});
        layer.addTo(map);

好啦，感觉自己说的好啰嗦，但万语千言不及一份源代码，麦穗这里就和大家分享一下使用GeoHey SDK开发绘制全球航线数据的源代码哦，若是喜欢请点击：源码|用GeoHey SDK开发绘制全球航线数据