使用 GeoHey JavaScript SDK 显示地图

GeoHey JavaScript SDK是一个面向移动互联网时代,遵循移动优先、向下兼容、保持轻量等原则的地图开发包。使用SDK开发Web应用的第一步一般都是把地图显示出来,现在让我们看怎么用几行代码来显示各种来源的地图。

显示简单地图

显示地图首先需要引入SDK库文件,如何在页面中引入库文件可以参考在线SDK文档:http://dist.geohey.com/g-js/latest/doc/index.html#guide-init 简单地说就是先在页面head中引入以下两个文件:

<head>  
    <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>
</head>  

然后在页面body中添加一个div用作地图的容器:

<body>  
    <div id="mapContainer" style="width: 100%; height: 100%;">
</body>  

在这之后就可以使用JavaScript显示并操作地图了,这里先加载一个最简单的开放地图:

G.ready(function() { // 此时类库加载完成  
    var map = new G.Map('mapContainer');
    var layer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        cluster: ['a', 'b', 'c']
    });
    layer.addTo(map);
});

现在你应该可以看到这样的一个地图(请忽略地图左上角的按钮,这是自己另行添加的,GeoHey的SDK不绑定任何这类UI元素):

显示主流互联网地图

在GeoHey的SDK中,显示大家熟悉的地图服务一般通过Layer.Tile这个类(瓦片图层)加载,一个地图里面可以加一个或者多个“图层”。瓦片图层就是通过一张张小图片拼起来的地图。为了方便操作,GeoHey封装了若干主流地图服务的图层:

这里你看到的地图有些会感觉字不是很清晰等情况,一方面是有的地图不支持Retina屏幕,另一方面是我们的SDK支持的无级缩放地图模式(这个模式可以关闭)虽然可以带来更好的体验,但是大部分地图服务并不支持。

显示这些地图的代码通常只有几行:

G.ready(function() { // 此时类库加载完成  
    G.loadModule('maps', function() { // 开始使用模块内的功能
        var map = new G.Map('mapContainer');
        var layer = new G.Layer.QQMap('street');
                            map.addLayer(layer);
    });
});

这里的图层创建需要在loadModule方法中调用,因为第三方地图的支持并不在核心库中。这里先加载了“maps”这个模块,当这个模块加载完成后才可以进行下一步的操作。

显示自定义地图

事实上,如果你很清楚各种地图的调用格式,自己也可以写这样的代码调用各种地图,理论上GeoHey SDK不对地图的形式有任何的限制。如果你是一个地图方面的专家,你甚至可以用自己发布的任何坐标系的地图(SDK默认设置为Web Mercator,因为这在互联网地图中最为常见),只要你能确定图层URL模式,并设置好对应的zoomReses选项(详情请参考更加详细的文档说明:http://dist.geohey.com/g-js/latest/doc/index.html#tile-layer )就可以了,SDK中判断地图如何显示都是通过zoomReses定义的地图分辨率来确定的,这和很多SDK预先定义的若干个显示级别的方法有非常大的不同。

最后再放一个使用GeoHey SDK开发的室内地图的例子,在电脑上用鼠标滚动一下地图或者在手机上用手指捏合一下地图,来体验一下GeoHey地图所能提供的无级缩放的感觉吧:

WuYF

Founder & CTO

北京