FeatureStyleFunction
,
to definicję pozwalającą selektywnie określać styl cech w zbiorze danych. it
zwraca FeatureStyleOptions
opartych na tej logice. Jeśli logika stylu nie jest wymagana, możesz użyć atrybutu FeatureStyleOptions
aby bezpośrednio ustawiać style. Na tej stronie dowiesz się, jak dodać zbiór danych do mapy.
zastosować styl.
Wymagania wstępne
Zanim przejdziesz dalej, przygotuj identyfikator i styl mapy oraz identyfikator zbioru danych.
Powiąż identyfikator zbioru danych ze stylem mapy
Aby powiązać zbiór danych ze stylem mapy, wykonaj te czynności przy użyciu:
- 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 opcji DODAJ STYL MAPY i kliknij.
- Kliknij pola wyboru Style mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.
Używanie prostych reguł stylu
Najprostszym sposobem określenia stylu cech jest przekazanie atrybutu FeatureStyleOptions
, aby określić
atrybutów stylu, takich jak kolor, nieprzezroczystość i szerokość linii. Zastosuj styl elementu
bezpośrednio do warstwy cech zbioru danych lub używać ich w połączeniu z
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żywaj reguł stylu deklaratywnego
Za pomocą elementu FeatureStyleFunction
możesz deklaratywnie określać i stosować reguły stylu
w całym zbiorze danych. Zastosuj atrybut FeatureStyleOptions
do funkcji na podstawie
wartości atrybutów zbioru danych. Możesz też zwrócić null
ze stylu elementów
, na przykład jeśli chcesz, aby podzbiór cech był niewidoczny. Ten
przykład pokazuje funkcję stylu, która koloruje zbiór punktów na podstawie danych
atrybuty:
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 cech:
- Pobierz warstwę cech zbioru danych, wywołując funkcję
map.getDatasetFeatureLayer()
, i przekazywać identyfikator zbioru danych. - Zastosuj styl, ustawiając opcje stylu elementu (np.
styleOptions
) lub funkcji (np.setStyle
) w warstwie zbioru danych.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
Usuwanie stylu z warstwy
Aby usunąć styl z warstwy, ustaw style
na null
:
featureLayer.style = null;
Możesz również zwrócić null
z funkcji stylu cech, na przykład
chcesz, aby podzbiór cech pozostała niewidoczny.
Dodaj tekst źródła
Podczas wyświetlania przesłanych plików mapa musi zawierać wszystkie wymagane informacje o autorze w zbiorach danych w Mapach Google. Tekst informacji o autorze nie może zasłaniać ani zakłócać Logo Google.
Jednym ze sposobów dodania tekstu informacji o autorze jest użycie niestandardowych ustawień. w celu umieszczenia dowolnego kodu HTML w standardowych pozycjach na mapie. Następujący kod: poniżej pokazujemy funkcję, która programowo tworzy taki element sterujący:
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 inicjowania jak tutaj:
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);