Question

我正在尝试使用ol3。我已经开始使用基本用法。这是使用过的代码：

<!DOCTYPE html>
<html lang="cs">
  <head>
    <title>SGS</title>
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/ol.css" />
    <script type="text/javascript" src="scripts/ol.js"></script>
    <script type="text/javascript">
    var map;
    document.addEventListener("DOMContentLoaded", function(event) {
      map = new ol.Map({
        target: 'map',
        renderer:'canvas',
        layers: [new ol.layer.Tile({
          source: new ol.source.XYZ({url: 'tiles/{z}/{x}/{-y}.png'}),
          extent:ol.proj.transformExtent([12,-48.5,19,-51], 'EPSG:4326','EPSG:3857')
        })],
        view: new ol.View({center: [1605991, -6461852], zoom: 10, maxZoom: 13})
      });
    });
    </script>
  </head>
  <body style="margin: 0px">
    <div id="map" style="position: absolute; height: 100%; width: 100%"></div>
  </body>
</html>

瓷砖存储在本地。结果产生水平条纹： enter image description here 在Chrome 41和IE 10中测试结果相同。

Answer 1

问题是磁贴网址：

url: 'tiles/{z}/{x}/{-y}.png'

您使用{-y}用于TMS服务。对于MapQuest图块，您应该使用{y}。

url: 'tiles/{z}/{x}/{y}.png'

Answer 2

您正在尝试使用TMS，而不是XYZ。重要的区别在于它们的瓷砖编号方案有不同的来源：左上角和左下角。我刚刚尝试使用带有ol.layer.Tile来源的ol.source.XYZ来尝试添加TMS时遇到此问题。解决方案是对'ol.source.XYZ使用tileUrlFunction选项，并调整TMS原点的y tile坐标（左下角x，y为0,0）：

tileUrlFunction: function(tileCoord, pixelRatio, projection) {
  var x, y, z;
  z = tileCoord[0];
  x = tileCoord[1];
  y = tileCoord[2] + (1 << z);
  // substitute these into the url, which this function must return

瓷砖垂直位移

2 个答案: