javascript - OpenLayers/OpenStreetMap 远足自行车 map

Question

在我的 SPA 中，我想根据 JavaScript 通过 OpenLayer 包含 openstreetmap。这很好用。但是我如何将 map 类型更改为远足和自行车 map ，如下所示: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);

得到这个:

但我想要这种 map :

谢谢!

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看起来它们只是定义不同图 block 数据源的便利类，它们本身不提供任何特殊功能，例如:

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"
});