通过 HTTPS 在 OpenLayers 地图中使用雄蕊图块答案

【问题标题】：Using Stamen tiles in OpenLayers map over HTTPS通过 HTTPS 在 OpenLayers 地图中使用雄蕊图块
【发布时间】：2015-01-27 22:03:58
【问题描述】：

我在 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's website找到了以下信息

如果您想在需要 HTTPS 的网站上显示这些地图图块，请使用我们的图块 SSL 端点，将 http://tile.stamen.com 替换为 https://stamen-tiles.a.ssl.fastly.net。也可以使用多个子域：https://stamen-tiles-{S}.a.ssl.fastly.net

JavaScript 可以从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 在检索雄蕊图块时使用此端点？

【问题讨论】：

标签： javascript https openlayers

【解决方案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"
})

【讨论】：