文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用OpenLayers从OSM中获取透明磁贴

问如何使用OpenLayers从OSM中获取透明磁贴
EN

Stack Overflow用户

提问于 2012-04-24 21:05:59

回答 2查看 4.5K关注 0票数 2

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

似乎没有一种方法只要求OSM提供地面瓦片(海洋等)，然后插入我的自定义图层，然后在上面插入一个包含街道、街道名称和所有其他元素的OSM图层。

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

有什么想法吗？

提前感谢

javascript

transparency

openlayers

openstreetmap

hybrid

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-04-24 22:17:22

看起来你可以找到没有标签的osm tiles：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

我不知道有什么«label only»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 )中设置它们应该不那么难。

票数 1

Stack Overflow用户

发布于 2012-04-24 23:26:49

谢谢你，tonio，你的回复很快！

它现在可以与OSM一起工作-对于感兴趣的每个人，这是我的解决方案：( my -medi.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]);

..。并且标签看起来比任何东西都更易读:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10298450

复制

相似问题

问如何使用OpenLayers从OSM中获取透明磁贴
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用OpenLayers从OSM中获取透明磁贴EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用OpenLayers从OSM中获取透明磁贴
EN