OpenLayers, Bing et un fichier KML

J'essaie de placer un fichier KML sur VirtualEarth Map dans OpenLayers, mais cela ne fonctionne pas. Je suppose que ça doit être quelque chose avec la projection.OpenLayers, Bing et un fichier KML

Map: 
var options = { 
    controls: [ new OpenLayers.Control.KeyboardDefaults(), 
       new OpenLayers.Control.MouseDefaults(), 
       new OpenLayers.Control.PanZoomBar(), 
       new OpenLayers.Control.LayerSwitcher() 
       ], 
    maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000), 
    numZoomLevels: 19, 
    units: 'm', 
    projection: new OpenLayers.Projection("EPSG:900913"), 
displayProjection: new OpenLayers.Projection("EPSG:4326"), 
sphericalMercator: true 

}; 


map = new OpenLayers.Map("map", options); 

var binghybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", { 
      type: VEMapStyle.Hybrid 
}); 


KML: 
var animals = new OpenLayers.Layer.Vector("Animals", { 
      projection: new OpenLayers.Projection("EPSG:4326"), 
      strategies: [new OpenLayers.Strategy.Fixed()], 
      protocol: new OpenLayers.Protocol.HTTP({ 
       url: "kml/animals.kml", 
       format: new OpenLayers.Format.KML({ 
        extractStyles: true, 
        extractAttributes: true 
       }) 
      }) 
     });

Quelqu'un ?! Je vous remercie.

Source

2010-04-30 melbic

Ajoutez-vous la couche "animaux" à votre carte? map.addLayers ([binghybrid, animaux]) – Sphvn

Les cartes KML et Bing doivent fonctionner avec le même système de projection et de coordonnées. Avez-vous essayé de les définir pour être le même? Ceci est en plus de la recommandation de Thqr au sujet addLayers (comme vous avez un extrait de code on ne sait pas si vous faites cela ou non)

Dans le cas général, OpenLayers peut reprojeter des données vectorielles, mais vous aurez également besoin d'inclure les proj4js bibliothèque.

Source

2010-11-19 15:02:02 winwaed

Je trouve la réponse dans ce document: http://docs.openlayers.org/library/spherical_mercator.html

Modifier Exemple: http://openlayers.org/dev/examples/spherical-mercator.html

La clé est:

var in_options = { 
     'internalProjection': new OpenLayers.Projection("EPSG:900913"), 
     'externalProjection': new OpenLayers.Projection("EPSG:4326") 
    }; 
    var kmlOptionsIn = OpenLayers.Util.extend({ extractStyles: false },in_options); 

    var features = new OpenLayers.Format.KML(kmlOptionsIn).read(kml);

Voici la source complète à l'exemple. (copier/coller dans un fichier html, charger et cliquer sur le bouton "Ajouter un fichier KML").

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <link rel="stylesheet" href="js/OpenLayers/theme/default/style.css" type="text/css" /> 
    <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script> 
    <script src="js/OpenLayers/OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var lon = 5; 
     var lat = 40; 
     var zoom = 5; 
     var map, layer, vectors, formats; 
     function init() { 

      var options = { 
       units: "m", 
       maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
       restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
      }; 


      map = new OpenLayers.Map('map', options); 


      var hybrid = new OpenLayers.Layer.VirtualEarth("Bing Base Map", 
      { 
       sphericalMercator: true, 
       maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 

      }); 


      var venctor_options = { 
       units: "m", 
       maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
       restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
      }; 

      vectors = new OpenLayers.Layer.Vector("Vector Layer", venctor_options); 
      map.addControl(new OpenLayers.Control.MousePosition()); 
      map.addControl(new OpenLayers.Control.LayerSwitcher()); 
      map.addLayers([hybrid, vectors]); 
      map.zoomToMaxExtent(); 
//   var center = new OpenLayers.LonLat(-30, 12); 
//   map.setCenter(center, 1); 



     } 


     function deserialize() { 

      var kml = "<?xml version='1.0' encoding='UTF-8'?><kml xmlns='http://www.opengis.net/kml/2.2'><Document><name>Granules</name><description>Exported on Wed Nov 24 2010 09:41:38 GMT-0500 (Eastern Standard Time)</description><Placemark><name>GRAN-46</name><description>{ ID:46, TYPE:'OPT', START_DATE:'7/23/2003 4:21:17 PM', END_DATE:'7/23/2003 4:22:13 PM', INGESTDATE:'3/25/2004 12:00:00 AM', EXTERNAL_ID:null, PIXELS:6000, LINES:37494, DATA_PRODIVER_ID:1, COMMENTS:'null' }</description><Polygon><outerBoundaryIs><LinearRing id=''><coordinates>-81.2162649929523,31.1248919963837 -81.177305996418,31.2556949853897 -81.0197220146656,31.781594991684 -80.8606449961662,32.3073099851608 -80.7000299990177,32.8328340053558 -80.5378299951553,33.3581640124321 -80.3739939928055,33.8832920193672 -80.2084729969502,34.4082159996033 -80.8601450026035,34.515996992588 -81.0217449963093,33.9903180003166 -81.18175598979,33.4644510149956 -81.3402259945869,32.9384009838104 -81.4972029924393,32.412172973156 -81.6527320146561,31.8857709765434 -81.8068569898605,31.359197974205 -81.8449699878693,31.2282310128212 -81.2162649929523,31.1248919963837 </coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>" 

      var type = "kml"; 
      var in_options = { 
       'internalProjection': new OpenLayers.Projection("EPSG:900913"), 
       'externalProjection': new OpenLayers.Projection("EPSG:4326") 
      }; 
      var kmlOptionsIn = OpenLayers.Util.extend({ extractStyles: false },in_options); 

      var features = new OpenLayers.Format.KML(kmlOptionsIn).read(kml); 
      var bounds; 

      if (features) { 
       if (features.constructor != Array) { 
        features = [features]; 
       } 
       for (var i = 0; i < features.length; ++i) { 
        if (!bounds) { 
         bounds = features[i].geometry.getBounds(); 
        } else { 
         bounds.extend(features[i].geometry.getBounds()); 
        } 
       } 
       vectors.addFeatures(features); 
       map.zoomToExtent(bounds); 

      } 
     } 

    </script> 
    <style type="text/css"> 
/** 
* CSS Reset 
* From Blueprint reset.css 
* http://blueprintcss.googlecode.com 
*/ 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} 
body {line-height:1.5;} 
table {border-collapse:separate;border-spacing:0;} 
caption, th, td {text-align:left;font-weight:normal;} 
table, td, th {vertical-align:middle;} 
blockquote:before, blockquote:after, q:before, q:after {content:"";} 
blockquote, q {quotes:"" "";} 
a img {border:none;} 

/** 
* Basic Typography 
*/ 
body { 
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    color: #222; 
    background: #fff; 
    margin: 1em 1.5em; 
} 
pre, code { 
    margin: 1.5em 0; 
    white-space: pre; 
} 
pre, code { 
    font: 1em 'andale mono', 'lucida console', monospace; 
    line-height:1.5; 
} 
a[href] { 
    color: #436976; 
    background-color: transparent; 
} 
h1, h2, h3, h4, h5, h6 { 
    color: #003a6b; 
    background-color: transparent; 
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding-top: 0.5em; 
} 
h1 { 
    font-size: 130%; 
    margin-bottom: 0.5em; 
    border-bottom: 1px solid #fcb100; 
} 
h2 { 
    font-size: 120%; 
    margin-bottom: 0.5em; 
    border-bottom: 1px solid #aaa; 
} 
h3 { 
    font-size: 110%; 
    margin-bottom: 0.5em; 
    text-decoration: underline; 
} 
h4 { 
    font-size: 100%; 
    font-weight: bold; 
} 
h5 { 
    font-size: 100%; 
    font-weight: bold; 
} 
h6 { 
    font-size: 80%; 
    font-weight: bold; 
} 

/** 
* Map Examples Specific 
*/ 
.smallmap { 
    width: 800px; 
    height: 600px; 
    border: 1px solid #ccc; 
} 
#tags { 
    display: none; 
} 

#docs p { 
    margin-bottom: 0.5em; 
}  
    </style> 
    </head> 
    <body onload="init()"> 
     <h1 id="title">KML Layer Example</h1> 

     <div id="tags"> 
     KML 
     </div> 

     <p id="shortdesc"> 
      Demonstrates loading and displaying a KML file on top of a basemap. <button onclick="deserialize()">Add KML</button> 
    </p> 

    <div id="map" class="smallmap"></div> 

    <div id="docs"></div> 
    </body> 
</html>

Source

2010-11-29 17:03:19 capdragon

Veuillez prendre en compte que j'utilise l'exemple OpenLayers par le programmeur précédent. Mais, j'ai fait quelques changements innovants qui sont encore meilleurs. Pour l'instant, je vous recommande fortement d'utiliser Google Maps. Ici, je simplifie un JavaScript où vous pouvez mettre dans la balise de tête:

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>

Ensuite, vous pouvez insérer Google Maps dans les OpenLayers comme suit:

<script type="text/javascript"> 
    var lon = 5; 
    var lat = 40; 
    var zoom = 5; 
    var map, layer, vectors, formats; 
    function init() {var options = { 
      units: "m", 
      maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
      restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
     }; 
map = new OpenLayers.Map('map', options); 
var gmap = new OpenLayers.Layer.Google(
     "Google Streets", 
     { 
      numZoomLevels: 20, 
      sphericalMercator: true, 
      maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
     }); 
var vector_options = { 
      units: "m", 
      maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
      restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
     }; 
vectors = new OpenLayers.Layer.Vector("Vector Layer", vector_options); 
     map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     map.addLayers([gmap, vectors]); 
     map.zoomToMaxExtent(); 
    } 
</script>

Je suis juste heureux de vous aider. Bonne chance!

Source

2011-07-12 04:31:29 zearth

OpenLayers, Bing et un fichier KML

Répondre

Questions connexes