Exemplos de elementos de dados de estilo

Selecione a plataforma: Android iOS JavaScript

Nesta página, mostramos como acessar programaticamente um conjunto de dados e estilizar os elementos dele, e vamos analisar exemplos de estilo para elementos de dados com base em geometrias de ponto, polígono e polilinha.

O estilo baseado em dados para conjuntos de dados renderiza elementos de dados com base nas coordenadas de latitude e longitude indicadas pelo arquivo de dados geoespaciais usado para criar o conjunto.

Exemplo de estilo de dados do ponto

Neste exemplo, mostramos uma abordagem para estilizar elementos de dados com base em geometria.

Aplique o estilo aos elementos que representam as cores do esquilo.

Sobre o conjunto de dados

O conjunto de dados usado neste exemplo é o resultado de uma pesquisa de 2018 sobre esquilos no Central Park, em Nova York. No trecho a seguir do arquivo de dados CSV, as colunas x e y são usadas para localização geográfica. Uma coluna LatLng está incluída, mas não é usada neste exemplo porque os conjuntos de dados só aceitam o formato WKT se a coluna for nomeada como WKT. Para mais informações sobre os formatos compatíveis para localização, consulte os requisitos de CSV.

O conjunto de dados do censo de esquilos contém vários pontos de dados diferentes relacionados à cor do pelo e ao comportamento observados dos esquilos. Role horizontalmente para mostrar tudo.

X Y ID exclusivo do esquilo Hectare Turno Data Número de esquilos por hectare Idade Cor principal do pelo Cor secundária do pelo Combinação de cores principal e secundária do pelo Observação sobre a cor Local Altura acima do solo quando avistado Local específico Correndo Perseguindo Escalando Comendo Buscando comida Outras atividades Faz "kuk" Faz "quaa" Geme Balança a cauda Contorce a cauda Aproxima-se Indiferente Foge Outras interações Latitude/longitude
-73.9561344937861 40.7940823884086 37F-PM-1014-03 37F Tarde/noite 10142018 3 + falso falso falso falso falso falso falso falso falso falso falso falso falso PONTO (-73.9561344937861 40.7940823884086)
-73.9688574691102 40.7837825208444 21B-AM-1019-04 21B Manhã 10192018 4 + falso falso falso falso falso falso falso falso falso falso falso falso falso PONTO (-73.9688574691102 40.7837825208444)
-73.9742811484852 40.775533619083 11B-PM-1014-08 11B Tarde/noite 10142018 8 Cinza Cinza+ Acima do solo 10 falso verdadeiro falso falso falso falso falso falso falso falso falso falso falso PONTO (-73.97428114848522 40.775533619083)
-73.9596413903948 40.7903128889029 32E-PM-1017-14 32E Tarde/noite 10172018 14 Adulto Cinza Cinza+ Nenhuma cor selecionada como principal. Cinza selecionada como cor secundária. Decisão executiva. falso falso falso verdadeiro verdadeiro falso falso falso falso falso falso falso verdadeiro PONTO (-73.9596413903948 40.7903128889029)
-73.9702676472613 40.7762126854894 13E-AM-1017-05 13E Manhã 10172018 5 Adulto Cinza Canela Cinza+canela Acima do solo Em um toco de árvore falso falso falso falso verdadeiro falso falso falso falso falso falso falso falso PONTO (-73.9702676472613 40.7762126854894)
-73.9683613516225 40.7725908847499 11H-AM-1010-03 11H Manhã 10102018 3 Adulto Canela Branco Canela+branco falso falso falso falso verdadeiro falso falso falso falso verdadeiro falso verdadeiro falso PONTO (-73.9683613516225 40.7725908847499)
-73.9541201789795 40.7931811701082 36H-AM-1010-02 36H Manhã 10102018 2 Adulto Cinza Cinza+ Um pouco fora do hectare No nível do solo FALSO falso falso falso falso verdadeiro falso falso falso falso falso falso falso falso PONTO (-73.9541201789795 40.7931811701082)

Estilo de elementos de dados de pontos

O código neste exemplo usa a abordagem de estilizar a cor do preenchimento e do traço para cada ponto com base no atributo CombinationofPrimaryandHighlightColor, que combina as cores de pelo primária e secundária para cada esquilo.

Swift

let mapView = GMSMapView(frame: .zero, mapID: GMSMapID(identifier: "YOUR_MAP_ID"), camera: GMSCameraPosition(latitude: 40.7, longitude: -74.0, zoom: 12))

let layer = mapView.datasetFeatureLayer(of: "YOUR_DATASET_ID")

// Define a point style with fill and radius.
// Apply the style to the datasets features.
layer.style = { feature in
    switch(feature.datasetAttributes["CombinationofPrimaryandHighlightColor"]){
      case "Black+"  :
        let style = MutableFeatureStyle()
        style.fillColor = .black;
        style.pointRadius = 8;
        return style
      case "Cinnamon+"  :
        let style = MutableFeatureStyle()
        style.fillColor = UIColor(red: 139/255, green: 0, blue: 0, alpha: 1);
        style.pointRadius = 8;
        return style
      ...
      default :
        let style = MutableFeatureStyle()
        style.fillColor = .yellow;
        style.pointRadius = 8;
        return style
    }
}

Objective-C

GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:[GMSMapID mapIDWithIdentifier:@"MAP_ID"] camera:[GMSCameraPosition cameraWithLatitude: 40.7 longitude: -74.0 zoom:12]];

GMSDatasetFeatureLayer *layer = [mapView datasetFeatureLayerOfDatasetID:@"YOUR_DATASET_ID"];

// Define a point style with fill and radius.
// Apply the style to the datasets features.
layer.style = ^(GMSDatasetFeature *feature) {
  NSString *attrib = feature.datasetAttributes[@"CombinationofPrimaryandHighlightColor"];
  if ([attrib isEqualToString:@"Black+"])  {
    GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
    style.fillColor = [UIColor blackColor];
    style.pointRadius = 8;
    return style;
  } else if([attrib isEqualToString:@"Cinnamon+"]) {
    GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
    style.fillColor = [UIColor colorWithRed:139.0f/255.0f
                                      green:0.0f
                                        blue:0.0f
                                      alpha:1.0f];
    style.pointRadius = 8;
    return style;
  }
  ...
  else {
    GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
    style.fillColor = [UIColor yellowColor];
    style.pointRadius = 8;
    return style;
  }
};

Exemplo de estilo de dados em polígonos

Neste exemplo, mostramos uma abordagem para estilizar elementos de dados com base em geometria de polígono.

Aplique o estilo aos elementos que representam tipos de parques.

Sobre o conjunto de dados

O conjunto de dados usado neste exemplo mostra os parques na cidade de Nova York. O trecho a seguir do arquivo GeoJSON do conjunto de dados representa uma entrada de elemento representativo.

{
  "type": "Feature",
  "properties": {
    "jurisdiction": "DPR",
    "mapped": "False",
    "zipcode": "11356",
    "acres": "0.05",
    "location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.",
    "nys_assembly": "27",
    "councildistrict": "19",
    "url": "http://www.nycgovparks.org/parks/Q042/",
    "typecategory": "Triangle/Plaza",
    "us_congress": "14",
    "eapply": "Poppenhusen Park",
    "parentid": "Q-07",
    "gispropnum": "Q042",
    "retired": "false",
    "communityboard": "407",
    "objectid": "6248",
    "globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5",
    "name311": "Poppenhusen Park",
    "department": "Q-07",
    "pip_ratable": "true",
    "subcategory": "Sitting Area/Triangle/Mall",
    "precinct": "109",
    "permit": "true",
    "acquisitiondate": null,
    "omppropid": "Q042",
    "gisobjid": "100000301",
    "signname": "Poppenhusen Park",
    "address": null,
    "permitparent": "Q-07",
    "class": "PARK",
    "nys_senate": "11",
    "permitdistrict": "Q-07",
    "borough": "Q",
    "waterfront": "false"
  },
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [
            -73.84575702371716,
            40.78796240884273
          ],
          [
            -73.84593393292693,
            40.78796857347548
          ],
          [
            -73.84577256469657,
            40.787651355629556
          ],
          [
            -73.84575702371716,
            40.78796240884273
          ]
        ]
      ]
    ]
  }
},

Estilo dos elementos de dados de polígonos

O código neste exemplo aplica uma cor especial aos elementos de dados associados a uma typecategory "Undeveloped" ou "Parkway" e colore todos os outros elementos verdes.

Swift

let mapView = GMSMapView(frame: .zero, mapID: GMSMapID(identifier: "YOUR_MAP_ID"), camera: GMSCameraPosition(latitude: 40.7, longitude: -74.0, zoom: 12))

let layer = mapView.datasetFeatureLayer(of: "YOUR_DATASET_ID")

// Define a polygon style with fill and stroke.
// Apply the style to the datasets features.
layer.style = { feature in
  switch(feature.datasetAttributes["typecategory"]){
    case "Undeveloped"  :
      let style = MutableFeatureStyle()
      style.fillColor = .blue.withAlphaComponent(0.3);
      style.strokeColor = .blue;
      style.strokeWidth = 2.0;
      return style
    case "Parkway"  :
      let style = MutableFeatureStyle()
      style.fillColor = .red.withAlphaComponent(0.3);
      style.strokeColor = .red;
      style.strokeWidth = 2.0;
      return style
    default :
      let style = MutableFeatureStyle()
      style.fillColor = .green.withAlphaComponent(0.3);
      style.strokeColor = .green;
      style.strokeWidth = 2.0;
      return style
  }
}

Objective-C

GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:[GMSMapID mapIDWithIdentifier:@"MAP_ID"] camera:[GMSCameraPosition cameraWithLatitude: 40.7 longitude: -74.0 zoom:12]];

GMSDatasetFeatureLayer *layer = [mapView datasetFeatureLayerOfDatasetID:@"YOUR_DATASET_ID"];

// Define a polygon style with fill and stroke.
// Apply the style to the datasets features.
layer.style = ^(GMSDatasetFeature *feature) {
  NSString *attrib = feature.datasetAttributes[@"typecategory"];
  if ([attrib isEqualToString:@"Undeveloped"]) {
        GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
        style.fillColor = [[UIColor blueColor] colorWithAlphaComponent:0.3];
        style.strokeColor = [UIColor blueColor];
        style.strokeWidth = 2.0;
        return style;
  } else if([attrib isEqualToString:@"Parkway"]) {
        GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
        style.fillColor = [[UIColor redColor] colorWithAlphaComponent:0.3];
        style.strokeColor = [UIColor redColor];
        style.strokeWidth = 2.0;
        return style;
  } else {
        GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
        style.fillColor = [[UIColor greenColor] colorWithAlphaComponent:0.3];
        style.strokeColor = [UIColor greenColor];
        style.strokeWidth = 2.0;
        return style;
    }
  };

Exemplo de estilo de dados de polilinha

Neste exemplo, mostramos uma abordagem para estilizar elementos de dados baseados em geometria de polilinha.

Aplique estilos a elementos que representam polilinhas.

Sobre o conjunto de dados

O conjunto de dados usado neste exemplo mostra pontes na área de Seattle. O trecho a seguir do arquivo GeoJSON do conjunto de dados representa uma entrada de elemento representativo.

{
  "type": "Feature",
  "properties": {
      "OBJECTID": 1,
      "COMPTYPE": 66,
      "COMPKEY": 515774,
      "HANSEGKEY": 489781,
      "UNITID": "BRG-935",
      "UNITTYPE": " ",
      "BRGUNITID": "BRG-935",
      "UNITDESC_BRG": "YALE AVE BR REV LANE OC                                                                                                                                                                                                                                        ",
      "UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB                                                                                                                                                                                                                    ",
      "INSTDATE": null,
      "EXPDATE": null,
      "STATUS": " ",
      "STATUSDT": null,
      "CONDITION": " ",
      "CONDDT": null,
      "OWN": " ",
      "LSTVERIFY": null,
      "MAINTBY": " ",
      "ADDBY": "GARCIAA",
      "ADDDTTM": "2010-01-21T00:00:00Z",
      "MODBY": null,
      "MODDTTM": null,
      "BR_NBR": 935,
      "BR_CODE": " 935",
      "BR_TYPE": "ST",
      "BR_NAME": "YALE AVE BR REV LANE OC",
      "BR_FACILITIES": "YALE AVE-SR 5 ON RAMP",
      "BR_FEATURES": "SR 5 REV LANE",
      "BR_RATING": 0,
      "BR_INSET": 1,
      "BR_GEO": "DT",
      "BR_OWNER": "DOT",
      "BR_OWNER_NAME": "State of Washington",
      "GEOBASID": 0,
      "XGEOBASID": 0,
      "GISSEGKEY": 489781,
      "EARTHQUAKE_RESPONSE_TEAM": " ",
      "SHAPE_Length": 220.11891836147655
  },
  "geometry": {
      "type": "LineString",
      "coordinates": [
          [
              -122.329201929090928,
              47.616910448708538
          ],
          [
              -122.329206483407461,
              47.616976719821004
          ],
          [
              -122.32921802149356,
              47.617042137515213
          ],
          [
              -122.329236413912909,
              47.617105967923777
          ],
          [
              -122.329261454336034,
              47.617167494985758
          ],
          [
              -122.329292861855023,
              47.617226028479571
          ],
          [
              -122.329330284134699,
              47.617280911766009
          ],
          [
              -122.329373301365223,
              47.617331529154569
          ],
          [
              -122.329421430971635,
              47.617377312810319
          ],
          [
              -122.329474133027375,
              47.617417749124023
          ],
          [
              -122.32953081631139,
              47.617452384473893
          ]
      ]
  }
},

Estilo dos elementos de dados de polilinha

O snippet a seguir aplica o mesmo estilo diretamente a todos os elementos de dados.

Swift

// Define a style with green fill and stroke.
// Apply the style to the datasets features.
layer.style = { feature in
  let style = MutableFeatureStyle()
  style.fillColor = .green.withAlphaComponent(0.5);
  style.strokeColor = [UIColor greenColor];
  style.strokeWidth = 2.0;
  return style
}

Objective-C

// Define a style with green fill and stroke.
// Apply the style to the datasets features.
layer.style = ^(GMSDatasetFeature *feature) {
  GMSMutableFeatureStyle *style = [GMSMutableFeatureStyle style];
  style.fillColor = [[UIColor greenColor] colorWithAlphaComponent:0.5];
  style.strokeColor = [UIColor greenColor];
  style.strokeWidth = 2.0;
  return style;
};