在OpenLayers中使用Stamen圖塊通過HTTPS進行映射

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下運行時，一切正常。 但是，如果我在HTTPS下運行該站點，則會嘗試從URL（例如）中檢索切片

https://c.tile.stamen.com/toner-lite/5/24/14.png

我在Stamen的網站上找到了以下信息

如果您想在需要HTTPS的網站上顯示這些地圖圖塊，請使用我們的圖塊SSL端點，將https://stamen-tiles.a.ssl.fastly.net替換為http://tile.stamen.com 。 也可以使用多個子域： https：// stamen-tiles- {S} .a.ssl.fastly.net

可以從https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js加載JavaScript。

事實上，如果我嘗試一個URL，如

https://stamen-tiles.a.ssl.fastly.net/toner-lite/5/24/14.png

在瀏覽器中，成功檢索到磁貼。 但是，如何更改我的JavaScript代碼，以便OpenLayers在檢索Stamen tile時使用此端點？

Answer 1

從docs ，使用url參數。

可以在源代碼中找到默認值，應相應地格式化自定義值。

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