OpenLayer / OpenStreetMap远足和自行车地图

Question

在我的SPA中，我希望通过每个JavaScript的OpenLayer包含openstreetmap。这很好用。但是如何将地图类型更改为远足和自行车地图，如下所示：http://hikebikemap.de/？

目前我正在使用以下代码：

var zoom            = 11;
var fromProjection  = new OpenLayers.Projection('EPSG:4326');
var toProjection    = new OpenLayers.Projection('EPSG:900913');
var markers         = new OpenLayers.Layer.Markers( 'Markers' );
var map             = new OpenLayers.Map();
var mapnik          = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.addLayer(markers);

var position  = new OpenLayers.LonLat(lng, lat).transform( fromProjection, toProjection);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
map.render(element);

得到了这个：

但我想要这种地图：

THX！

Answer 1

如果您查看链接页面的来源，您会看到他们在OSM之外添加了几个WMS图层：

var osm = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var cycle = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
var osma = new OpenLayers.Layer.OSM.Osmarender("Osmarender");

map.addLayers([ osm, cycle, osma ]);

如果您希望用户可以使用多个图层，则需要OpenLayers.Control.LayerSwitcher。

请注意，子类型（OSM.Mapnik，OSM.CycleMap，OSM.Osmarender）不是标准OpenLayers发行版的一部分，查看one of the source files似乎只是方便定义不同切片数据源的类，它们本身不提供任何特殊功能，例如：

OpenLayers.Layer.OSM.CycleMap = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        var url = [
            "http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
            "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
            "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },
    CLASS_NAME: "OpenLayers.Layer.OSM.CycleMap"
});