Styliser un polygone de limite

Présentation

Vous pouvez styliser le remplissage et le trait d'un polygone de délimitation en définissant la propriété style d'un calque d'éléments géographiques sur une google.maps.FeatureStyleFunction, que vous pouvez utiliser pour définir des attributs de style pour la couleur, l'opacité et l'épaisseur du trait.

Pour styliser un polygone, définissez la propriété style sur google.maps.FeatureStyleFunction. La fonction de style vous permet de définir une logique pour styliser des polygones individuels sur un calque d'éléments géographiques. Lorsque featureLayer.style est défini, la fonction de style est exécutée sur chaque élément géographique du calque d'élément concerné. La fonction est appliquée au moment où vous définissez la propriété de style. Pour le modifier, vous devez définir la propriété "style" à nouveau.

La fonction de style doit toujours renvoyer des résultats cohérents lorsqu'elle est appliquée sur des éléments géographiques. 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 de caractéristiques, car cela générerait des résultats indésirables.

Étant donné que cette fonction s'exécute sur chaque caractéristique 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é, procédez comme suit :

  1. Si ce n'est pas déjà fait, suivez les étapes de la section Premiers pas 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 géographiques 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 de l'élément 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 ou est introuvable, ou s'il ne correspond pas au type d'élément sélectionné, le style n'est pas appliqué. Par exemple, si vous tentez de styliser 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 géographiques

Pour obtenir les données de région :

Utilisez le lecteur de couverture régionale pour afficher les limites Google disponibles pour toutes les régions compatibles.

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;

function initMap() {
  map = new google.maps.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;
    }
  };

}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

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

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    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;
    }
  };
}

window.initMap = 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Essayer l'exemple