Exemplos de elementos de dados de estilo

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 um estilo a 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 esquilos de 2018 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 é usada neste exemplo porque os conjuntos de dados só aceitam o formato WKT se a coluna tiver o nome WKT. Para mais informações sobre os formatos compatíveis com local, consulte os requisitos de CSV.

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

X S UniqueSquirrelID Hectare Turno Data Número de esquilos por hectare Idade PrimaryFurColor HighlightFurColor CombinationofPrimaryandHighlightColor Observação sobre a cor Local Altura acima do solo quando avistado SpecificLocation Em execução Perseguindo Escalando Comendo Buscando comida Outras atividades Faz "kuk" Faz "quaa" Geme Balança a cauda Contorce a cauda Aproxima-se Indiferente Foge OtherInteractions LatLng
-73.9561344937861 40.7940823884086 37F-PM-1014-03 37F Tarde/noite 10142018 3 + false false false false false false false false false false false false false PONTO (-73.9561344937861 40.7940823884086)
-73.9688574691102 40.7837825208444 21B-AM-1019-04 21B Manhã 10192018 4 + false false false false false false false false false false false false false PONTO (-73.9688574691102 40.7837825208444)
-73.9742811484852 40.775533619083 11B-PM-1014-08 11B Tarde/noite 10142018 8 Cinza Cinza+ Acima do solo 10 false verdadeiro false false false false false false false false false false false 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. false false false verdadeiro verdadeiro false false false false false false false 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 false false false false verdadeiro false false false false false false false false PONTO (-73.9702676472613 40.7762126854894)
-73.9683613516225 40.7725908847499 11H-AM-1010-03 11H Manhã 10102018 3 Adulto Canela Branco Canela+branco false false false false verdadeiro false false false false verdadeiro false verdadeiro false 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 FALSE false false false false verdadeiro false false false false false false false false PONTO (-73.9541201789795 40.7931811701082)

Estilo de elementos de dados de pontos

O código neste exemplo adota a abordagem de estilizar a cor de 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 estilos aos elementos que representam os tipos de parque.

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 representem 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;
};