openlayers6加载天地图混乱问题

2020-06-18 12:00:24 阅读：403 来源： 互联网

标签：body openlayers6 100% 地图 var 百度加载

按照之前的加载百度地图的方式切片排版会错误

修改resouce为下边任意一种：baidu_source 或者baidusource都可以正常加载百度地图

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title> 
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>   <link href="./v6.3.1-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="./v6.3.1-dist/ol.js"></script>
    
  </head>
  <body class="claro">
    <div id="viewDiv"></div>
    <script type="text/javascript">
    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);
            }
             
                y =  (-y);
            

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });
    var  baidusource= new ol.source.XYZ({
       projection: 'baidu',
       maxZoom: 18,
       tileUrlFunction: function(tileCoord,ss,e) {
         var x = tileCoord[1];
         var y = tileCoord[2];
         var z = tileCoord[0];
         console.log(x,y,z,ss,e)
         y = -y 
         return "http://online3.map.bdimg.com/tile/?qt=vtile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=udt=20170908&scaler=1&p=1" 
       },
       tileGrid: new ol.tilegrid.TileGrid({
         resolutions: resolutions,
         origin: [0, 0],
         //extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),
         tileSize: [256, 256]
       })
     })

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'viewDiv',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 5
        })
    }); 
</script> 
  </body>
</html>

标签：body,openlayers6,100%,地图,var,百度,加载
来源： https://www.cnblogs.com/Leechg/p/13156791.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

openlayers6加载天地图混乱问题