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

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

Слой данных Google Maps предоставляет контейнер для произвольных геопространственных данных. Вы можете использовать слой данных для хранения собственных данных или для отображения данных GeoJSON на карте Google.

Обзор

Посмотрите это видео от DevBytes, чтобы узнать больше о слое данных.

С помощью JavaScript API для карт вы можете размечать карту различными наложениями, такими как маркеры, полилинии, полигоны и т. д. Каждая из этих аннотаций объединяет информацию о стиле с данными о местоположении. Класс google.maps.Data представляет собой контейнер для произвольных геопространственных данных. Вместо добавления этих наложений вы можете использовать слой 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;
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.

Машинопись 

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    let innerMap = mapElement.innerMap;

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

initMap();
index.ts

JavaScript 

async function initMap() {
    (await google.maps.importLibrary('maps'));
    const mapElement = document.querySelector('gmp-map');
    let innerMap = mapElement.innerMap;
    innerMap.data.loadGeoJson('google.json');
}
initMap();
index.js
Посмотреть пример

Попробуйте образец

Пример GeoJSON

Большинство примеров на этой странице используют стандартный файл GeoJSON. Этот файл определяет шесть символов слова «Google» в виде полигонов, отображающих территорию Австралии. Вы можете свободно копировать или изменять этот файл при тестировании слоя данных.

Примечание: Для загрузки JSON-файла с другого домена, на этом домене должна быть включена функция совместного использования ресурсов между источниками (Cross-origin resource sharing ).

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

Машинопись 

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    google.maps.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,
    });
}

initMap();
index.ts

JavaScript 

async function initMap() {
    (await google.maps.importLibrary('maps'));
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.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,
    });
}
initMap();
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>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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();
});