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

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

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

Обзор

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

С помощью API JavaScript Карт вы можете разметить карту различными наложениями, такими как маркеры, полилинии, многоугольники и т. д. Каждая из этих аннотаций сочетает в себе информацию о стиле и данные о местоположении. Класс google.maps.Data — это контейнер для произвольных геопространственных данных. Вместо добавления этих наложений вы можете использовать слой данных для добавления на карту произвольных географических данных. Если эти данные содержат геометрические объекты, такие как точки, линии или многоугольники, API по умолчанию отобразит их как маркеры, полилинии и многоугольники. Вы можете оформить эти объекты так же, как и обычное наложение, или применить правила оформления на основе других свойств, содержащихся в вашем наборе данных.

Класс google.maps.Data позволяет:

  • Нарисуйте многоугольники на своей карте.
  • Добавьте данные GeoJSON на вашу карту.
    GeoJSON — это стандарт для геопространственных данных в Интернете. Класс Data соответствует структуре GeoJSON в представлении данных и упрощает их отображение. Используйте метод loadGeoJson() для легкого импорта данных GeoJSON и отображения точек, линий и полигонов.
  • Используйте google.maps.Data для моделирования произвольных данных.
    У большинства сущностей реального мира есть и другие свойства. Например, у магазинов есть часы работы, у дорог — скорость движения, а у каждой труппы Girl Guide есть своя территория, где продают печенье. С помощью 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-файл из другого домена, в этом домене должен быть включен общий доступ к ресурсам между источниками .

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