如何使用 OpenLayers 从 OSM 获取透明的 Tiles答案

【问题标题】：Howto get transparent Tiles from OSM using OpenLayers如何使用 OpenLayers 从 OSM 获取透明的 Tiles
【发布时间】：2012-04-24 13:05:58
【问题描述】：

我正在使用 OpenLayers 实现一个简单的基于 Web 的 GIS 应用程序。我想将热图显示为背景图像 - 就像 GoogleMaps 的混合视图一样。这似乎是不可能的——我想要一张漂亮的地图，所以我使用 OSM 层——但图像完全不透明——所以我所能做的就是在这一层之上覆盖一个图像（或任何其他层）——是的，我可以应用一些透明度，但是标签当然会淡出。

似乎没有办法只向 OSM 询问地砖（海洋等），然后插入我的自定义图层，然后在上面插入一个带有街道、街道名称和所有其他内容的 OSM 图层元素。

我想，实现这一点的唯一方法是设置我自己的 OSM-TileServer 并进行相应的配置？

有什么想法吗？

提前致谢

【问题讨论】：

OSM 是 OpenLayers 中用于 OpenStreetMaps 的名称
你的想法似乎是最好的方法，除非你能找到一套已经完成的商业瓷砖。

标签： javascript transparency openlayers openstreetmap hybrid

【解决方案1】：

看起来你可以找到没有标签的 osm 磁贴：http://help.openstreetmap.org/questions/1873/how-can-i-create-a-map-without-any-names-on-it

示例：http://toolserver.org/~osm/locale/en.html?zoom=12&lat=51.51473&lon=-0.13528&layers=BF

我不知道有任何“仅标签”OSM tileset。（编辑：除非我能更好地阅读我粘贴的链接；））

我在这里 (https://alastaira.wordpress.com/2011/05/13/displaying-labels-on-top-of-bing-maps-custom-tile-layers/) 发现似乎有 2 个 bing 瓷砖套装可以满足您的需求。我猜想在 OpenLayers (http://dev.openlayers.org/docs/files/OpenLayers/Layer/Bing-js.html) 中设置它们应该不难。

【讨论】：

【解决方案2】：

感谢 tonio 的快速回复！

它现在可以与 OSM 一起使用 - 对于所有感兴趣的人，这是我的解决方案：（MY-MIDDLE-LAYER.KML 是德国地图，红色半透明用于测试目的）

var kml = new OpenLayers.Layer.GML("KML", "MY-MIDDLE-LAYER.KML", {
format: OpenLayers.Format.KML,formatOptions:{extractStyles:true,extractAttributes:true},alwaysInRange:true,isBaseLayer: false,opacity:50,transparent:true
});

OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        var url = [
            "http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
            "http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
            "http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://d.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://e.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://f.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({numZoomLevels: 19}, options);
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]);
    },
    CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver"
});
l1=new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: true});
l2=new OpenLayers.Layer.OSM.Toolserver('osm-no-labels');
map.addLayers([kml,l1,l2]);

...标签在所有内容之上都非常易读:)

【讨论】：