Warstwa danych Map Google to kontener na dowolne dane geoprzestrzenne. Warstwa danych może służyć do przechowywania danych niestandardowych lub wyświetlania danych GeoJSON na mapie Google.
Opis
Aby dowiedzieć się więcej o warstwie danych, obejrzyj ten film o DevBytes.
Za pomocą interfejsu Maps JavaScript API możesz zaznaczać mapy przy użyciu różnych nakładek, takich jak znaczniki, linie łamane, wielokąty itp. Każda z tych adnotacji łączy informacje o stylu z danymi o lokalizacji. Klasa google.maps.Data to kontener na dowolne dane geoprzestrzenne. Zamiast dodawać te nakładki, możesz użyć warstwy danych, aby dodać do mapy dowolne dane geograficzne. Jeśli dane zawierają elementy geometryczne, np. punkty, linie czy wielokąty, interfejs API wyrenderuje je domyślnie jako znaczniki, linie łamane i wielokąty. Możesz określić styl tych obiektów tak samo jak w przypadku zwykłej nakładki albo zastosować reguły stylu na podstawie innych właściwości zawartych w zbiorze danych.
Zajęcia google.maps.Data umożliwiają:
- Narysuj na mapie wielokąty.
- Dodawanie do mapy danych GeoJSON
GeoJSON to standard danych geoprzestrzennych w internecie. KlasaDatapodąża za strukturą GeoJSON w swojej reprezentacji danych i ułatwia wyświetlanie danych GeoJSON. Użyj metodyloadGeoJson(), aby łatwo importować dane GeoJSON i wyświetlić punkty, ciągi znaków linii i wielokąty. - Użyj funkcji
google.maps.Data, aby modelować dowolne dane.
Z większością elementów świata rzeczywistego są powiązane inne właściwości. Na przykład sklepy mają godziny otwarcia, ruch na drogach jest płynny, a każda drużyna przewodniczących ma murawę, na której sprzedaje się ciasteczka.google.maps.Dataumożliwia modelowanie tych właściwości i dostosowywanie stylu danych. - Wybierz sposób prezentowania danych i na bieżąco zmieniaj zdanie.
Warstwa danych pozwala podejmować decyzje dotyczące wizualizacji i interakcji danych. Na przykład na mapie sklepów osiedlowych możesz wyświetlić tylko te sklepy, w których można kupić bilety transportu publicznego.
Rysuj wielokąt
Klasa Data.Polygon obsługuje zwijanie wielokątów. Możesz do niej przekazać tablicę jednego lub kilku pierścieni liniowych zdefiniowanych jako współrzędne szerokości i długości geograficznej. Pierwszy pierścień liniowy wyznacza jego zewnętrzną granicę. Jeśli przekazujesz więcej niż jeden pierścień liniowy, drugi i kolejne pierścienie są używane do określania ścieżek wewnętrznych (otworów) w wieloosobie.
Poniższy przykład pokazuje utworzenie prostokątnego wielokąta z dwoma otworami:
TypeScript
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 6,
center: { lat: -33.872, lng: 151.252 },
}
);
// Define the LatLng coordinates for the outer path.
const outerCoords = [
{ lat: -32.364, lng: 153.207 }, // north west
{ lat: -35.364, lng: 153.207 }, // south west
{ lat: -35.364, lng: 158.207 }, // south east
{ lat: -32.364, lng: 158.207 }, // north east
];
// Define the LatLng coordinates for an inner path.
const innerCoords1 = [
{ lat: -33.364, lng: 154.207 },
{ lat: -34.364, lng: 154.207 },
{ lat: -34.364, lng: 155.207 },
{ lat: -33.364, lng: 155.207 },
];
// Define the LatLng coordinates for another inner path.
const innerCoords2 = [
{ lat: -33.364, lng: 156.207 },
{ lat: -34.364, lng: 156.207 },
{ lat: -34.364, lng: 157.207 },
{ lat: -33.364, lng: 157.207 },
];
map.data.add({
geometry: new google.maps.Data.Polygon([
outerCoords,
innerCoords1,
innerCoords2,
]),
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: { lat: -33.872, lng: 151.252 },
});
// Define the LatLng coordinates for the outer path.
const outerCoords = [
{ lat: -32.364, lng: 153.207 },
{ lat: -35.364, lng: 153.207 },
{ lat: -35.364, lng: 158.207 },
{ lat: -32.364, lng: 158.207 }, // north east
];
// Define the LatLng coordinates for an inner path.
const innerCoords1 = [
{ lat: -33.364, lng: 154.207 },
{ lat: -34.364, lng: 154.207 },
{ lat: -34.364, lng: 155.207 },
{ lat: -33.364, lng: 155.207 },
];
// Define the LatLng coordinates for another inner path.
const innerCoords2 = [
{ lat: -33.364, lng: 156.207 },
{ lat: -34.364, lng: 156.207 },
{ lat: -34.364, lng: 157.207 },
{ lat: -33.364, lng: 157.207 },
];
map.data.add({
geometry: new google.maps.Data.Polygon([
outerCoords,
innerCoords1,
innerCoords2,
]),
});
}
window.initMap = initMap;
Wczytaj GeoJSON
GeoJSON to popularny standard udostępniania danych geoprzestrzennych w internecie. Jest lekki i czytelny dla człowieka, dzięki czemu idealnie nadaje się do udostępniania i współpracy. Dzięki warstwie danych możesz dodawać dane GeoJSON do mapy Google w jednym wierszu kodu.
map.data.loadGeoJson('google.json');
Każda mapa ma obiekt map.data, który działa jako warstwa danych dla dowolnych danych geoprzestrzennych, w tym GeoJSON. Aby wczytać i wyświetlić plik GeoJSON, wywołaj metodę loadGeoJSON() obiektu data. Z przykładu poniżej dowiesz się, jak dodać mapę i wczytać zewnętrzne dane GeoJSON.
TypeScript
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json",
);
}
window.initMap = initMap;
Wypróbuj fragment
Przykładowy plik GeoJSON
Większość przykładów na tej stronie używa typowego pliku GeoJSON. Ten plik definiuje 6 znaków w polu „Google” jako wielokąty nad Australią. Możesz skopiować lub zmodyfikować ten plik podczas testowania warstwy danych.
Uwaga: aby można było wczytać plik json z innej domeny, musi ona mieć włączone Udostępnianie zasobów między domenami.
Pełny tekst pliku można zobaczyć poniżej, rozwijając małą strzałkę obok słowa google.json.
google.json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
[118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
[121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
[124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
[121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
[122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
[120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
[123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
[127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
[126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
[129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
],
[
[128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
[127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
[131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
[134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
[132.71, -25.64], [131.87, -25.76]
],
[
[133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
[132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
[135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
[137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
[136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
[137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
[139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
[138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
],
[
[137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
[136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
[145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
[142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
[145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
[144.31, -28.26], [144.14, -27.41]
],
[
[144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
[145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
]
]
}
}
]
}
Dane GeoJSON dotyczące stylu
Aby określić, jak mają wyglądać dane, użyj metody Data.setStyle(). Metoda setStyle() przyjmuje literał obiektu StyleOptions lub funkcję, która oblicza styl dla każdej cechy.
Proste zasady dotyczące stylu
Najprostszym sposobem określenia stylu funkcji jest przekazanie literału obiektu StyleOptions do obiektu setStyle(). Spowoduje to ustawienie jednego stylu dla każdej funkcji w kolekcji. Pamiętaj, że każdy typ cechy może renderować tylko podzbiór dostępnych opcji. Oznacza to, że w jednym literale obiektu można łączyć style różnych typów cech. Na przykład poniższy fragment kodu ustawia zarówno niestandardową właściwość icon, która ma wpływ tylko na geometrię punktów, jak i fillColor, która wpływa tylko na wielokąty.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Więcej informacji o prawidłowych kombinacjach stylów i funkcji znajdziesz w sekcji Opcje stylu.
Poniżej znajdziesz przykład ustawiania koloru kreski i wypełnienia dla kilku cech przy użyciu literału obiektu StyleOptions. Zwróć uwagę, że każdy wielokąt
ma taki sam styl.
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});
Reguły stylu deklaratywnego
Jeśli chcesz zaktualizować styl dużej liczby nakładek, takich jak znaczniki lub linie łamane, zwykle musisz iterować każdą nakładkę na mapie i określić jej styl oddzielnie. W warstwie danych możesz deklaratywnie ustawiać reguły, które będą stosowane w całym zbiorze danych. Po zaktualizowaniu danych lub reguł styl zostanie automatycznie zastosowany do wszystkich cech. Za pomocą właściwości cech możesz dostosować styl.
Na przykład poniższy kod określa kolor każdego znaku w google.json przez analizę jego pozycji w zestawie znaków ASCII. W tym przypadku razem z danymi zakodowaliśmy pozycję znaku.
// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
var ascii = feature.getProperty('ascii');
var color = ascii > 91 ? 'red' : 'blue';
return {
fillColor: color,
strokeWeight: 1
};
});
Usuń style
Jeśli chcesz usunąć zastosowane style, przekaż pusty literał obiektu do metody setStyles().
// Remove custom styles.
map.data.setStyle({});
Spowoduje to usunięcie wszystkich zdefiniowanych stylów niestandardowych, a funkcje będą renderowane z użyciem stylów domyślnych. Jeśli nie chcesz już renderować tych funkcji, ustaw właściwość visible StyleOptions na false.
// Hide the Data layer.
map.data.setStyle({visible: false});
Zastąp style domyślne
Reguły stylu są zwykle stosowane do wszystkich cech w warstwie danych. Czasami warto jednak zastosować specjalne zasady stylu do konkretnych funkcji. Na przykład, aby podświetlić obiekt po kliknięciu.
Aby zastosować specjalne reguły stylu, użyj metody overrideStyle(). Wszystkie właściwości zmienione za pomocą metody overrideStyle() są stosowane oprócz stylów globalnych określonych już w metodzie setStyle(). Na przykład poniższy kod zmieni po kliknięciu kolor wypełnienia wielokąta, ale nie ustawi żadnych innych stylów.
// Set the global styles.
map.data.setStyle({
fillColor: 'green',
strokeWeight: 3
});
// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
map.data.overrideStyle(event.feature, {fillColor: 'red'});
});
Wywołaj metodę revertStyle(), aby usunąć wszystkie zastąpienia stylu.
Opcje stylów
Dostępne opcje określania stylu każdej cechy zależą od jej typu.
Na przykład obiekt fillColor będzie renderowany tylko na geometrii wielokątnej, a element icon tylko na geometrii punktowej. Więcej informacji znajdziesz w dokumentacji referencyjnej StyleOptions.
Dostępne dla wszystkich geometrii
clickable: jeśli ma wartośćtrue, element otrzymuje zdarzenia myszy i dotknięciavisible: jeśli ma wartośćtrue, funkcja jest widoczna.zIndex: wszystkie obiekty są wyświetlane na mapie w kolejnościzIndex, przy czym wyższe wartości są wyświetlane przed obiektami o niższych wartościach. Znaczniki są zawsze wyświetlane przed ciągami linii i wielokątami.
Dostępne w przypadku geometrii punktowej
cursor: kursor myszy wyświetlany po najechaniu.icon: ikona wyświetlana dla geometrii punktu.shape: definiuje mapę obrazu używaną do wykrywania trafień.title: tekst, który wyświetla się po najechaniu kursorem.
Dostępne w przypadku geometrii liniowej
strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów nazwanych.strokeOpacity: przezroczystość kreski w zakresie od 0,0 do 1,0.strokeWeight: szerokość kreski w pikselach.
Dostępne dla geometrii wielokątów
fillColor: kolor wypełnienia. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów nazwanych.fillOpacity: przezroczystość wypełnienia od0.0do1.0.strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów nazwanych.strokeOpacity: przezroczystość kreski w zakresie od 0,0 do 1,0.strokeWeight: szerokość kreski w pikselach.
Dodaj moduły obsługi zdarzeń
Funkcje reagują na zdarzenia, na przykład mouseup lub mousedown. Możesz dodać odbiorniki, aby umożliwić użytkownikom interakcję z danymi na mapie. W poniższym przykładzie dodamy zdarzenie najechania kursorem myszy, które wyświetla informacje o funkcji wskazywanej przez kursor myszy.
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});
Zdarzenia warstwy danych
Poniższe zdarzenia są wspólne dla wszystkich obiektów niezależnie od ich typu geometrii:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Więcej informacji o tych zdarzeniach znajdziesz w dokumentacji referencyjnej klasy google.maps.data.
Dynamiczna zmiana wyglądu
Styl warstwy danych możesz określić, przekazując do metody google.maps.data.setStyle() funkcję, która oblicza styl każdej cechy. Ta funkcja będzie wywoływana po każdej aktualizacji właściwości funkcji.
W poniższym przykładzie dodaliśmy odbiornik zdarzenia click, który aktualizuje właściwość isColorful funkcji. Styl cech jest aktualizowany od razu po skonfigurowaniu właściwości, aby odzwierciedlał zmianę.
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});