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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: Android iOS JavaScript

Слой данных 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 },
    { 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.

Машинопись

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

События уровня данных

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

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