web-dev-qa-db-fra.com

Vous chargez un fichier .kml local à l'aide de Google Maps?

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

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

Cela ne fonctionne pas (rien ne se charge).

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 le charger 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 type MIME correct au fichier de configuration de mon serveur d'applications:

<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 il ne se charge toujours pas.

J'ai trouvé cela dans google's 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'essaye de faire n'est pas possible sans servir le kml à partir d'une URL accessible au public ... à moins que quelqu'un puisse prouver le contraire

gisgoogle-maps-api-3kmlkmz
51
hddd

Le KML n'est pas accessible car il est sur votre machine locale et Google ne peut pas y accéder car il ne sait pas comment se rendre à localhost: 8080

55
Martin Murphy

Malheureusement, vous ne pouvez pas utiliser "localhost". Vous avez deux choix:

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

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

39
capdragon

Ce site Web, display-kml.appspot.com , nécessite que vous copiez/collez l'intégralité du fichier KML dans le site Web. Vous pouvez également utiliser Dropbox pour héberger le fichier KML à l'aide de votre dossier public. Dans le dossier Dropbox public, il y a un menu contextuel avec clic droit qui vous permet de copier l'URL.

Le site Web d'Appspot a toujours été instable. En janvier 2019, le site Web semble fonctionner.

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

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

Jetez un œil au 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éation marqueur, polygone , ils sont tous analyse et rendu côté navigateur .

Comme vous pouvez le voir dans le prochain journal réseau, la classe KmlLayer envoie l'URL source à Google Server pour l'analyser et (faire quelque chose à leur fin) et envoyer l'analyse retournez à votre navigateur pour le rendre.

//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 mentionné ci-dessus, il serait préférable d'analyser KML par vous-même .

[~ # ~] mise à jour [~ # ~]

Voici le code de l'analyseur KML compact. Ceci uniquement pour le marqueur et le polygone google.maps.

html

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

script, j'ai utilisé TypeScript mais c'est assez pareil 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}
...
1
John