用高德地图开发包对接极海可视化服务

Dec 21, 2017

高德地图API是很常用的地图开发包,它可以让开发者方便地调用公交查询、实时路况等实用服务,而且底图更新及时,很多人选择使用它来构建自己的应用。可能有人会想,我高德API用的好好的,我为什么要对接极海服务啊?其实是这样的,有些时候,单纯使用高德的开发包是难以满足要求的。
举个例子,现在我使用高德地图API搭建了一个简单应用,实现了规划驾车路线的功能。
OKRs
功能已经有了,现在我想在系统中加载一份北京市自然街区数据,共有接近5万个面,就像下面这样。

OKRs
虽然数据量不算大,但是用API在前端绘制肯定效率不高,虽然API示例中有海量点展示的例子,但是恕我直言,那些点真的很难让人联想到海量,况且,在前端绘制的做法也无法保证数据的安全。

在这种情况下,使用高德开发包是很难满足要求的,当我们要加载更多的数据,或者是要实现一些复杂的与地理数据相关的功能,往往需要更专业的平台来支持。在极海云平台的数据上图应用中,可以很容易实现对海量数据的可视化配置,并且通过可视化服务的形式供用户使用。嗯,听起来还不错,唯一的问题是,应用我已经开发好了,难道要让我用极海的SDK再开发一遍么?

为了解决这个问题,我们为高德地图开发了GeoHey扩展模块,在使用高德地图开发包的同时,也能无缝集成GeoHey提供的服务,方便地对接极海mapviz服务的一系列功能,分分钟展示出数据上图应用中已经做好的项目。比如刚才提到的应用,只需要极海数据上图的项目id和极海的ak,就可以将数据直接引入到已经开发好的应用中啦。
OKRs

如何引入

模块提供两种方法来使用

npm 安装

npm install amap-geohey-plugin --save

然后在html中引入,注意必须在高德的SDK之后引入

<script src="http://webapi.amap.com/maps?v=1.4.2&key=高德平台开发者key"></script>
<script src="node_modules/dist/amap-geohey-plugin.min.js"></script>

也可以直接下载amap-geohey-plugin.min.js,然后复制到项目中并引入。 下载地址

<script src="http://webapi.amap.com/maps?v=1.4.2&key=高德平台开发者key"></script>
<script src="amap-geohey-plugin.min.js"></script>

使用方法

模块的命名空间为AMapGeoHey,在AMapGeoHey下有两个模块:MapViz和DataViz。
MapViz用来展示一个数据上图项目,它可以通过一个数据上图项目的id来获取此项目的数据或直接绘制出来。
DataViz用来对一个或多个数据进行可视化,它可以通过一个数据上图配置来获取图层列表或直接绘制出来,数据上图配置可以在数据上图应用的参数面板中得到。

// 初始化高德地图
var map = new AMap.Map( 'container', {
	resizeEnable: true,
	zoom: 5,
	center: [ 116.23, 39.94 ]
} );

// 依赖AMap.Heatmap
map.plugin( [ "AMap.Heatmap" ], function() {
    //引入极海mapviz服务
    AMapGeoHey.MapViz.get( '4229f22d186a456781ba4873db04e14c', {      // 可视化项目id
        host: 'http://geohey.com',                          // 数据请求地址
        ak: 用户AK,                                          // GeoHey AK
        tileHost: 'http://{s}.geohey.com',                  // 瓦片请求地址
        cluster: [ 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8' ] // 瓦片服务器集群
    }, map )
    
} );

更多使用方法,可以参考项目的 GitHub页面。如果在使用中遇到问题,欢迎联系我们。

评论正在加载...
Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
分享