web-dev-qa-db-fra.com

Comment supprimer des données d'une couche de données Google Maps?

Je vois que Google Maps supporte geojson. En regardant la documentation ici: https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson

Étant donné le dernier exemple avec "Google", comment puis-je faire en sorte que je puisse cliquer sur un bouton pour ajouter un nouveau calque Geojson et un autre bouton pour basculer/supprimer le "Google" ou même une lettre? Il me semble que map.data semble être une couche unique et non pas plusieurs couches.

javascriptgoogle-maps-api-3
18
Rolando

Vous avez raison de dire que la couche de données est une couche unique. Toutefois, si vous récupérez manuellement GeoJSON et utilisez la fonction addGeoJson au lieu de loadGeoJson, vous obtiendrez les fonctionnalités ajoutées. Vous pouvez les supprimer plus tard.

Donc au lieu de

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

Vous pouvez faire quelque chose comme ceci (cet exemple utilise jQuery pour obtenir les données et suppose qu’il existe un bouton avec l’ID removeBtn):

// Load the GeoJSON manually (works cross-Origin since google sets the required HTTP headers)
$.getJSON('https://storage.googleapis.com/maps-devrel/google.json', function (data) {
  var features = map.data.addGeoJson(data);

  // Setup event handler to remove GeoJSON features
  google.maps.event.addDomListener(document.getElementById('removeBtn'), 'click', function () {
    for (var i = 0; i < features.length; i++)
      map.data.remove(features[i]);
  }); 
});

( Voir ce JSbin pour un exemple de travail avec lequel vous pouvez jouer )

Dans des circonstances plus complexes, vous devez probablement savoir quelle source de données a été chargée par l'utilisateur et quelles fonctionnalités ont été créées pour pouvoir les supprimer à la demande.

28
mensi

Cela a fonctionné pour moi:

map.data.forEach(function(feature) {
    // filter...
    map.data.remove(feature);
});
19
Irwin

Alors que map.data est conçu comme un espace réservé pour le cas courant d'une source de données unique, vous pouvez en avoir plusieurs et toujours utiliser addGeoJSon en utilisant quelque chose comme:

// load data - do the same for data2, data3 or whatever
data1 = new google.maps.Data();
data1.loadGeoJson(url1);

// create some layer control logic for turning on data1
data1.setMap(map) // or restyle or whatever

// turn off data1 and turn on data2
data1.setMap(null) // hides it
data2.setMap(map) // displays data2
16
jlivni

Pour faire suite à la réponse de @ mensi, il peut être important de garder une trace des différents ensembles d’entités chargées à partir de différentes sources de données. Vous pouvez le faire en ajoutant une propriété à chaque fonctionnalité:

feature.setProperty('kind', 'region');
feature.setProperty('kind', 'lake');

Cependant, il peut être plus facile de créer plusieurs couches de données. Une carte Google par défaut commence avec une seule couche de données, mais vous n'êtes pas limité à cela. Tu peux faire:

var datalayer = new google.maps.Data({ map: mymap });

(Il est important de définir une option map, sinon votre couche de données n'apparaîtra pas.)

De cette façon, il est plus facile de regrouper les entités par couche et d'activer ou de désactiver des couches entières.

0
Alexander van Oostenrijk