[英]Using Stamen tiles in OpenLayers map over HTTPS
I'm using Stamen's "toner-lite" tiles in an OpenLayers map like so: 我在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);
Everything works fine when the website is running under HTTP. 当网站在HTTP下运行时,一切正常。 However, if I run the site under HTTPS, an unsuccessful attempt is made to retrieve the tiles from a URL such as
但是,如果我在HTTPS下运行该站点,则会尝试从URL(例如)中检索切片
https://c.tile.stamen.com/toner-lite/5/24/14.png https://c.tile.stamen.com/toner-lite/5/24/14.png
I found the following information on Stamen's website 我在Stamen的网站上找到了以下信息
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 .
如果您想在需要HTTPS的网站上显示这些地图图块,请使用我们的图块SSL端点,将https://stamen-tiles.a.ssl.fastly.net替换为http://tile.stamen.com 。 Multiple subdomains can be also be used: https://stamen-tiles- {S}.a.ssl.fastly.net
也可以使用多个子域: https:// stamen-tiles- {S} .a.ssl.fastly.net
JavaScript can be loaded from https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js .
可以从https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js加载JavaScript。
And indeed, if I try a URL such as 事实上,如果我尝试一个URL,如
https://stamen-tiles.a.ssl.fastly.net/toner-lite/5/24/14.png https://stamen-tiles.a.ssl.fastly.net/toner-lite/5/24/14.png
in a browser, the tile is successfully retrieved. 在浏览器中,成功检索到磁贴。 But how do I change my JavaScript code such that OpenLayers will use this endpoint when retrieving Stamen tiles?
但是,如何更改我的JavaScript代码,以便OpenLayers在检索Stamen tile时使用此端点?
From docs , use url
parameter. 从docs ,使用
url
参数。
Default value can be found in source code , custom value should be formatted accordingly. 可以在源代码中找到默认值,应相应地格式化自定义值。
var url = goog.isDef(options.url) ? options.url :
protocol + '//{a-d}.tile.stamen.com/' + options.layer + '/{z}/{x}/{y}.' +
layerConfig.extension;
This should work for you: 这应该适合你:
new ol.source.Stamen({
layer: "toner-lite",
url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.