openlayer加载在线百度瓦片（二）

最新推荐文章于 2023-11-16 15:40:57 发布

龙石月

最新推荐文章于 2023-11-16 15:40:57 发布

阅读量241

点赞数

原文链接：https://blog.csdn.net/zxc13552314286/article/details/79594671

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Openlayer加载在线百度瓦片地图</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="baiduMap2" style="width: 100%"></div>
</body>




<script>
 
    // 自定义分辨率和瓦片坐标系
  var resolutions = [];
  var maxZoom = 18;
 
  // 计算百度使用的分辨率
  for(var i=0; i<=maxZoom; i++){
      resolutions[i] = Math.pow(2, maxZoom-i);//(幂运算)
  }
  var tilegrid  = new ol.tilegrid.TileGrid({
      origin: [0,0],    // 设置原点坐标
      resolutions: resolutions    // 设置分辨率
  });
 
  // 创建百度地图的数据源
  var baiduSource = new ol.source.TileImage({
      projection: 'EPSG:3857',    
      tileGrid: tilegrid,
      tileUrlFunction: function(tileCoord, pixelRatio, proj){
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2];
 
          // 百度瓦片服务url将负数使用M前缀来标识
          if(x<0){
              x = 'M' + (-x);
          }
          if(y<0){
              y = 'M' + (-y);
          }
 
          return "http://online0.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20160426&scaler=1&p=0";
      }
  });
 
    // 百度地图层
    var baiduMapLayer2 = new ol.layer.Tile({
        source: baiduSource
    });
 
    // 创建地图
  new ol.Map({
        layers: [
            baiduMapLayer2
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        }),
        target: 'baiduMap2'
  });
</script>
</html>

龙石月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer加载在线百度瓦片（二）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Openlayer加载在线百度瓦片地图</title> <link rel="stylesheet" href="https://openlayers.or...
复制链接

扫一扫