Warstwa danych Map Google udostępnia kontener na dowolne dane geoprzestrzenne. Możesz użyć warstwy danych do przechowywania danych niestandardowych lub do wyświetlania danych GeoJSON na mapie Google.
Omówienie
Obejrzyj ten film DevBytes, aby dowiedzieć się więcej o warstwie danych.
Za pomocą interfejsu Maps JavaScript API możesz oznaczać mapy różnymi nakładkami, takimi jak znaczniki, linie łamane, wielokąty itp. Każda z nich łączy informacje o stylu z danymi o lokalizacji. Klasa google.maps.Data jest kontenerem 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, takie jak punkty, linie lub wielokąty, interfejs API domyślnie wyrenderuje je jako znaczniki, linie łamane i wielokąty. Możesz zmienić styl tych funkcji tak jak normalne nakładki lub zastosować reguły stylu oparte na innych właściwościach znajdujących się w zbiorze danych.
Klasa google.maps.Data umożliwia:
- Narysuj wielokąty na mapie.
- Dodaj dane geograficzne do mapy.
GeoJSON to standard danych geoprzestrzennych w internecie. KlasaDatajest zgodna ze strukturą danych GeoJSON i reprezentuje dane oraz ułatwia wyświetlanie danych GeoJSON. Aby łatwo zaimportować dane geograficzne i wyświetlić punkty, ciągi znaków oraz wielokąty, użyj metodyloadGeoJson(). - Używaj
google.maps.Datado modelowania dowolnych danych.
Z większością rzeczywistych podmiotów wiążą się inne właściwości. Na przykład sklepy działają w godzinach otwarcia, drogi mają prędkość ruchu, a każda grupa dziewcząt będących przewodnikami ma torfowy obszar sprzedający ciastka.google.maps.Dataumożliwia modelowanie tych właściwości i odpowiednie określanie stylu danych. - Wybierać sposób wyświetlania danych i na bieżąco zmieniać zdanie.
Warstwa danych pozwala podejmować decyzje dotyczące wizualizacji i interakcji danych. Na przykład na mapie sklepów osiedlowych możesz wybrać tylko sklepy, które sprzedają bilety transportu publicznego.
Narysuj wielokąt
Klasa Data.Polygon obsługuje proces kręcenia wielokąta za Ciebie. Można przekazywać tablicę z jednym lub wieloma pierścieniami liniowymi zdefiniowanymi jako współrzędne geograficzne. Pierwszy pierścień liniowy określa zewnętrzną granicę wielokąta. Jeśli przekazujesz więcej niż jeden pierścień liniowy, drugie i kolejne pierścienie liniowe służą do definiowania ścieżek wewnętrznych (otworów) w wielokątach.
Ten przykład tworzy prostokątny wielokąt 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 plik GeoJSON
GeoJSON to powszechny standard udostępniania danych geoprzestrzennych w internecie. Jest lekki i łatwy do odczytania przez człowieka, co sprawia, że jest idealny do udostępniania treści 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 zawiera obiekt map.data, który pełni rolę warstwy danych, na której znajdują się dowolne dane geoprzestrzenne, w tym GeoJSON. Aby wczytać i wyświetlić plik GeoJSON, wywołaj metodę loadGeoJSON() obiektu data. Poniższy przykład pokazuje, 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;
Fragment
Przykładowy element GeoJSON
Większość przykładów na tej stronie zawiera typowy plik GeoJSON. Ten plik definiuje 6 znaków w Google jako wielokąty nad Australią. Możesz go skopiować lub zmodyfikować 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.
Aby zobaczyć pełny tekst pliku, rozwiń 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]
]
]
}
}
]
}
Styl danych GeoJSON
Użyj metody Data.setStyle(), aby określić, jak powinny wyglądać dane. Metoda setStyle() przyjmuje literał obiektu StyleOptions lub funkcję, która oblicza styl dla każdej funkcji.
Proste reguły stylu
Najprostszym sposobem na określenie stylu jest przekazanie dosłownego obiektu StyleOptions do setStyle(). Spowoduje to ustawienie jednego stylu dla każdej funkcji w kolekcji. Pamiętaj, że każdy typ funkcji może renderować tylko podzbiór dostępnych opcji. Oznacza to, że w jednym literale obiektów można łączyć style dla różnych typów cech. Na przykład poniższy fragment zawiera niestandardowy icon, który wpływa tylko na geometrię punktów, i fillColor, który 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 stylu i cech znajdziesz w sekcji Opcje stylu.
Poniżej znajduje się przykład ustawienia koloru kreski i wypełnienia kilku funkcji 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
});
Deklaratywne reguły stylu
Jeśli chcesz zmodyfikować styl dużej liczby nakładek, np. znaczników lub linii łamanych, zazwyczaj musisz iterować po każdej nakładce na mapie i ustawić jej styl indywidualnie. Warstwa danych pozwala deklaratywnie określić reguły, które zostaną zastosowane w całym zbiorze danych. Po zaktualizowaniu danych lub reguł styl będzie stosowany automatycznie w każdej funkcji. Styl cech możesz dostosować za pomocą właściwości.
Na przykład ten kod ustawia kolor każdego znaku w komórce google.json, analizując jego pozycję w zestawie znaków z pliku ASCII. W tym przypadku zakodowaliśmy położenie znaku razem z naszymi danymi.
// 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 dosłowny obiekt do metody setStyles().
// Remove custom styles.
map.data.setStyle({});
Spowoduje to usunięcie wszystkich określonych stylów niestandardowych, a funkcje będą renderowane przy użyciu stylów domyślnych. Jeśli nie chcesz już renderować funkcji, ustaw właściwość visible elementu StyleOptions na false.
// Hide the Data layer.
map.data.setStyle({visible: false});
Zastąp style domyślne
Reguły stylu są zwykle stosowane do każdej funkcji w warstwie danych. Czasami będziesz jednak chciał stosować specjalne reguły stylu do określonych funkcji. Aby na przykład wyróżnić obiekt po kliknięciu.
Aby zastosować specjalne reguły stylu, użyj metody overrideStyle(). Wszystkie właściwości, które zmienisz za pomocą metody overrideStyle(), są stosowane oprócz stylów globalnych określonych już w setStyle(). Na przykład poniższy kod zmieni kolor wypełnienia wielokąta po kliknięciu, ale nie ustawi 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 funkcji zależą od jej typu.
Na przykład element fillColor będzie renderowany tylko na podstawie geometrii wielokąta, a icon będzie wyświetlany tylko na geometrii punktu. Więcej informacji znajdziesz w dokumentacji
StyleOptions.
Dostępne we wszystkich lokalizacjach geometrycznych
clickable: jeślitruema dostęp do zdarzeń myszy i dotykuvisible: jeślitrue, funkcja jest widoczna.zIndex: wszystkie obiekty są wyświetlane na mapie w kolejnościzIndex. Wyższe wartości wyświetlają się przed obiektami o niższych wartościach. Znaczniki są zawsze wyświetlane przed ciągami linii i wielokątami.
Dostępne w przypadku geometrii punktów
cursor: kursor myszy wyświetla się po najechaniu.icon: ikona pokazująca geometrię punktu.shape: definiuje mapę obrazu używaną do wykrywania działań.title: najedź kursorem na tekst.
Dostępne w przypadku geometrii linii
strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych nazw kolorów.strokeOpacity: przezroczystość kreski między 0,0 a 1,0.strokeWeight: szerokość kreski w pikselach.
Dostępne w przypadku geometrii wielokątów
fillColor: kolor wypełnienia. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych nazw kolorów.fillOpacity: przezroczystość wypełnienia między0.0a1.0..strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych nazw kolorów.strokeOpacity: przezroczystość kreski między 0,0 a 1,0.strokeWeight: szerokość kreski w pikselach.
Dodaj moduły obsługi zdarzeń
Funkcje reagują na wydarzenia, takie jak mouseup lub mousedown. Możesz dodać odbiorniki zdarzeń, aby umożliwić użytkownikom interakcję z danymi na mapie. W poniższym przykładzie dodajemy zdarzenie najechania kursorem, które przedstawia informacje o funkcji pod kursorem 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
Te zdarzenia są wspólne dla wszystkich funkcji, niezależnie od ich elementu geometrycznego:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Więcej informacji o tych zdarzeniach znajdziesz w dokumentacji referencyjnej klasy google.maps.data.
Dynamiczna zmiana wyglądu
Styl warstwy danych możesz ustawić, przekazując funkcję, która oblicza styl każdej funkcji do metody google.maps.data.setStyle(). Ta funkcja będzie wywoływana po każdej aktualizacji jej właściwości.
W przykładzie poniżej dodaliśmy odbiornik zdarzenia click, który aktualizuje właściwość isColorful funkcji. Styl cech jest aktualizowany, tak aby odzwierciedlał zmianę od razu po ustawieniu właściwości.
// 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();
});