Mam mapkę na której potrzebuję wyświetlić co najmniej 2 pliki kml (warstwa liniowa, punkt początku i końca z krótkim opisem, ew kolor linii)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript"> var map; function initialize() { var latlng = new google.maps.LatLng(48.15, 19.6); var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.LARGE }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.setCenter(new google.maps.LatLng(48.15, 19.6), 6); google.maps.event.addListener(map, 'zoomend', function(oldlevel, newlevel) {if (newlevel > 100){ map.setZoom(5); }}); } </script> </head> <body onload="initialize()"> </body> </html>
Przeglądałem http://openlayers.org/dev/examples/ ale nic mi z tego nie wyszło.
Dodatkowo jak zrobić selekcję tj.
wybór 1 - 1.kml
wybór 2 - 2.kml
z możliwością przeniesienia do współrzędnych zadeklarowanych w wyborze, gdyż nie zawsze będą to miejsca blisko siebie?
Liczę na pomoc lub nakierowanie.
Z dodawaniem plików kml sobie poradziłem, większość danych jest zapisywana w bazie danych, obiekty wyświetlane w pętli, odświeżanie kml zastąpione zmianą nazwy po aktualizacji zawartości.
Mam pytanie - jak zrobić aby po wczytaniu kolejnego kml np obiekt1 obraz został przeniesiony do nowych współrzędnych lat, lon ?
Jakby ktoś potrzebował to dołączam kod:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" /> <!--script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script--> <script type="text/javascript"> // Start position for the map (hardcoded here for simplicity, // but maybe you want to get this from the URL params) var lat=47.496792 var lon=27.571726 var zoom=5 var map; //complex object of type OpenLayers.Map function init() { map = new OpenLayers.Map ("map", { controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Attribution()], maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), maxResolution: 156543.0399, numZoomLevels: 19, units: 'm', projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") } ); var ghyb = new OpenLayers.Layer.Google( "Google Hybrid", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} // used to be {type: G_HYBRID_MAP, numZoomLevels: 20} ); map.addLayer(ghyb); var gphy = new OpenLayers.Layer.Google( "Google Physical", {type: google.maps.MapTypeId.TERRAIN} // used to be {type: G_PHYSICAL_MAP} ); map.addLayer(gphy); // Add the Layer with the GPX Track var obiekt0 = new OpenLayers.Layer.Vector("hhhhh1", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "kml/1_20120918112149.kml", format: new OpenLayers.Format.KML() }), style: {strokeColor: "fuchsia", strokeWidth: 3, strokeOpacity: 0.7}, projection: new OpenLayers.Projection("EPSG:4326") }); map.addLayer(obiekt0); // Add the Layer with the GPX Track var obiekt1 = new OpenLayers.Layer.Vector("gggg", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "kml/2_20120918110327.kml", format: new OpenLayers.Format.KML() }), style: {strokeColor: "aqua", strokeWidth: 3, strokeOpacity: 0.7}, projection: new OpenLayers.Projection("EPSG:4326") }); obiekt1.setVisibility(false); map.addLayer(obiekt1); var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter(lonLat, zoom); //var size = new OpenLayers.Size(21, 25); //var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); //var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset); //layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon)); } </script> </head> <!-- body.onload is called once the page is loaded (call the 'init' function) --> <body onload="init();"> <!-- define a DIV into which the map will appear. Make it take up the whole window --> </body> </html>