使用 GeoHey JavaScript SDK 显示地图

教程 Jun 19, 2015

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

评论正在加载...
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.
分享