Уровень данных Google Maps представляет собой контейнер для произвольных геопространственных данных. Вы можете использовать уровень данных для хранения своих пользовательских данных или для отображения данных GeoJSON на карте Google.
Обзор
Посмотрите это видео DevBytes, чтобы узнать больше об уровне данных.
С помощью Maps JavaScript API вы можете разметить карту с помощью различных наложений, таких как маркеры, ломаные линии, многоугольники и т. д. Каждая из этих аннотаций сочетает в себе информацию о стиле с данными о местоположении. Класс google.maps.Data представляет собой контейнер для произвольных геопространственных данных. Вместо добавления этих наложений вы можете использовать слой данных, чтобы добавить на карту произвольные географические данные. Если эти данные содержат геометрические объекты, такие как точки, линии или многоугольники, API по умолчанию отобразит их как маркеры, полилинии и многоугольники. Вы можете стилизовать эти объекты так же, как обычное наложение, или применить правила стилизации на основе других свойств, содержащихся в вашем наборе данных.
Класс google.maps.Data позволяет:
- Нарисуйте полигоны на карте.
- Добавьте данные GeoJSON на свою карту.
GeoJSON — это стандарт геопространственных данных в Интернете. КлассDataсоответствует структуре GeoJSON в представлении данных и упрощает отображение данных GeoJSON. Используйте методloadGeoJson(), чтобы легко импортировать данные GeoJSON и отображать точки, строки линий и многоугольники. - Используйте
google.maps.Dataдля моделирования произвольных данных.
С большинством объектов реального мира связаны и другие свойства. Например, у магазинов есть часы работы, у дорог есть скорость движения, а у каждой труппы девушек-гидов есть территория для продажи печенья. С помощьюgoogle.maps.Dataвы можете моделировать эти свойства и соответствующим образом стилизовать свои данные. - Выбирайте, как будут представлены ваши данные , и меняйте свое решение на лету .
Уровень данных позволяет вам принимать решения о визуализации и взаимодействии ваших данных. Например, просматривая карту мини-маркетов, вы можете выбрать отображение только тех магазинов, которые продают транзитные билеты.
Нарисовать многоугольник
Класс Data.Polygon обрабатывает за вас намотку многоугольника. Вы можете передать ему массив из одного или нескольких линейных колец, определенных как координаты широты и долготы. Первое линейное кольцо определяет внешнюю границу многоугольника. Если вы передаете более одного линейного кольца, второе и последующие линейные кольца используются для определения внутренних путей (отверстий) в многоугольнике.
В следующем примере создается прямоугольный многоугольник с двумя отверстиями в нем:
Машинопись
// 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 }, // 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,
]),
});
}
window.initMap = initMap;Загрузить GeoJSON
GeoJSON — это общий стандарт для обмена геопространственными данными в Интернете. Он легкий и легко читаемый, что делает его идеальным для обмена информацией и совместной работы. С помощью уровня данных вы можете добавить данные GeoJSON на карту Google всего за одну строку кода.
map.data.loadGeoJson('google.json');
Каждая карта имеет объект map.data , который действует как слой данных для произвольных геопространственных данных, включая GeoJSON. Вы можете загрузить и отобразить файл GeoJSON, вызвав метод loadGeoJSON() объекта data . В приведенном ниже примере показано, как добавить карту и загрузить внешние данные GeoJSON.
Машинопись
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;Попробуйте образец
Пример GeoJSON
В большинстве примеров на этой странице используется общий файл GeoJSON. Этот файл определяет шесть символов «Google» как многоугольники над Австралией. Пожалуйста, не стесняйтесь копировать или изменять этот файл при тестировании уровня данных.
Примечание. Чтобы загрузить файл JSON из другого домена, в этом домене должно быть включено совместное использование ресурсов между источниками .
Полный текст файла можно увидеть ниже, развернув маленькую стрелку рядом со словами 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]
]
]
}
}
]
}
Стиль данных GeoJSON
Используйте метод Data.setStyle() , чтобы указать, как должны выглядеть ваши данные. Метод setStyle() принимает либо литерал объекта StyleOptions , либо функцию, которая вычисляет стиль для каждого объекта.
Простые правила стиля
Самый простой способ стилизовать функции — передать литерал объекта StyleOptions в setStyle() . Это установит единый стиль для каждого объекта в вашей коллекции. Обратите внимание, что каждый тип объекта может отображать только подмножество доступных опций. Это означает, что можно комбинировать стили для разных типов объектов в одном литерале объекта. Например, в приведенном ниже фрагменте задается как пользовательский icon , который влияет только на геометрию точек, так и fillColor , который влияет только на полигоны.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Дополнительную информацию о допустимых сочетаниях стилей и функций можно найти в разделе «Параметры стиля» .
Ниже приведен пример установки цвета обводки и заливки для нескольких функций с использованием литерала объекта StyleOptions . Обратите внимание, что каждый многоугольник имеет одинаковый стиль.
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});Правила декларативного стиля
Если вы хотите обновить стиль большого количества наложений, таких как маркеры или полилинии, вам обычно приходится перебирать каждое наложение на карте и устанавливать его стиль индивидуально. На уровне данных вы можете устанавливать правила декларативно, и они будут применяться ко всему вашему набору данных. При обновлении данных или правил стиль будет автоматически применен к каждому объекту. Вы можете использовать свойства объекта, чтобы настроить его стиль.
Например, приведенный ниже код устанавливает цвет каждого символа в нашем google.json , проверяя его положение в наборе символов ascii. В этом случае мы закодировали позицию символа вместе с нашими данными.
// 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
};
});
Удалить стили
Если вы хотите удалить любые примененные стили, передайте пустой литерал объекта методу setStyles() .
// Remove custom styles.
map.data.setStyle({});
При этом будут удалены все указанные вами пользовательские стили, и объекты будут отображаться с использованием стилей по умолчанию. Если вместо этого вы не хотите больше отображать объекты, установите для visible StyleOptions значение false .
// Hide the Data layer.
map.data.setStyle({visible: false});
Переопределить стили по умолчанию
Правила стиля обычно применяются к каждому объекту на уровне данных. Однако бывают случаи, когда вам нужно применить особые правила оформления к конкретным функциям. Например, как способ выделить функцию при нажатии.
Чтобы применить специальные правила стиля, используйте метод overrideStyle() . Любые свойства, которые вы меняете с помощью метода overrideStyle() применяются в дополнение к глобальным стилям, уже указанным в setStyle() . Например, приведенный ниже код изменит цвет заливки многоугольника при щелчке, но не установит никаких других стилей.
// 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'});
});
Вызовите метод revertStyle() , чтобы удалить все переопределения стилей.
Варианты стиля
Параметры, доступные для стилизации каждого объекта, зависят от типа объекта. Например, fillColor будет отображаться только на полигональной геометрии, а icon появится только на точечной геометрии. Дополнительную информацию можно найти в справочной документации StyleOptions .
Доступно для всех геометрий.
-
clickable: еслиtrue, функция получает события мыши и касания. -
visible: еслиtrue, объект виден. -
zIndex: все объекты отображаются на карте в порядке ихzIndex, при этом более высокие значения отображаются перед объектами с меньшими значениями. Маркеры всегда отображаются перед линиями и полигонами.
Доступно для точечных геометрий
-
cursor: Курсор мыши, который будет отображаться при наведении. -
icon: Значок, отображаемый для геометрии точки. -
shape: определяет карту изображения, используемую для обнаружения попаданий. -
title: текст ролловера.
Доступные онлайн-геометрии
-
strokeColor: цвет обводки. Поддерживаются все цвета CSS3, за исключением расширенных именованных цветов. -
strokeOpacity: непрозрачность обводки в диапазоне от 0,0 до 1,0. -
strokeWeight: ширина обводки в пикселях.
Доступно для полигональной геометрии.
-
fillColor: цвет заливки. Поддерживаются все цвета CSS3, за исключением расширенных именованных цветов. -
fillOpacity: непрозрачность заливки от0.0до1.0. -
strokeColor: цвет обводки. Поддерживаются все цвета CSS3, за исключением расширенных именованных цветов. -
strokeOpacity: непрозрачность обводки в диапазоне от 0,0 до 1,0. -
strokeWeight: ширина обводки в пикселях.
Добавить обработчики событий
Функции реагируют на такие события, как mouseup или mousedown . Вы можете добавить прослушиватели событий, чтобы пользователи могли взаимодействовать с данными на карте. В приведенном ниже примере мы добавляем событие наведения курсора мыши, которое отображает информацию о функции под курсором мыши.
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});События уровня данных
Следующие события являются общими для всех объектов, независимо от их типа геометрии:
-
addfeature -
click -
dblclick -
mousedown -
mouseout -
mouseover -
mouseup -
removefeature -
removeproperty -
rightclick -
setgeometry -
setproperty
Дополнительную информацию об этих событиях можно найти в справочной документации по классу google.maps.data .
Динамическое изменение внешнего вида
Вы можете установить стиль слоя данных, передав функцию, которая вычисляет стиль каждого объекта, методу google.maps.data.setStyle() . Эта функция будет вызываться каждый раз при обновлении свойств объекта.
В приведенном ниже примере мы добавляем прослушиватель событий для события click , который обновляет свойство isColorful функции. Стиль объекта обновляется, чтобы отразить изменения, как только свойство установлено.
// 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();
});