百度地图2.0瓦片获取

时间 2019-12-22

标签百度地图 2.0 瓦片获取繁體版

原文原文链接

前面跟你们分享过百度地图2.0离线版的修改制做，许多人问怎样得到瓦片，这个过程其实并不复杂。稍微追踪一下代码就能够得到瓦片。javascript

因为想下载瓦片须要联网，但须要修改代码，所以不能直接用百度地图的js。js须要下载下来修改使用，所以仍是参考前做《百度地图2.0离线版的制做》吧，不过只须要下载下来加载到本身的html页面中就能够了。前文中的修改都是没必要要的了，须要新修改代码达到获取瓦片地址，而后经过工具能够下载。下载工具我就不提供了。css

第一步，修改“a_”方法html

若是不出意外的话，搜索方法定义“a_”应该能且只能找到一处，其调用者也只有一处，两个都要改，咱们先来改“a_”定义。java

a_:function(a,b,c,d){var e=this;e.h1=b;var f=this.map.ta(),g=e.SD(a,c),i=f.k.Ob,b=[a[0]*i+b[0],(-1-a[1])*i+b[1]],k=this.wg[g];k&&k.Gb?(vb(k.Gb,b),d&&(d=new Q(a[0],a[1]),f=this.map.K.te?this.map.K.te.style:"normal",d=c.getTilesUrl(d,a[2],f),k.loaded=q,Fc(k,d)),k.loaded?this.vf():Gc(k,function(){e.vf()})):(k=this.fj[g])&&k.Gb?(c.Pb.insertBefore(k.Gb,c.Pb.lastChild),this.wg[g]=k,vb(k.Gb,b),d&&(d=new Q(a[0],a[1]),f=this.map.K.te?this.map.K.te.style:"normal",d=c.getTilesUrl(d,a[2],f),k.loaded= q,Fc(k,d)),k.loaded?this.vf():Gc(k,function(){e.vf()})):(k=i*Math.pow(2,f.qm()-a[2]),new H(a[0]*k,a[1]*k),d=new Q(a[0],a[1]),f=this.map.K.te?this.map.K.te.style:"normal",d=c.getTilesUrl(d,a[2],f),k=new Hc(this,d,b,a,c),Gc(k,function(){e.vf()}),k.$n(),this.wg[g]=k)},

这个太长了，也很差看哈，不过修改很是简单，在最后增长一句“return d;”就行了。这样咱们能够找到瓦片的地址等信息。api

我给这段代码稍加翻译了一下，能够看得更清楚一些。为了方便，我将大多数的逗号表达式改为多语句，将问号冒号三元表达改为了if/else结构。数组

a_:function(a,b,c,d){
    var e=this;
    e.h1=b;
    var f=this.map.va();
    var g=e.SD(a,c);//名字，TILE-2-3-4-5，基本上是version-x-y-z
    var i=f.k.Ob;
    var b=[a[0]*i+b[0],(-1-a[1])*i+b[1]];//left和top的计算
    var k=this.wg[g];//这个是个缓存结构看起来，是一个map
    //d彷佛永远都是undefined，所以下面跟d相关的代码都未执行。
    if(k&&k.Gb){//找到缓存，k.Gb是具体的tile对应的image节点
        vb(k.Gb,b);//设置image的位置，具体的位置在b中存储了，两个维度分别是left和top
        if(!!d){
            console.log("====any here?? k.Gb="+k.Gb.src)
            d=new Q(a[0],a[1]);
            f=this.map.M.se?this.map.M.se.style:"normal";
            d=c.getTilesUrl(d,a[2],f);
            k.loaded=q;
            Fc(k,d);
        }
        k.loaded?this.vf():Gc(k,function(){e.vf()})
    }else{
        k=this.fj[g];//这个不知道是什么，看起来这里永远取不到数据
        if(!!k&&!!k.Gb){//这一块代码也就废掉了
            c.Pb.insertBefore(k.Gb,c.Pb.lastChild);
            this.wg[g]=k;
            vb(k.Gb,b);
            if(d){
                console.log("====any here?????????? k.Gb="+k.Gb.src)
                d=new Q(a[0],a[1]);
                f=this.map.M.se?this.map.M.se.style:"normal";
                d=c.getTilesUrl(d,a[2],f);
                k.loaded= q;
                Fc(k,d);
            }
            k.loaded?this.vf():Gc(k,function(){e.vf()})
        }else{
            //未缓存的数据都走的这个地方，但只有未缓存的数据走的这里
            console.log("----all is here?");
            k=i*Math.pow(2,f.qm()-a[2]);
            new H(a[0]*k,a[1]*k);
            d=new Q(a[0],a[1]);//Q是一个对象，x，y两个属性
            f=this.map.M.se?this.map.M.se.style:"normal";
            d=c.getTilesUrl(d,a[2],f);//第二个参数是z，所以a数组里面本来就是[x,y,z]
            k=new Hc(this,d,b,a,c);
            Gc(k,function(){e.vf()});
            k.$n();
            this.wg[g]=k;
        }
    }
    return d;
},

最后一句是增长的，其余的注释也好，输出也好，都是探查和验证的。具体不解释了。这里只是为了说明，a_方法的目的就是随时获取瓦片的地址，并设置其展现位置。瓦片可能已经下载了，是不须要请求的。若是你的鼠标在拖动地图，这个方法会疯狂的执行。但因为缓存的存在，所以浏览器仍是受得了的。浏览器

而后顺着“a_”的调用方，咱们须要修改的是“cI”方法。这个方法我不知道名字会不会变更，就像a_同样，不知道会不会在不一样的版本文件里会变化，我看这几回的代码这两个方法的名字是没变的。缓存

第二步，修改a_的调用方法
网络

cI方法太长了，贴不过来，也看不过来，我贴相关的一部分吧app

for(k=0;k<i;k++)this.a_([v[k][0],v[k][1],n],u,e,a)

哈哈，就这样，这部分也太简单了:-)

不过咱们要修改为别的样子，把瓦片地址输出出来。这个其实不用我来说了吧，你们都内心有数了。这也是为何我上面修改了a_方法，让他返回瓦片地址。

有两点你们要注意，第一，不是每次调用a_方法都会得到瓦片地址，缓存了的瓦片地址是不返回瓦片地址的（undefined），只有新加载的瓦片会返回地址好比拖动或缩放了地图。第二，a_方法不是只计算瓦片地址，还包括加载瓦片、移动瓦片，使得显示符合用户要求。

for(k=0;k<i;k++){
    var url = this.a_([v[k][0],v[k][1],n],u,e,a);
    if(!!url&&window["$collector$"]&&window["$collector$"].appendTile){
        var path="tiles/"+n+"/"+v[k][0]+"/"+v[k][1]+".png";
        window["$collector$"].appendTile(path, url);
    }
}

我把它修改为这样了，这要求咱们定义一个全局变量对象$collector$，而后要求提供一个appendTile方法，而后把地址、路径等信息输出出来。我是这样写的，同时也是为了对应《百度地图2.0离线版的制做》文章，给出了瓦片在离线版中的位置。

第三步，编写瓦片输出代码

这个更简单了，你们能够随意发挥了。接口上面定义了，定义也是简单粗暴的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版2.0DEMO</title>
<script type="text/javascript" src="js/apiv2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bmap.css"/>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<div id="list"></div>
</body>
</html>
<script type="text/javascript">
var $collector$ = {
    appendTile: function(path, url){
        addUrls(path, url);
    }
};
function addUrls(path, url){
    var div = document.getElementById("list");
    var anchor = document.createElement("a");
    anchor.href = url;
    anchor.innerHTML = path;
    div.appendChild(anchor);
    var br = document.createElement("br");
    div.appendChild(br);
}
var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP});      //设置卫星图为底图
var point = new BMap.Point(111.404, 40.915);    // 建立点坐标
map.centerAndZoom(point,5);                     // 初始化地图,设置中心点坐标和地图级别。

//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操做。  
//map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的



var marker = new BMap.Marker(point);
map.addOverlay(marker); 

var polyline = new BMap.Polyline([
        new BMap.Point(111.404, 40.915),
        new BMap.Point(112.404, 42.915),
        new BMap.Point(113.404, 39.915),
        new BMap.Point(114.404, 42.915),
        new BMap.Point(115.404, 39.915),
        new BMap.Point(116.404, 42.915)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

</script>

效果图：

超连接的文本是离线版瓦片应该放的位置，连接地址是瓦片实际的网络地址。下载吧！

本方法修改简单，缺点是不能像前一版那样，窗口内的瓦片批量以此获取，此次是窗口移动到哪里，瓦片加载到哪里。

之因此没有像之前那样，主要是2.0的版本修改比较大，不少原先能获取到的数据如今都获取不到了。但地图的理论不变，计算方法不变。因为数据获取不到，所以光有理论也没用了。

1.3版的瓦片在2.0里面是直接可用的。