Google Maps API加载MBTiles离线地图

最新推荐文章于 2024-11-28 20:12:42 发布

原创

最新推荐文章于 2024-11-28 20:12:42 发布 · 5.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#google maps #MBTiles #地图

本文介绍了如何使用Google Maps API加载MBTiles格式的离线地图。作者在阅读一篇网文后，利用周末时间研究了Google Maps API，并发现可以通过Base64编码在页面中显示二进制瓦片数据。文章详细描述了将MBTiles中的二进制数据转化为可以在地图上显示的步骤，以及前端使用Leaflet库进行封装的过程。

第一次写博客，好忐忑。。。

上周看了这篇网文http://www.cnblogs.com/i-gps/p/3919475.html，深受启发虽尚未实践但感觉颇有价值，只是苦于没有内中细节，遂利用周末时间重新查阅Google Maps API尝试一番。

文档中Google Maps图片地图类型加载本地的瓦片文件，创建地图类型的方法如下：

function GMapsMapTypeFactory() {}
GMapsMapTypeFactory.createMapType = function (name,mapTilePath) {
    var getTileUrl = function (coord, zoom) {
        var numTiles = (1 << zoom);if ((coord.y < 0) || (coord.y >= numTiles)) {
            return null;
        }
        var numx = (coord.x % numTiles + numTiles ) % numTiles;    /*水平方向重复，垂直方向重复方法类似*/


        if (name == "卫星")
        &nb