OpenLayer / OpenStreetMap远足和自行车地图 [英] OpenLayer/OpenStreetMap Hike&Bike Map

问题描述

在我的SPA中，我希望通过OpenLayer每个JavaScript包含openstreetmap。这工作正常。但是，如何将地图类型更改为像这里的远足和自行车地图：好像它们只是便利类不同的tile数据源，它们本身并不提供任何特殊功能，例如：

  OpenLayers.Layer.OSM.CycleMap = OpenLayers.Class（OpenLayers.Layer.OSM，{
 initialize：function（name，options）{
 var url = [
http://a.tile.opencyclemap.org/周期/ $ {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
}）; 
  

In my SPA i want to inlcude openstreetmap via OpenLayer per JavaScript. This works fine. But how can i change the map type to the Hike&Bike Map like here: http://hikebikemap.de/ ?

currently i am using the following code:

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

and got this:

but i want this kind of map:

thx!

解决方案

If you have a look at the linked page's source you'll see that they're adding several WMS layers apart from OSM:

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

If you want more than one layer to be available to the user you'll need a OpenLayers.Control.LayerSwitcher.

Note that the sub-types (OSM.Mapnik, OSM.CycleMap, OSM.Osmarender) are not part of standard OpenLayers distribution, looking at one of the source files seems like they're simply convenience classes that define different tile data source, they don't provide any special functionality per se, for example:

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

这篇关于OpenLayer / OpenStreetMap远足和自行车地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！