Witam,

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)

  1. <!DOCTYPE html>
  2. <title>...</title>
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  4. <style type="text/css">
  5. html { height: 100% }
  6. body { height: 100%; margin: 0; padding: 0 }
  7. #map_canvas { height: 100% }
  8.  
  9. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  10. <script type="text/javascript">
  11. var map;
  12.  
  13. function initialize() {
  14. var latlng = new google.maps.LatLng(48.15, 19.6);
  15. var myOptions = {
  16. zoom: 6,
  17. center: latlng,
  18. mapTypeId: google.maps.MapTypeId.HYBRID,
  19. mapTypeControl: true,
  20. mapTypeControlOptions: {
  21. style: google.maps.MapTypeControlStyle.LARGE
  22. },
  23. scaleControl: true,
  24. scaleControlOptions: {
  25. position: google.maps.ControlPosition.BOTTOM_LEFT
  26. }
  27. };
  28. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  29. map.setCenter(new google.maps.LatLng(48.15, 19.6), 6);
  30. google.maps.event.addListener(map, 'zoomend', function(oldlevel, newlevel) {if (newlevel > 100){ map.setZoom(5); }});
  31. }
  32.  
  33. </head>
  34. <body onload="initialize()">
  35.  
  36. <div id="map_canvas" style="width: 800px; height: 600px;"></div>
  37.  
  38. </body>
  39. </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:
  1. <title>KML</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  3. <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  4. <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
  5. <!--script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script-->
  6. <script type="text/javascript">
  7. // Start position for the map (hardcoded here for simplicity,
  8. // but maybe you want to get this from the URL params)
  9. var lat=47.496792
  10. var lon=27.571726
  11. var zoom=5
  12.  
  13. var map; //complex object of type OpenLayers.Map
  14.  
  15. function init() {
  16. map = new OpenLayers.Map ("map", {
  17. controls:[
  18. new OpenLayers.Control.Navigation(),
  19. new OpenLayers.Control.PanZoomBar(),
  20. new OpenLayers.Control.LayerSwitcher(),
  21. new OpenLayers.Control.Attribution()],
  22. maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
  23. maxResolution: 156543.0399,
  24. numZoomLevels: 19,
  25. units: 'm',
  26. projection: new OpenLayers.Projection("EPSG:900913"),
  27. displayProjection: new OpenLayers.Projection("EPSG:4326")
  28. } );
  29.  
  30.  
  31. var ghyb = new OpenLayers.Layer.Google(
  32. "Google Hybrid",
  33. {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
  34. // used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
  35. );
  36. map.addLayer(ghyb);
  37.  
  38. var gphy = new OpenLayers.Layer.Google(
  39. "Google Physical",
  40. {type: google.maps.MapTypeId.TERRAIN}
  41. // used to be {type: G_PHYSICAL_MAP}
  42. );
  43. map.addLayer(gphy);
  44.  
  45.  
  46.  
  47. // Add the Layer with the GPX Track
  48. var obiekt0 = new OpenLayers.Layer.Vector("hhhhh1", {
  49. strategies: [new OpenLayers.Strategy.Fixed()],
  50. protocol: new OpenLayers.Protocol.HTTP({
  51. url: "kml/1_20120918112149.kml",
  52. format: new OpenLayers.Format.KML()
  53. }),
  54. style: {strokeColor: "fuchsia", strokeWidth: 3, strokeOpacity: 0.7},
  55. projection: new OpenLayers.Projection("EPSG:4326")
  56. });
  57. map.addLayer(obiekt0);
  58.  
  59. // Add the Layer with the GPX Track
  60. var obiekt1 = new OpenLayers.Layer.Vector("gggg", {
  61. strategies: [new OpenLayers.Strategy.Fixed()],
  62. protocol: new OpenLayers.Protocol.HTTP({
  63. url: "kml/2_20120918110327.kml",
  64. format: new OpenLayers.Format.KML()
  65. }),
  66. style: {strokeColor: "aqua", strokeWidth: 3, strokeOpacity: 0.7},
  67. projection: new OpenLayers.Projection("EPSG:4326")
  68. });
  69. obiekt1.setVisibility(false);
  70. map.addLayer(obiekt1);
  71.  
  72. var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
  73. map.setCenter(lonLat, zoom);
  74.  
  75. //var size = new OpenLayers.Size(21, 25);
  76. //var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  77. //var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
  78. //layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
  79. }
  80. </script>
  81.  
  82. </head>
  83. <!-- body.onload is called once the page is loaded (call the 'init' function) -->
  84. <body onload="init();">
  85. <!-- define a DIV into which the map will appear. Make it take up the whole window -->
  86. <div style="width:70%; height:70%" id="map"></div>
  87.  
  88. </body>
  89. </html>