Слой данных Google Карт обеспечивает контейнер для произвольных геопространственных данных. Этот слой можно использовать для хранения собственных данных или для отображения данных GeoJSON на карте Google.
Обзор
Посмотрите этот видеоматериал DevBytes, чтобы узнать больше о слое данных.
В Maps JavaScript API можно использовать на карте различные наложения, например маркеры, ломаные линии, многоугольники и т. д. Каждая из этих аннотаций сочетает данные стиля с данными о местоположении. Класс google.maps.Data представляет собой контейнер произвольных геопространственных данных. Чтобы не использовать наложения, вы можете добавлять на карту произвольные географические данные с помощью слоя данных. Если эти данные содержат геометрические элементы (например, точки, линии или многоугольники), API будет выполнять их прорисовку по умолчанию в виде маркеров, ломаных линий и многоугольников. Вы можете использовать стиль для этих элементов, как и для обычного наложения, или применить правила стилей, основанные на других свойствах, содержащихся в вашем наборе данных.
С помощью класса google.maps.Data можно:
- Рисовать многоугольники на карте.
- Добавлять на карту данные GeoJSON.
GeoJSON – общий стандарт для обмена геопространственными данными в интернете. КлассDataпредставляет данные в соответствии со структурой GeoJSON. Это упрощает их отображение. Вы можете использовать методloadGeoJson()для удобного импорта данных GeoJSON и отображения точек, ломаных линий и многоугольников. - Использовать
google.maps.Data, чтобы моделировать произвольные данные.
С большинством объектов окружающего мира связаны и другие свойства. Например, у магазинов есть часы работы, у дорог есть разрешенная скорость движения, а в каждом летнем лагере есть общий костер. С помощьюgoogle.maps.Dataэти свойства можно моделировать и применять к данным соответствующий стиль. - Выбирать способ представления ваших данных и легко изменять его.
Слой данных позволяет принимать решения относительно прорисовки объектов и взаимодействия с ними. Например, при отображении на карте магазинов можно отображать только те, где продаются билеты на общественный транспорт.
Прорисовка многоугольника
Класс Data.Polygon обрабатывает изгибы многоугольников. Ему можно передать массив из одного или нескольких линейных колец, определенных как координаты широты и долготы. Первое линейное кольцо определяет наружную границу многоугольника. Если вы передаете более одного линейного кольца, второе и последующие линейные кольца используются для определения внутренних путей (отверстий) в многоугольнике.
В следующем примере показано создание прямоугольного многоугольника, содержащего два отверстия.
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;
Загрузка данных GeoJSON
GeoJSON – общий стандарт для обмена геопространственными данными в интернете. Данные передаются в компактной форме и легко интерпретируются человеком, поэтому этот формат идеально подходит для обмена информацией и совместной работы. Слой данных позволяет добавлять данные GeoJSON на карту Google с помощью всего одной строки кода.
map.data.loadGeoJson('google.json');
Для каждой карты существует объект map.data, выступающий в качестве слоя для хранения произвольных геопространственных данных, в том числе данных GeoJSON. Файлы GeoJSON можно загружать и отображать с помощью метода loadGeoJSON() объекта data. В примере ниже показано, как добавить карту и загрузить внешние данные 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;
Примеры кода
Образец данных 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. Вы можете добавить блоки прослушивания событий, чтобы дать пользователям возможность взаимодействовать с данными на карте. В примере ниже мы добавляем событие наведения курсора мыши mouseover, в результате которого под курсором мыши отображается информация об элементе.
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});
События слоя данных
Следующие события используются для всех элементов, вне зависимости от типа их геометрии:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Дополнительную информацию об этих событиях можно найти в справочной документации по классу 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();
});