Styliser un polygone de limite

Sélectionnez une plate-forme : Android iOS JavaScript

Présentation

Pour appliquer un style de remplissage et de trait à un polygone de limite, utilisez FeatureStyleOptions pour définir les attributs de style, et définissez la propriété style d'un calque d'éléments sur une google.maps.FeatureStyleFunction, qui contient la logique d'application de style.

L'exemple de carte suivant illustre la mise en surbrillance d'un polygone de limite pour une région.

Appliquez un style aux éléments cartographiques de limite en définissant la propriété style sur une google.maps.FeatureStyleFunction, qui peut contenir une logique d'application de style. La fonction de style est exécutée sur chaque élément cartographique du calque d'éléments concerné, et elle est appliquée au moment où vous définissez la propriété de style. Pour la modifier, vous devez définir à nouveau la propriété de style.

Pour appliquer un style uniforme à tous les éléments d'un calque d'éléments, définissez la propriété style sur des google.maps.FeatureStyleOptions. Dans ce cas, vous n'avez pas besoin d'utiliser une fonction de style d'éléments cartographiques, puisqu'aucune logique n'est requise.

La fonction de style doit toujours renvoyer des résultats cohérents lorsqu'elle est appliquée sur des éléments cartographiques. Par exemple, si vous souhaitez colorer un ensemble d'éléments de manière aléatoire, la partie aléatoire ne doit pas se situer dans la fonction de style d'éléments cartographiques, car cela générerait des résultats indésirables.

Étant donné que cette fonction s'exécute sur chaque élément d'un calque, il est important de l'optimiser. Pour éviter d'affecter les délais d'affichage :

  • Activez uniquement les calques dont vous avez besoin.
  • Définissez style sur null lorsqu'un calque n'est plus utilisé.

Pour appliquer un style à un polygone dans le calque d'éléments de la localité :

  1. Si ce n'est pas déjà fait, suivez les étapes de la section Commencer pour créer un ID et un style de carte. N'oubliez pas d'activer le calque d'éléments Localité.

  2. Obtenez une référence au calque d'éléments de la localité lors de l'initialisation de la carte.

    featureLayer = map.getFeatureLayer("LOCALITY");

  3. Créez une définition de style de type google.maps.FeatureStyleFunction.

  4. Définissez la propriété style sur le calque d'éléments sur FeatureStyleFunction. L'exemple suivant montre comment définir une fonction pour n'appliquer un style qu'à google.maps.Feature avec un ID de lieu correspondant :

    TypeScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions: google.maps.FeatureStyleOptions = {
  strokeColor: '#810FCB',
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: '#810FCB',
  fillOpacity: 0.5
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options: { feature: { placeId: string; }; }) => {
  if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
    return featureStyleOptions;
  }
};
    index.ts

    JavaScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions = {
  strokeColor: "#810FCB",
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: "#810FCB",
  fillOpacity: 0.5,
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options) => {
  if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
    // Hana, HI
    return featureStyleOptions;
  }
};
    index.js

Si l'ID de lieu est introuvable ou qu'il ne correspond pas au type d'élément sélectionné, le style ne sera pas appliqué. Par exemple, si vous tentez d'appliquer un style à un calque POSTAL_CODE correspondant à l'ID de lieu de "New York", aucun style ne sera appliqué.

Supprimer le style d'un calque

Pour supprimer le style d'un calque, définissez le style sur null :

featureLayer.style = null;

Rechercher des ID de lieu pour cibler des éléments cartographiques

Pour obtenir des ID de lieu pour des régions :

La couverture varie selon les régions. Pour en savoir plus, consultez Couverture des limites Google.

Les noms géographiques sont disponibles à partir de nombreuses sources, comme l'USGS Board on Geographic Names et le US Gazetteer Files aux États-Unis.

Exemple de code complet

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
  });

  //@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY');

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  //@ts-ignore
  featureLayer = map.getFeatureLayer("LOCALITY");

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
      // Hana, HI
      return featureStyleOptions;
    }
  };
}

initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Boundaries Simple</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Essayer avec un exemple