Traiter les événements de clic

Sélectionnez une plate-forme : Android iOS JavaScript

Faites en sorte que les éléments géographiques de données répondent aux événements click et utilisez-les pour modifier leur apparence en fonction de l'interaction de l'utilisateur.

Capture d'écran montrant des données de polygone stylisées.

Écrire un gestionnaire d'événements de clic

Lorsqu'un événement de clic se produit sur un calque d'éléments géographiques, le SDK Maps pour Android transmet un objet FeatureClickEvent au gestionnaire d'événements.

Utilisez la méthode FeatureClickEvent.getFeatures() pour obtenir la liste des éléments géographiques affectés par le clic.

Gérer les événements de calque d'éléments géographiques

Pour gérer les événements au niveau du calque "Ensembles de données", procédez comme suit : Dans cet exemple, vous appliquez un remplissage et une bordure bleus au polygone représentant l'élément géographique sélectionné.

Lorsque vous appelez FeatureLayer.setFeatureStyle(), la fonction de fabrique de styles définit le style de tous les éléments géographiques de l'ensemble de données. Pour mettre à jour le style d'un ensemble de données dans le gestionnaire d'événements, vous devez appeler FeatureLayer.setFeatureStyle() pour définir le style mis à jour sur tous les éléments géographiques de l'ensemble de données.

  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 Ensembles de données.

  2. Assurez-vous que votre classe implémente FeatureLayer.OnFeatureClickListener.

  3. Enregistrez un gestionnaire d'événements pour les événements de clic sur une fonctionnalité en appelant FeatureLayer.addOnFeatureClickListener().

    Kotlin

    private var datasetLayer: FeatureLayer? = null
// The globalid of the clicked dataset feature.
var lastGlobalId: String? = null
    
override fun onMapReady(googleMap: GoogleMap) {
  // Get the DATASET feature layer.
  datasetLayer = googleMap.getFeatureLayer(FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build())
    
  // Register the click event handler for the Datasets layer.
  datasetLayer?.addOnFeatureClickListener(this)
    
  // Apply default style to all features on load to enable clicking.
  styleDatasetsLayer()
}
    
// Define the click event handler to set lastGlobalId to globalid of selected feature.
override fun onFeatureClick(event: FeatureClickEvent) {
  // Get the dataset feature affected by the click.
  val clickFeatures: MutableList<Feature> = event.features
  lastGlobalId = null
  if (clickFeatures.get(0) is DatasetFeature) {
      lastGlobalId = ((clickFeatures.get(0) as DatasetFeature).getDatasetAttributes().get("globalid"))
      // Remember to reset the Style Factory.
      styleDatasetsLayer()
  }
}

    Java

    private FeatureLayer datasetLayer;
// The globalid of the clicked dataset feature.
String lastgobalid = null;
    
@Override
public void onMapReady(GoogleMap map) {
    
  // Get the DATASET feature layer.
  datasetLayer = map.getFeatureLayer(new FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build());
    
  // Register the click event handler for the Datasets layer.
  datasetLayer.addOnFeatureClickListener(this);
    
  // Apply default style to all features on load to enable clicking.
  styleDatasetsLayer();
}
    
@Override
// Define the click event handler.
public void onFeatureClick(FeatureClickEvent event) {
  // Get the dataset feature affected by the click.
  List<Feature> clickFeatures = event.getFeatures();
  lastgobalid = null;
  if (clickFeatures.get(0) instanceof DatasetFeature) {
      lastgobalid = ((DatasetFeature) clickFeatures.get(0)).getDatasetAttributes().get("globalid");
      // Remember to reset the Style Factory.
      styleDatasetsLayer();
  }
}

  4. Appliquez une couleur de remplissage bleue à l'élément géographique sélectionné et vert à tous les autres éléments. Seuls les éléments géographiques visibles sont cliquables.

    Kotlin

    // Set fill and border for all features.
private fun styleDatasetsLayer() {
    // Create the style factory function.
    val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
    
    // Check if the feature is an instance of DatasetFeature.
    if (feature is DatasetFeature) {
      val globalIDs: MutableMap<String, String> = feature.getDatasetAttributes()
      // Determine globalid attribute.
      val globalID = globalIDs!!["globalid"]
      // Set default colors to to green.
      var fillColor = 0x800000ff
      var strokeColor = 0xff0000ff
      if (globalID == lastGlobalId) {
        // Color selected area blue.
        fillColor = 0x8000ff00
        strokeColor = 0xff00ff00
      }
      return@StyleFactory FeatureStyle.Builder()
          .fillColor(fillColor)
          .strokeColor(strokeColor)
          .build()
    }
    return@StyleFactory null
  }
    
  // Apply the style factory function to the dataset feature layer.
  datasetLayer?.setFeatureStyle(styleFactory)
}

    Java

    // Set default green fill and border for all features.
private void styleDatasetsLayer() {
  // Create the style factory function.
  FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
    
  // Check if the feature is an instance of DatasetFeature.
  if (feature instanceof DatasetFeature) {
    
    // Check if "globalid" attribute of feature is the "globalid" of clicked feature.
    Map<String, String> globalIDs = ((DatasetFeature) feature).getDatasetAttributes();
    String globalID = globalIDs.get("globalid");
    // Set default colors to green.
    int fillColor = 0x4000ff00;
    int strokeColor = 0xff00ff00;
    if (Objects.equals(globalID, lastgobalid)) {
      // Color selected area blue.
      fillColor = 0x400000ff;
      strokeColor = 0xff0000ff;
    }
    return new FeatureStyle.Builder()
      .fillColor(fillColor)
      .strokeColor(strokeColor)
      .strokeWidth(2)
      .build();
    }
    return null;
  };
    
  // Apply the style factory function to the feature layer.
  datasetLayer.setFeatureStyle(styleFactory);
}