- Omówienie
- Wczytaj bibliotekę wizualizacji
- Dodawanie ważonych punktów danych
- Dostosowywanie warstwy mapy termicznej
Warstwa mapy termicznej umożliwia renderowanie map termicznych po stronie klienta.
Omówienie
Mapa termiczna to wizualizacja używana do przedstawiania intensywności danych w punkty geograficzne. Gdy włączona jest warstwa Mapa termiczna, kolorowa nakładka wyświetlają się na górze mapy. Domyślnie obszary o większej intensywności będą pokolorowane czerwony, a obszary o niższej intensywności – zielone.
Wczytaj bibliotekę wizualizacji
Warstwa Mapa termiczna jest częścią biblioteki google.maps.visualization i nie jest
ładowanego domyślnie. Klasy wizualizacji są samodzielną biblioteką,
niezależnie od głównego kodu Maps JavaScript API. Aby korzystać z funkcji
zawarte w tej bibliotece, musisz najpierw wczytać ją za pomocą funkcji libraries
w adresie URL wczytywania interfejsu Maps JavaScript API:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>
Dodawanie warstwy mapy termicznej
Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer
i podaj mu pewne dane geograficzne w postaci tablicy
MVCArray[] obiekt. Dane te mogą być
LatLng
lub
WeightedLocation
obiektu. Po utworzeniu instancji obiektu HeatmapLayer dodaj go do
używając metody setMap().
W przykładzie poniżej dodano 14 punktów danych do mapy San Francisco.
/* Data points defined as an array of LatLng objects */
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);
Dodaj ważone punkty danych
Mapa termiczna może renderować:
LatLng lub
WeightedLocation
obiektów lub kombinacji tych 2 elementów. Oba obiekty reprezentują te same dane.
na mapie, ale obiekt WeightedLocation pozwala dodatkowo
określ wagę tego punktu danych. Zastosowanie wagi do punktu danych spowoduje
powodują, że elementy WeightedLocation są renderowane z większą intensywnością niż
prosty obiekt LatLng. Waga jest skalą liniową, w której każde LatLng
obiekt ma domniemaną wagę równą 1 – przez dodanie pojedynczego WeightedLocation
z {location: new google.maps.LatLng(37.782, -122.441), weight: 3} będzie mieć
taki sam efekt jak 3-krotne dodanie elementu google.maps.LatLng(37.782, -122.441).
Możesz mieszać obiekty weightedLocation i LatLng w jednej tablicy.
Użycie obiektu WeightedLocation zamiast LatLng może być przydatne, gdy:
- Dodawanie dużych ilości danych w jednej lokalizacji Renderowanie jednego
WeightedLocationobiekt o wadze 1000 będzie szybszy niż 1000 obiektówLatLng. - Podkreślenie danych na podstawie dowolnych wartości. Przykład:
możesz użyć obiektów
LatLngdo wykresu danych o trzęsieniach ziemi, ale być może aby użyć funkcjiWeightedLocationdo pomiaru siły każdego trzęsienia ziemi jest bardziej bogata.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
new google.maps.LatLng(37.782, -122.445),
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
new google.maps.LatLng(37.782, -122.437),
{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
new google.maps.LatLng(37.785, -122.443),
{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
new google.maps.LatLng(37.785, -122.439),
{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
{location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map);
Dostosowywanie warstwy mapy termicznej
Możesz dostosować sposób renderowania mapy termicznej za pomocą tej mapy termicznej
. Zobacz
HeatmapLayerOptions.
dissipating: określa, czy mapy termiczne rozpraszają się przy powiększeniu. Kiedy ma wartość fałsz, promień wpływu zwiększa się wraz z poziomem powiększenia Zadbanie o to, aby intensywność kolorów została zachowana na każdym obszarze geograficznym lokalizacji. Domyślna wartość to prawda.gradient: gradient koloru mapy termicznej określony jako tablica CSS. ciągi kolorów. Wszystkie kolory CSS3 — w tym RGBA — są obsługiwane z wyjątkiem rozszerzeń o nazwie kolorów i wartości HSL(A).maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie mapa termiczna kolorów są dynamicznie skalowane zgodnie z największym stężeniem na dowolny piksel na mapie. Ta usługa umożliwia: określić stałą maksymalną wartość. Ustawienie maksymalnej intensywności może być pomocne, Twój zbiór danych zawiera kilka wartości odstających o nietypowo wysokiej intensywności.radius: promień oddziaływania każdego punktu danych w pikselach.opacity: przezroczystość mapy termicznej wyrażona jako liczba z zakresu od 0 do 1.
Przykład poniżej pokazuje niektóre dostępne opcje dostosowywania.