[英]Howto get transparent Tiles from OSM using OpenLayers
I am implementing a simple Web-based GIS-Application using OpenLayers. 我正在使用OpenLayers实现一个简单的基于Web的GIS应用程序。 I want to display a heatmap as a background-image - just like the hybrid-view of GoogleMaps.
我想将热图显示为背景图像-就像GoogleMaps的混合视图一样。 This seems to be impossible - I want a nice looking map, so I am using the OSM-Layer - but the images are fully opaque - so all I can do is overlaying an image (or any other layer) on top of this layer - yes, I can apply some transparency, but of course, the labels will fade out.
这似乎是不可能的-我想要一张漂亮的地图,所以我正在使用OSM图层-但是图像是完全不透明的-因此,我所能做的就是在该层上覆盖图像(或任何其他层)-是的,我可以应用一些透明度,但是标签自然会消失。
There doesn't seem to be a way of asking OSM for ground-tiles only (oceans, etc,) THEN insert my custom layer and THEN on top of that inserting an OSM-Layer with streets, streetnames and all the other elements. 似乎没有一种方法要求OSM仅提供地砖(海洋等),然后插入我的自定义图层,然后在插入带有街道,街道名称和所有其他元素的OSM图层的顶部之上。
I guess, the only way to accomplish this would be to setup my own OSM-TileServer and configure it accordingly? 我想,完成此操作的唯一方法是设置我自己的OSM-TileServer并相应地配置它?
Any Ideas? 有任何想法吗?
Thanks in Advance 提前致谢
Looks like you can find osm tiles without labels: http://help.openstreetmap.org/questions/1873/how-can-i-create-a-map-without-any-names-on-it 看起来您可以找到没有标签的osm磁贴: http : //help.openstreetmap.org/questions/1873/how-can-i-create-a-map-without-any-names-on-it
I'm not aware of any «label only» OSM tileset.(EDIT: except if I read better the link I paste ;) ) 我不知道任何“仅标签” OSM磁贴集。(编辑:除非我更好地阅读了粘贴的链接;
I find here ( https://alastaira.wordpress.com/2011/05/13/displaying-labels-on-top-of-bing-maps-custom-tile-layers/ ) that there seems to be 2 bing tile sets that would fit your needs. 我在这里( https://alastaira.wordpress.com/2011/05/13/displaying-labels-on-top-of-bing-maps-custom-tile-layers/ )似乎有2个bing磁贴集可以满足您的需求。 I'd guess it shouldn't be that hard to setup them in OpenLayers ( http://dev.openlayers.org/docs/files/OpenLayers/Layer/Bing-js.html ).
我猜想在OpenLayers( http://dev.openlayers.org/docs/files/OpenLayers/Layer/Bing-js.html )中设置它们并不难。
Thank you tonio for this fast reply! 谢谢tonio的快速回复!
It works with OSM now - for everyone who's interested, here is my solution: (MY-MIDDLE-LAYER.KML is a map of germany in red half transparent for testing purposes) 它现在可以与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]);
... and the labels appear nicely readable above everything :) ...并且标签在所有内容上方看起来都很好看:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.