Talk:Abenteuer&Allrad
Jump to navigation
Jump to search
Kartendarstellung Messegelaende
OpenLayers: Abhaengig von der Zoomstufe, moechte ich unterschiedliche Basemaps darstellen. Ich haette gerne eine kleinere Zoomstufe (Zoom=19), in der ein Image geladen wird.
Mein Stand (dank TEL0000 von der öpnv-Karte abgekupfert). Funktioniert, Verbesserungsvorschlaege nehme ich gerne an:
<html>
<head>
<title>OpenLayers Example</title>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var lat=50.19003;
var lon=10.12326;
var zoom=18;
var map;
var layerImage;
var layerMapnik;
var layerTilesAtHome;
// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function mapEvent(event) {
if(map.zoom>17){
map.setBaseLayer(layerImage);
}else{
map.setBaseLayer(layerTilesAtHome);
}
}
function init() {
map = new OpenLayers.Map("map", {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
eventListeners: {zoomend: mapEvent},
controls: [
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Navigation(),
// Quellenangabe
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
//Pan oder Zoom
// new OpenLayers.Control.NavToolbar()
]
});
layerImage = new OpenLayers.Layer.Image(
'Zoom',
'badkissingen.png',
new OpenLayers.Bounds(10.12005, 50.18878, 10.12612, 50.19129).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
new OpenLayers.Size(800, 600),
{
resolutions: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
numZoomLevels: 19,
attribution: "by kannix"
}
);
layerMapnik = new OpenLayers.Layer.OSM.Mapnik(
"Mapnik",
{
numZoomLevels: 19
}
);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender(
"Osmarender",
{
numZoomLevels: 19
}
);
map.addLayers([layerImage, layerTilesAtHome, layerMapnik]);
// set default position
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init()">
<div style="width: 800px; height: 600px; border: 1px solid black; padding:0px; margin:0px;" id="map"></div>
<script type="text/javascript"><!--
document.write(lonLat)
//--></script>
</body>
</html>
--kannix 2009-03-31