Question

我使用Stamen＆＃34;爽肤水＆＃34; OpenLayers地图中的图块如下：

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

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

事实上，如果我尝试使用

这样的网址

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

在浏览器中，成功检索到磁贴。但是，如何更改我的JavaScript代码，以便OpenLayers在检索Stamen tile时使用此端点？

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

在OpenLayers中使用Stamen图块通过HTTPS进行映射

1 个答案: