专栏首页大数据智能实战OpenLayers3加载离线百度地图(百度迁徙底图)

OpenLayers3加载离线百度地图(百度迁徙底图)

关于openlayers加载离线百度地图的东东好几年前就做过了,不过当时做的是2.0版本的。

自从好久没有去做可视化分析之后,也很少接触这些前端的JS的东西了。最近想实现一个东西的时候,才想起需要用到一些比较干净的底图。

于是刚好选用了百度迁徙后面的底图。

由于百度的JS包东西太多,需要的东西太复杂,于是就选用openlayers来进行测试。果然还是非常流畅。

var projection = ol.proj.get("EPSG:3857");     var resolutions = [];     for(var i=0; i<19; i++){         resolutions[i] = Math.pow(2, 18-i);     }     var tilegrid  = new ol.tilegrid.TileGrid({         origin: [0,0],         resolutions: resolutions     });     var baidu_source = new ol.source.TileImage({         projection: projection,         tileGrid: tilegrid,         tileUrlFunction: function(tileCoord, pixelRatio, proj){             if(!tileCoord){                 return "";             }             var z = tileCoord[0];             var x = tileCoord[1];             var y = tileCoord[2];             if(x<0){                 x = "M"+(-x);             }             if(y<0){                 y = "M"+(-y);             }         //## 核心代码处,将百度地图的调用网址修改为离线的地图瓦片服务网址 return "http://localhost:8080/baidu2/"+z+"/"+parseInt(tileCoord[1]/100)+"/"+parseInt(tileCoord[1]/100)+"/"+x+"_"+y+".png"         }     });     var baidu_layer = new ol.layer.Tile({         source: baidu_source     });     var map = new ol.Map({         target: 'map',         layers: [baidu_layer],         view: new ol.View({             center:  [12959773,4853101],             zoom: 5         })     });

通过上述模式,调用展示结果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DrQA实践

    2017年七月份Facebook开源了其开放域问答系统DrQA的代码。关于DrQA,还有一篇2017年发表在ACL上的论文《Reading Wikipedi...

    sparkexpert
  • Spark 2.0 DataFrame map操作中Unable to find encoder for type stored in a Dataset.问题的分析与解决

    随着新版本的spark已经逐渐稳定,最近拟将原有框架升级到spark 2.0。还是比较兴奋的,特别是SQL的速度真的快了许多。。 然而,在其中一个操作时却卡住了...

    sparkexpert
  • Waiting for lock on */.ivy2/.sbt.ivy.lock to be available问题的解决

    在进行SBT编译过程中,经常会碰到这样的问题。。。 Waiting for lock on */.ivy2/.sbt.ivy.lock to be availa...

    sparkexpert
  • OL4结合turf.js实现等值线

    本文分享一个结合turf.js实现前端等值线的生成,并对结果做了圆滑处理,并在OL4中进行展示。

    lzugis
  • EfficientNet详解:当前最强网络

    EfficientNet源自Google Brain的论文EfficientNet: Rethinking Model Scaling for Convolut...

    用户7164815
  • Openlayers3中实现地图的切割

    lzugis
  • nodejs解析xml文件

    xml作为一种重要的数据交换格式,在使用nodejs中也需要对其进行解析,这里所使用的解析模块是xmlreader。其作用是将xml根据节点解析为一个JSON对...

    无邪Z
  • Openlayers4中图片填充的实现

    lzugis
  • Openlayers3加载天地图

    在前文中分别讲到了在Arcgis for js、Openlayers2中去加载天地图,同时也讲到了天地图的离线加载方式。在本文,讲述在Openlayers3中实...

    lzugis
  • 唐宋文学诗人分布展示

    本文的数据是从搜韵获取而来的,地址为http://sou-yun.com/poetlife.html,为方便大家使用,将数据保存到了百度云盘,下载信息为:链接:...

    lzugis

扫码关注云+社区

领取腾讯云代金券