Stilare le funzionalità dei dati

Seleziona la piattaforma: Android iOS JavaScript

Applica lo stile alle caratteristiche dei dati impostando la proprietà style su un feature layer del set di dati su un google.maps.FeatureStyleFunction, che può contenere la logica di stile, o su un google.maps.FeatureStyleOptions, per applicare uno stile uniforme a tutte le caratteristiche di un layer. Puoi applicare stili alle caratteristiche dei dati per il riempimento (colore, opacità), il tratto (colore, opacità, spessore del tratto) e il diametro (punti). Questa pagina mostra come accedere a un set di dati e personalizzarne gli stili a livello di programmazione e illustra esempi di stili per le funzionalità dei dati basati su geometrie di punti, poligoni e polilinee.

Gli stili basati sui dati per i set di dati eseguono il rendering delle caratteristiche dei dati in base alle coordinate di latitudine e longitudine fornite dal file di dati geospaziali utilizzato per creare il set di dati.

Attributi delle funzionalità dei dati

È possibile accedere a tutti i dati di un set di dati nella funzione di stile della funzionalità. Per ottenere gli attributi delle funzionalità dei dati, recupera prima la funzionalità del set di dati, che contiene tutti i dati all'interno del set di dati, poi recupera l'attributo di dati specifico che ti interessa, come mostrato qui:

TypeScript

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
index.js

Opzioni di stile delle funzionalità

Le opzioni di stile delle funzionalità consentono di definire lo stile di un feature layer di dati, ad esempio lo stile del riempimento e del tratto per i poligoni o il colore e il diametro dei punti. L'esempio seguente mostra le opzioni di stile delle funzionalità, che potrebbero essere applicate direttamente utilizzando la proprietà style per una funzionalità:

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.js

La funzione di stile delle caratteristiche

Utilizza una funzione di stile delle caratteristiche per definire la logica per lo stile delle caratteristiche del set di dati. Per applicare uno stile a una funzionalità, imposta la proprietà style su un google.maps.FeatureStyleFunction. La funzione di stile è il punto in cui definisci la logica per applicare lo stile alle singole funzionalità in un feature layer. Quando featureLayer.style è impostato, la funzione di stile viene eseguita su ogni feature nel feature layer interessato. La funzione viene applicata al momento in cui imposti la proprietà di stile. Per aggiornarlo, devi impostare di nuovo la proprietà di stile. L'esempio seguente mostra una semplice funzione di stile della funzionalità:

TypeScript

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            datasetFeature.datasetAttributes['globalid']
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            datasetFeature.datasetAttributes['globalid']
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};
const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};
const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // Note, 'globalid' is an attribute in this dataset.
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
        return styleClicked;
    }
    if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
        return styleMouseMove;
    }
    return styleDefault;
}
index.js

La funzione di stile deve sempre restituire risultati coerenti quando viene applicata alle funzionalità. Ad esempio, se vuoi colorare in modo casuale un insieme di funzionalità, la parte casuale non deve avvenire nella funzione di stile della funzionalità, in quanto ciò causerebbe risultati indesiderati. Poiché questa funzione viene eseguita su ogni elemento di un livello, l'ottimizzazione è importante. Per evitare di influire sui tempi di rendering, imposta lo stile su null quando un livello non è più in uso.

Esempio di stile dei dati puntuali

Questo esempio mostra un approccio per applicare stili alle caratteristiche dei dati basati sulla geometria dei punti.

Informazioni sul set di dati

Il set di dati utilizzato in questo esempio è il risultato di un sondaggio del 2018 sugli scoiattoli a Central Park, New York. Nel seguente estratto dal file di dati CSV, vediamo che le colonne x e y vengono utilizzate per la geografia; è inclusa una colonna LatLng, ma non viene utilizzata in questo esempio poiché la posizione geografica deve essere rappresentata da due colonne. Il set di dati del censimento degli scoiattoli contiene una bella varietà di punti dati relativi al colore del pelo e al comportamento osservati degli scoiattoli (assicurati di scorrere orizzontalmente per visualizzarli tutti).

X	Y	UniqueSquirrelID	Ettaro	Maiusc	Data	Hectare SquirrelNumber	Età	PrimaryFurColor	HighlightFurColor	CombinationofPrimaryandHighlightColor	Colornotes	Località	Misurazione AboveGroundSighter	SpecificLocation	In esecuzione	All'inseguimento	Arrampicata	Mangiare	Foraggiamento	Altre attività	Kuks	Quaas	Gemiti	Tailflags	Tailtwitches	Approcci	Indifferente	Runsfrom	OtherInteractions	LatLng
-73.9561344937861	40.7940823884086	37F-PM-1014-03	37F	PM	10142018	3				+					falso	falso	falso	falso	falso		falso	falso	falso	falso	falso	falso	falso	falso		POINT (-73.9561344937861 40.7940823884086)
-73.9688574691102	40.7837825208444	21B-AM-1019-04	21 MLD	AM	10192018	4				+					falso	falso	falso	falso	falso		falso	falso	falso	falso	falso	falso	falso	falso		POINT (-73.9688574691102 40.7837825208444)
-73.9742811484852	40.775533619083	11B-PM-1014-08	11B	PM	10142018	8		Grigio		Grigio+		Fuori terra	10		falso	true	falso	falso	falso		falso	falso	falso	falso	falso	falso	falso	falso		POINT (-73.97428114848522 40.775533619083)
-73.9596413903948	40.7903128889029	32E-PM-1017-14	32E	PM	10172018	14	Adulto	Grigio		Grigio+	Nessun elemento selezionato come principale. Grigio selezionato come Momenti salienti. Sono stati apportati aggiustamenti esecutivi.				falso	falso	falso	true	true		falso	falso	falso	falso	falso	falso	falso	true		POINT (-73.9596413903948 40.7903128889029)
-73.9702676472613	40.7762126854894	13E-AM-1017-05	13E	AM	10172018	5	Adulto	Grigio	Cannella	Grigio + Cannella		Fuori terra		sul ceppo d'albero	falso	falso	falso	falso	true		falso	falso	falso	falso	falso	falso	falso	falso		POINT (-73.9702676472613 40.7762126854894)
-73.9683613516225	40.7725908847499	11H-AM-1010-03	11H	AM	10102018	3	Adulto	Cannella	Bianco	Cannella+Bianco					falso	falso	falso	falso	true		falso	falso	falso	falso	true	falso	true	falso		POINT (-73.9683613516225 40.7725908847499)
-73.9541201789795	40.7931811701082	36H-AM-1010-02	36 ore	AM	10102018	2	Adulto	Grigio		Grigio+	poco fuori dall'ettaro	Piano orizzontale	FALSO		falso	falso	falso	falso	true		falso	falso	falso	falso	falso	falso	falso	falso		POINT (-73.9541201789795 40.7931811701082)

Funzionalità di stile dei dati puntuali

Il codice in questo esempio adotta un approccio semplice per definire lo stile del colore di riempimento e del colore del tratto per ogni punto in base all'attributo CombinationofPrimaryandHighlightColor, che combina i colori primari e secondari della pelliccia di ogni scoiattolo.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
index.js

Codice di esempio completo

Visualizza il codice sorgente dell'esempio completo

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend(innerMap);
    });

    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

// Creates a legend for the map.
async function makeLegend(innerMap) {
    let colors = {
        'black': ['black'],
        'cinnamon': ['#8b0000'],
        'cinnamon + gray': ['#8b0000','gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        'gray': ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };

    let legend = document.getElementById('legend');
    legend!.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend!.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        } else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend!.appendChild(wrapper);
    }
}

initMap();
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend(innerMap);
    });
    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}
// Creates a legend for the map.
async function makeLegend(innerMap) {
    let colors = {
        'black': ['black'],
        'cinnamon': ['#8b0000'],
        'cinnamon + gray': ['#8b0000', 'gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        'gray': ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };
    let legend = document.getElementById('legend');
    legend.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        }
        else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend.appendChild(wrapper);
    }
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#attributionLabel {
  background-color: rgba(255, 255, 255, 0.8);
  font-family: 'Roboto' ,'Arial', 'sans-serif';
  font-size: 10px;
  padding: 2px;
  margin: 2px;
}

#legend,
#dataset,
#counter {
  background-color: #e5e5e5;
  width: 15em;

  margin-left: 1em;
  border-radius: 8px;
  font-family: Roboto;
  overflow: hidden;
}

#dataset select {
  border-radius: 0;
  padding: 0.1em;
  border: 1px solid black;
  width: auto;
  margin: 0.5em 1em;
}

.title {
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 0.5em;
  background-color: rgb(66, 133, 244);
  color: white;
  width: 100%;
}

.button {
  font-size: 1.2em;
  margin: 1em;
  background-color: rgb(66, 133, 244);
  color: white;
  padding: 0.5em;
  border-radius: 8px;
}

#legend #container {
  margin: 0.5em;
  display: flex;
}

#legend div .box {
  display: flex;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid;
}

#legend div .legend {
  display: flex;
  padding: 0.3em;
}
style.css

HTML

<html>
    <head>
        <title>Style a point data feature</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            map-id="5cd2c9ca1cf05670"
            center="40.780101, -73.967780"
            zoom="17"
            map-type-control="false"
            street-view-control="false"
            fullscreen-control="false">
            <div id="legend" slot="control-inline-start-block-start"></div>
            <div id="attributionLabel" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>
index.html

Prova campione

JSFiddle.net

Esempio di applicazione di stili ai dati dei poligoni

Questo esempio mostra un approccio per lo stile delle funzionalità dei dati basate sulla geometria dei poligoni.

Informazioni sul set di dati

Il set di dati utilizzato in questo esempio mostra i parchi di New York. Il seguente estratto dal file GeoJSON del set di dati mostra una voce di funzionalità rappresentativa.

{
  "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
          ]
        ]
      ]
    ]
  }
},

Applicare lo stile alle funzionalità dei dati poligonali

Il codice in questo esempio applica una colorazione speciale alle funzionalità dei dati associate a un typecategory di "Non sviluppato" o "Parkway" e colora tutte le altre funzionalità di verde.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];
    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.js

Codice di esempio completo

Visualizza il codice sorgente dell'esempio completo

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

initMap();
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];
    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#attribution {
 background-color: rgba(255, 255, 255, 0.7);
 font-family: "Roboto", "Arial", "sans-serif";
 font-size: 10px;
 padding: 2px;
 margin: 2px;
}
style.css

HTML

<html>
  <head>
    <title>Style a polygon data feature with more detail</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
        <gmp-map center="40.580732, -74.152826" zoom="14" map-id="5cd2c9ca1cf05670">
            <div id="attribution" slot="control-block-end-inline-start">Data source: NYC Open Data</div>
        </gmp-map>
  </body>
</html>
index.html

Prova campione

JSFiddle.net

Esempio di applicazione di stili ai dati polilineari

Questo esempio mostra un approccio per applicare uno stile alle funzionalità dei dati basate sulla geometria polilinea.

Informazioni sul set di dati

Il set di dati utilizzato in questo esempio mostra i ponti nell'area di Seattle. Il seguente estratto dal file GeoJSON del set di dati mostra una voce di funzionalità rappresentativa.

{
  "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
          ]
      ]
  }
},

Applicare lo stile alle funzionalità dei dati polilineari

Il seguente snippet applica lo stesso stile direttamente a tutte le funzionalità dei dati. Poiché non è richiesta alcuna logica, in questo caso non viene utilizzata una funzione di stile della funzionalità.

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.js

Visualizza il codice sorgente dell'esempio completo

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);

    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}

initMap();
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#attribution {
 background-color: rgba(255, 255, 255, 0.7);
 font-family: "Roboto", "Arial", "sans-serif";
 font-size: 10px;
 padding: 2px;
 margin: 2px;
}
style.css

HTML

<html>
    <head>
        <title>Style a polyline data feature</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="47.59, -122.31"
            zoom="14"
            map-id="5cd2c9ca1cf05670"
            map-type-control="false">
            <div id="attribution" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>
index.html

Prova campione

JSFiddle.net