用OpenLayers 3加载瓦片地图

在OpenLayers 3中，可以使用下面的代码创建一个加载瓦片地图的layer，然后把该layer添加到map里面就可以了，新建加载瓦片地图的layer代码示例：

var mapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://4.maps.nlp.nokia.com.cn/maptile/2.1/maptile/5b33fc2110/normal.day/{z}/{x}/{y}/256/png8?lg=CHI&app_id=90oGXsXHT8IRMSt5D79X&token=JY0BReev8ax1gIrHZZoqIg&xnlp=CL_JSMv2.5.3.2'
    })
});

代码里面url用的是nokia的地图，你换成google的就行， 注意url里面的{x},{y},{z}是对应的x，y，z的占位符，在运行时，ol3会自动被替换成对应的实际的x,y,z值，我们需要注意的就是他们的位置必须放正确就okay了。

对于离线瓦片，把url的值换成离线瓦片的路径即可。由于问如何加载离线瓦片地图的人比较多， 我写了一个demo，参见https://github.com/anzhihun/OpenLayersStudy 里面的loadOfflineMap.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容