Chargement d'un fichier .kml local avec google maps ?

Question

J'ai créé un programme hello world pour charger un fichier kml local (emprunté aux docs de google) :

var ctaLayer = new google.maps.KmlLayer("http://localhost:8080/kml/cta.kml");

Cela ne fonctionne pas (rien n'est chargé).

Cependant, lorsque je change cette ligne en :

  var ctaLayer = new google.maps.KmlLayer("http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml");

il se charge correctement. Les deux fichiers kml sont identiques. Que dois-je faire pour qu'il se charge lorsque je le sers moi-même ? (J'ai essayé les chemins absolus et relatifs, et je sais que les chemins que j'utilise sont corrects...)

J'ai également ajouté le bon type de mime dans le fichier de configuration de mon appserver :

<mime-mapping>
    <extension>kml</extension>
<mime-type>application/vnd.google-earth.kml+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>kmz</extension>
    <mime-type>application/vnd.google-earth.kmz</mime-type>
</mime-mapping>

Mais ça ne se charge toujours pas.

J'ai trouvé ceci dans le moteur de recherche de Google docs :

L'API Google Maps prend en charge les formats de données KML et GeoRSS pour l'affichage des informations géographiques. Ces formats de données sont affichés sur une carte à l'aide d'un objet KmlLayer, dont le constructeur prend l'URL d'un fichier KML ou GeoRSS accessible au public.

Donc je suppose que ce que j'essaie de faire est no possible sans servir le kml à partir d'une url accessible au public...sauf si quelqu'un peut prouver le contraire

Answer 1

Le fichier KML est inaccessible car il se trouve sur votre machine locale et google ne peut pas y accéder car il ne sait pas comment se rendre à localhost:8080.

Answer 2

Malheureusement, vous ne pouvez pas utiliser "localhost". Vous avez deux possibilités :

1. placer le kml sur un domaine accessible au public. (si google ne peut y accéder, cela ne fonctionnera pas)
2. Utilisez geoxml3 qui fait essentiellement ce que google fait mais vous permet de télécharger et d'héberger vous-même le fichier JS du parseur. Il vous permettra de charger un KML LOCALHOST et de le parser pour vous (objets accessibles via JSON) ( http://code.google.com/p/geoxml3/ ).

Le choix n° 1 peut ne pas être une option pour ceux qui travaillent sur des contrats de défense et traitent des informations sensibles, car le fichier kml est envoyé à Google en arrière-plan et rendu sur la carte.

Answer 3

Ce site web, affichage-kml.appspot.com Le site Web de la Commission européenne exige que vous copiez/colliez l'intégralité du fichier KML sur le site Web. Vous pouvez également utiliser Dropbox pour héberger le fichier KML en utilisant votre dossier public. Dans le dossier Dropbox public, un menu contextuel cliqué avec le bouton droit de la souris vous permet de copier l'URL.

Mise à jour :

Le site web d'appspot a un historique d'instabilité. En janvier 2019, le site semble fonctionner.

RÉFÉRENCES :

1. http://display-kml.appspot.com/
2. https://www.dropbox.com/

Answer 4

Sans aucun doute, Google Maps KmlLayer est conçu pour que vous leur envoyiez vos données. https://developers.google.com/maps/documentation/javascript/kml

Regardez le journal suivant.

//console
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: your_gmap_object
});

Créer Marqueur, Polygone ils sont tous analyse syntaxique et rendu côté navigateur .

Comme vous pouvez le voir dans le prochain journal du réseau, La classe KmlLayer envoie l'URL source au serveur Google pour l'analyser et (faire quelque chose de leur côté) et renvoyer le résultat analysé à votre navigateur pour qu'il le rende.

//REQUEST from browser

https://maps.googleapis.com/maps/api/js/KmlOverlayService.GetOverlays?1shttps%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2Fexamples%2Fkml%2Fwestcampus.kml&callback=_xdc_._lidt3k&key=AIzaSyBeLTP20qMgxsQFz1mwLlzNuhrS5xD_a_U&token=103685

//RESPONSE from google server

/**/_xdc_._lidt3k && _xdc_._lidt3k( [0,"kml:cXOw0bjKUSmlnTN2l67v0Sai6WfXhSSWuyNaDD0mAzh6xfi2fYnBo78Y2Eg","|ks:;dc:tg;ts:51385071|kv:3|api:3",...
["KmlFile"],[[37.423017,-122.0927],[37.424194,-122.091498]],[["g74cf1503d602f2e5"],["g58e8cf8fd6da8d29"],["ge39d22e72437b02e"]],1,[["client","2"]],-21505,[["ks",";dc:tg;ts:51385071"],["kv","3"],["api","3"]]] )

Comme @capdragon l'a mentionné plus haut, il serait préférable analyser le KML par vous-même .

UPDATE

Voici le code compact du parseur KML. Ceci seulement pour les marqueurs et les polygones de google.maps.

html

<input type='file' accept=".kml,.kmz" onchange="fileChanged()">

script, j'ai utilisé typescript mais c'est à peu près la même chose avec javascript.

  file: any
  fileChanged(e) {
    this.file = e.target.files[0]
    this.parseDocument(this.file)
  }
  parseDocument(file) {
    let fileReader = new FileReader()
    fileReader.onload = async (e: any) => {
      let result = await this.extractGoogleCoords(e.target.result)

      //CREATE MARKER OR POLYGON WITH result here
      console.log(result)

    }
    fileReader.readAsText(file)
  }

  async extractGoogleCoords(plainText) {
    let parser = new DOMParser()
    let xmlDoc = parser.parseFromString(plainText, "text/xml")
    let googlePolygons = []
    let googleMarkers = []

    if (xmlDoc.documentElement.nodeName == "kml") {

      for (const item of xmlDoc.getElementsByTagName('Placemark') as any) {
        let placeMarkName = item.getElementsByTagName('name')[0].childNodes[0].nodeValue.trim()
        let polygons = item.getElementsByTagName('Polygon')
        let markers = item.getElementsByTagName('Point')

        /** POLYGONS PARSE **/        
        for (const polygon of polygons) {
          let coords = polygon.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let points = coords.split(" ")

          let googlePolygonsPaths = []
          for (const point of points) {
            let coord = point.split(",")
            googlePolygonsPaths.push({ lat: +coord[1], lng: +coord[0] })
          }
          googlePolygons.push(googlePolygonsPaths)
        }

        /** MARKER PARSE **/    
        for (const marker of markers) {
          var coords = marker.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let coord = coords.split(",")
          googleMarkers.push({ lat: +coord[1], lng: +coord[0] })
        }
      }
    } else {
      throw "error while parsing"
    }

    return { markers: googleMarkers, polygons: googlePolygons }

  }

sortie

markers: Array(3)
0: {lat: 37.42390182131783, lng: -122.0914977709329}
...

polygons: Array(1)
0: Array(88)
0: {lat: -37.79825999283025, lng: 144.9165994157198}
...