我在 OpenLayers map 中使用 Stamen 的“toner-lite”图 block ,如下所示:
var bkgLayer = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: "toner-lite"
})
});
var map = new ol.Map({
controls: [zoomInCtrl, scaleLineCtrl, fullScreenCtrl],
renderer: 'webgl',
target: 'mapViewport'
});
map.addLayer(bkgLayer);
当网站在 HTTP 下运行时一切正常。但是,如果我在 HTTPS 下运行站点,则尝试从
等 URL 检索磁贴会失败https://c.tile.stamen.com/toner-lite/5/24/14.png
我在 Stamen's website 上找到了以下信息
If you'd like to display these map tiles on a website that requires HTTPS, use our tile SSL endpoint by replacing http://tile.stamen.com with https://stamen-tiles.a.ssl.fastly.net. Multiple subdomains can be also be used: https://stamen-tiles-{S}.a.ssl.fastly.net
JavaScript can be loaded from https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js.
确实,如果我尝试一个 URL,比如
https://stamen-tiles.a.ssl.fastly.net/toner-lite/5/24/14.png
在浏览器中,磁贴已成功检索。但是,我该如何更改我的 JavaScript 代码,以便 OpenLayers 在检索 Stamen 切片时使用此端点?
最佳答案
来自 docs , 使用 url
参数。
默认值可以在 source code 中找到,自定义值应相应地格式化。
var url = goog.isDef(options.url) ? options.url :
protocol + '//{a-d}.tile.stamen.com/' + options.layer + '/{z}/{x}/{y}.' +
layerConfig.extension;
这应该适合你:
new ol.source.Stamen({
layer: "toner-lite",
url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"
})
关于javascript - 通过 HTTPS 在 OpenLayers map 中使用 Stamen tiles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28171978/