Javascript Girl
  1. Javascript Girl
  3. Interagir indépendamment avec les couches géojson dans google maps api v3
Intereting Posts
Défilement de fenêtre pour l'URL du chemin de hachage entrant Fichier Dajaxice javascript core ne pas être analysé Erreur de syntaxe Javascript dans le modèle Django lorsque la valeur de la variable est manquante Django jQuery post request JQuery, changement d'image sur le vol stationnaire Comment faire une disposition de table ExtJS ont-ils un pourcentage au lieu de valeurs absolues pour la hauteur et la largeur? Google Chrome copie le chemin CSS dans les outils de développement Analyse du HTML pour obtenir la valeur variable du script Avoir du mal à charger la table après ajax POST Comment changer onClick handler dynamiquement? Cast javascript object to array. Comment? Nombre de caractères dans le paragraphe en utilisant jQuery (* not * for input / textarea) Comment puis-je sélectionner une image? Comment créez-vous 3 divs réglables? En attendant que l'événement soit traité pour continuer à exécuter la fonction qui a déclenché l'événement.

Interagir indépendamment avec les couches géojson dans google maps api v3

J'aimerais charger deux couches géojson sur ma carte et être en mesure de les modéliser indépendamment avec des règles différentes. Je peux afficher mes deux fichiers Geojson avec le code ci-dessous, mais comme ils font partie du même objet map.data, je n'ai pu appliquer que le style universel à tous les deux. Y a-t-il un moyen de contourner cela? En fin de compte (objectif à plus long terme), je voudrais également pouvoir activer ou désactiver les différentes couches avec une case à cocher (je me concentre d'abord sur le style indépendant afin de ne pas trop compliquer le problème) 

function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 12, center: {lat: 39.218509, lng: -94.563703} }); map.data.loadGeoJson('https://url1'); map.data.loadGeoJson('https://url2'); map.data.setStyle(function(feature) { //styling rules here} google.maps.event.addDomListener(window, 'load', initialize);

Toute aide sera la bienvenue. J'ai vu des threads qui semblaient applicables (tels que Google maps GeoJSON – basculer les couches de marqueurs? ) Mais je ne savais pas trop comment l'appliquer spécifiquement à mes fins.

    Donc, je devais faire quelque chose de semblable et j'avais besoin d'ajouter 2 fichiers géojson et de les diffuser différemment. Ce que vous voulez faire, c'est d'initialiser la carte, puis d'ajouter 2 couches différentes. Définissez fondamentalement le style pour les deux. Voici mon code avec des notes. J'ai effectivement utilisé cette fonction Angular dans un service et j'ai réussi une promesse.

    Configurez vos options de carte 

     var mapOptions = { zoom: 4, scrollwheel: false, center: new google.maps.LatLng(40.00, -98), mapTypeId: google.maps.MapTypeId.ROADMAP };

    Définissez votre carte sur une variable. 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    Initialiser 2 variables qui prendront des calques. J'ai fait l'état et le comté. 

     var countyLayer = new google.maps.Data(); var stateLayer = new google.maps.Data();

    Ensuite, chargez les fichiers GeoJson pour chaque couche. 

     countyLayer.loadGeoJson('counties.json'); stateLayer.loadGeoJson('states.json');

    Ensuite, définissez le style pour chaque couche. 

     stateLayer.setStyle({ strokeColor: 'red', strokeWeight: 5 }); countyLayer.setStyle({ strokeColor: 'black', strokeWeight: 1 });

    La dernière étape consiste à définir le calque sur la carte. 

     countyLayer.setMap(map); stateLayer.setMap(map);

    Après cela, j'ai promis de revenir mais vous pouvez simplement retourner l'objet de la carte. Est-ce que cela a du sens / aide à répondre à votre question?

    En outre, dans chaque fonction setStyle (), vous pouvez ajouter un style dynamique à travers des fonctions. Comme ajouter une fonction à fillColor qui changerait la couleur en fonction des données dans le fichier GeoJson.