如何使用OpenLayers從OSM獲取透明Tiles

Question

我正在使用OpenLayers實現一個簡單的基於Web的GIS應用程序。 我想將熱圖顯示為背景圖像-就像GoogleMaps的混合視圖一樣。 這似乎是不可能的-我想要一張漂亮的地圖，所以我正在使用OSM圖層-但是圖像是完全不透明的-因此，我所能做的就是在該層上覆蓋圖像（或任何其他層）-是的，我可以應用一些透明度，但是標簽自然會消失。

似乎沒有一種方法要求OSM僅提供地磚（海洋等），然后插入我的自定義圖層，然后在插入帶有街道，街道名稱和所有其他元素的OSM圖層的頂部之上。

我想，完成此操作的唯一方法是設置我自己的OSM-TileServer並相應地配置它？

有任何想法嗎？

提前致謝

Answer 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磁貼集。（編輯：除非我更好地閱讀了粘貼的鏈接；

我在這里（ 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 ）中設置它們並不難。

Answer 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]);

...並且標簽在所有內容上方看起來都很好看:)