W sekcji FeatureStyleFunction
definiujesz logikę, która pozwala na stylizowanie wybranych cech w zbiorze danych. zwraca wartość FeatureStyleOptions
zgodnie z tą regułą. Jeśli logika stylizacji nie jest wymagana, możesz użyć FeatureStyleOptions
do bezpośredniego ustawiania stylów. Na tej stronie dowiesz się, jak dodać zbiór danych do mapy i zastosować styl.
Wymagania wstępne
Zanim przejdziesz dalej, musisz mieć identyfikator mapy, styl mapy i identyfikator zbioru danych.
Powiązanie identyfikatora zbioru danych ze stylem mapy
Aby powiązać zbiór danych ze stylem mapy, którego używasz:
- W konsoli Google Cloud otwórz stronę Zbiory danych.
- Kliknij nazwę zbioru danych. Pojawi się strona Szczegóły zbioru danych.
- Kliknij kartę Podgląd.
- Przewiń do sekcji DODAJ STYL MAPY i kliknij.
- Kliknij pola wyboru obok stylów mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.
Używanie prostych reguł stylów
Najprostszym sposobem stylizowania elementów jest przekazanie atrybutów stylizacji, takich jak kolor, krycie i grubość linii, za pomocą obiektu FeatureStyleOptions
. Zastosuj opcje stylów obiektów bezpośrednio do warstwy obiektu w zbiorze danych lub użyj ich w połączeniu z elementem FeatureStyleFunction
.
TypeScript
const styleOptions = { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, };
JavaScript
const styleOptions = { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, };
Używanie deklaratywnych reguł stylu
Użyj FeatureStyleFunction
, aby deklaratywnie ustawić reguły stylizacji i zastosować je do całego zbioru danych. Zastosuj FeatureStyleOptions
do funkcji na podstawie wartości atrybutów zbioru danych. Możesz też zwrócić null
z funkcji styl funkcji, na przykład jeśli chcesz, aby podzbiór funkcji pozostał niewidoczny. Ten przykład pokazuje funkcję stylu, która nadaje kolory zestawowi punktów na podstawie atrybutów danych:
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; } }
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; } }
Zastosuj styl do warstwy cech zbioru danych
Aby zastosować style w funkcji stylu funkcji:
- Pobierz warstwę cech zbioru danych, wywołując funkcję
map.getDatasetFeatureLayer()
, podając identyfikator zbioru danych. - Zastosuj styl, ustawiając opcje stylu cech (np.
styleOptions
) lub funkcję (np.setStyle
) na warstwie zbioru danych.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
Usuwanie stylizacji z warstwy
Aby usunąć stylizację z warstwy, ustaw wartość style
na null
:
featureLayer.style = null;
Możesz też zwrócić null
z funkcji stylu funkcji, na przykład jeśli chcesz, aby podzbiór funkcji pozostał niewidoczny.
Dodawanie tekstu informującego o źródle
Podczas wyświetlania przesłanych zbiorów danych w Mapach Google na mapie muszą być widoczne wymagane informacje. Tekst nie może zasłaniać ani zasłaniać logo Google.
Jednym ze sposobów dodawania tekstu z przypisaniem autorstwa jest użycie elementów sterujących niestandardowych do umieszczania dowolnego kodu HTML w standardowych miejscach na mapie. Poniższy przykład kodu pokazuje funkcję, która programowo tworzy takie kontrolki niestandardowe:
TypeScript
function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; }
JavaScript
function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; }
Po zdefiniowaniu elementu sterującego możesz go dodać do mapy podczas inicjalizacji:
TypeScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
JavaScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);