在OpenLayers中使用雄蕊图块通过HTTPS映射
Using Stamen tiles in OpenLayers map over HTTPS
我在OpenLayers地图中使用Stamen的"碳粉精简版"瓷砖,如下所示:
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
我在雄蕊的网站上找到了以下信息
如果要在需要 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在检索雄蕊图块时使用此端点呢?
在文档中,使用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"
})
相关文章:
- 如何在映射数组中添加换行符
- ng映射方向备选方案
- 无法通过数组映射绑定
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 使用Scala Play Framework视图中的键检索映射值
- 关于引入外部javascript文件的问题&css通过https
- 淘汰映射;不起作用
- jquery ajax https调用给出ERR_INSECURE_RESPONSE
- 映射数组ES6时考虑空值
- Lodash映射并返回唯一
- 如何通过安全的https连接在javascript中使用基于soap xml的Web服务
- $https请求的安全性
- 如何对映射插件创建的敲除对象进行深度复制
- https.request ignoring rejectUnauthorized
- 在javascript中按映射中的值排序
- web配置http到https重定向异常
- 使用带有两个参数的函数的javascript映射
- 在内部映射值时渲染方法中断
- JSON:获取映射数据
- 在OpenLayers中使用雄蕊图块通过HTTPS映射