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

高德地图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页面。如果在使用中遇到问题,欢迎联系我们。

suncl

继续阅读此作者的更多文章