Question

我遇到的问题是我尝试使用Openlayers加载WMTS Feed，但似乎没有取得好成绩。对于ArcGis服务，这似乎是通过但不是GeoServer的WMTS服务。代码如下所示。我一直收到javascript错误

TypeError: Argument 2 of CanvasRenderingContext2D.putImageData is not a finite floating-point value.

我正在使用的代码如下所示。无论改变投影，误差都保持不变。请指教。原始要点here

<!DOCTYPE html>
<html>
<head>
<title>WMTS example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">   </script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(21);

var matrixIds = new Array(21);
for (var i=0; i<21; ++i) {
    matrixIds[i] = "EPSG:4326:" + i;
}

var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://services.arcgisonline.com/arcgis/rest/' +
  'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
  source: new ol.source.OSM(),
  opacity: 0.7
}),
new ol.layer.Tile({
  opacity: 0.7,
  source: new ol.source.WMTS({
    attributions: [attribution],
    url: 'http://suite.opengeo.org/geoserver/gwc/service/wmts',
    layer: 'opengeo:countries',
    matrixSet: 'ESPG:4326',
    format: 'image/png',
    style : 'default',
    projection: projection,
    tileGrid: new ol.tilegrid.WMTS({
      origin: ol.extent.getTopLeft(projectionExtent),
      resolutions: resolutions,
      matrixIds: matrixIds
    }),
    wrapX: true
  })
})
  ],
  target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  collapsible: false
})
 }),
  view: new ol.View({
  center: [-13677832, 5213272],
  //center: [-11158582, 4813697],
  zoom: 1
  })
});

</script>
</body>
</html>

Answer 1

您的resolutions数组刚刚填充undefined，对吗？你应该用你想要的分辨率填写它。

Answer 2

你应该像这样初始化你的分辨率数组：

for (var z = 0; z < 21; ++z) {
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:4326:" + z;;
        }

您是否将地图的投影设置为ol.proj.get（'EPSG：4326'）？

var view = new ol.View({
                center: [0, 0],
                zoom: 1,
                projection: ol.proj.get('EPSG:4326')
            });

Openlayers 3 WMTS

2 个答案: