Esta página foi traduzida pela API Cloud Translation.

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 estilo aos elementos que representam as cores dos esquilos.

Sobre o conjunto de dados

O conjunto de dados usado neste exemplo é o resultado de uma pesquisa de 2018 sobre esquilos (em inglês) no Central Park, em Nova York. No seguinte trecho 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 é aplicada neste exemplo porque os conjuntos de dados só são compatíveis com o formato WKT se a coluna for chamada WKT. Para mais informações sobre os formatos compatíveis para local, consulte 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	Faz "kuk"	Faz "quaa"	Geme	Balança a cauda	Contorce a cauda	Aproxima-se	Indiferente	Foge	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 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 estilo 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;
};

Exemplos de elementos de dados de estilo Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Exemplo de estilo de dados do ponto

Sobre o conjunto de dados

Estilo de elementos de dados de pontos

Swift

Objective-C

Exemplo de estilo de dados em polígonos

Sobre o conjunto de dados

Estilo dos elementos de dados de polígonos

Swift

Objective-C

Exemplo de estilo de dados de polilinha

Sobre o conjunto de dados

Estilo dos elementos de dados de polilinha

Swift

Objective-C

Exemplos de elementos de dados de estilo