Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Уровень данных

Выберите платформу: Android iOS JavaScript

Слой данных 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;index.ts

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;index.js

Загрузка данных GeoJSON

GeoJSON – общий стандарт для обмена геопространственными данными в интернете. Данные передаются в компактной форме и легко интерпретируются человеком, поэтому этот формат идеально подходит для обмена информацией и совместной работы. Слой данных позволяет добавлять данные GeoJSON на карту Google с помощью всего одной строки кода.

map.data.loadGeoJson('google.json');

Для каждой карты существует объект map.data, выступающий в качестве слоя для хранения произвольных геопространственных данных, в том числе данных GeoJSON. Файлы GeoJSON можно загружать и отображать с помощью метода loadGeoJSON() объекта data. В примере ниже показано, как добавить карту и загрузить внешние данные GeoJSON.

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();index.ts

JavaScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();index.js

Посмотреть пример

Образец данных 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. Обратите внимание, что все многоугольники имеют один и тот же стиль.

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();index.ts

JavaScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>index.html

Посмотреть пример

Декларативные правила стилей

Для обновления стиля большого количества наложений (например, маркеров или ломаных линий) обычно требуется отдельно установить стиль для каждого из них. В слое данных можно задать декларативные правила, которые будут применяться для всего набора данных. При обновлении данных или правил стили будут автоматически применяться к каждому объекту. Вы можете использовать свойства объектов для настройки их стилей.

Например, в приведенном ниже примере кода устанавливается цвет каждого символа 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.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});index.js

События слоя данных

Следующие события используются для всех объектов, вне зависимости от типа их геометрии:

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();
});

Уровень данных Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Прорисовка многоугольника

TypeScript

JavaScript

Загрузка данных GeoJSON

TypeScript

JavaScript

Образец данных GeoJSON

google.json

Стиль данных GeoJSON

Простые правила стилей

TypeScript

JavaScript

CSS

HTML

Декларативные правила стилей

Удаление стилей

Замена стилей по умолчанию

Параметры стилей

Добавление обработчиков событий

События слоя данных

Динамическое изменение внешнего вида

Уровень данных