通过 HTTPS 在 OpenLayers 地图中使用 Stamen tiles

Question

我在 OpenLayers 地图中使用 Stamen 的 "toner-lite" 图块，如下所示：

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 下运行ning 时一切正常。但是，如果我运行使用 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 tiles 时使用此端点？

Answer 1

来自 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"
})

通过 HTTPS 在 OpenLayers 地图中使用 Stamen tiles

Using Stamen tiles in OpenLayers map over HTTPS

javascript

https

openlayers