Слой рисунков (библиотека)

  1. Обзор
  2. Использование библиотеки
  3. Параметры DrawingManager
  4. Обновление элемента управления Drawing Tools
  5. События рисования

Обзор

Класс DrawingManager обеспечивает графический интерфейс, позволяющий пользователям рисовать на карте многоугольники, прямоугольники, ломаные линии, окружности и маркеры.

Использование библиотеки

Drawing Tools – это автономная библиотека, отделенная от основного кода JavaScript Maps API. Для работы с этой библиотекой необходимо сначала загрузить ее с помощью параметра libraries в URL начальной загрузки Maps API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

После добавления параметра библиотеки можно создать объект DrawingManager следующим образом:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Параметры DrawingManager

Конструктор DrawingManager использует набор параметров, определяющих отображаемые элементы управления, положение элемента управления и исходное состояние рисунка.

  • Свойство drawingMode объекта DrawingManager определяет исходное состояние рисунка DrawingManager. Оно принимает константу google.maps.drawing.OverlayType. По умолчанию эта константа имеет значение null, и в этом случае курсор не находится в режиме рисунка при инициализации DrawingManager.
  • Свойство drawingControl объекта DrawingManager определяет видимость на карте интерфейса выбора инструментов для рисования. Оно принимает логические значения.
  • Также можно определить положение элемента управления и типы наложений, которые должны быть представлены в нем. Для этого используется свойство drawingControlOptions объекта DrawingManager.
    • position определяет положение элемента управления инструментами для рисования на карте и принимает константу google.maps.ControlPosition.
    • drawingModes представляет собой массив констант google.maps.drawing.OverlayType и определяет типы наложений, которые будут включены в средство выбора фигур в элементе управления рисунком. В этом окне всегда должен присутствовать значок в виде руки, чтобы пользователь мог работать с картой без рисования. Порядок инструментов в элементе управления будет соответствовать порядку, в котором они декларированы в массиве.
  • Каждому типу наложения можно присвоить набор свойств по умолчанию, определяющих внешний вид наложения при его создании. Они определяются в свойстве наложения {overlay}Options (где {overlay} обозначает тип наложения). Например, с помощью свойства circleOptions можно задать свойства заливки, толщины линии, zIndex и поддержки нажатия для окружности. В случае передачи значений размера, местоположения или карты эти данные игнорируются. Более подробную информацию о том, какие свойства можно устанавливать, можно найти в справочнике по API.

Примечание. Чтобы пользователь мог изменять фигуру после ее создания, установите для свойства editable значение true.

TypeScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
index.js
Посмотреть пример

Примеры кода

Обновление элемента управления Drawing Tools

После создания объект DrawingManager можно обновить, вызвав метод setOptions() и передав ему новые значения.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Как скрыть или отобразить элемент управления инструментами рисования:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Чтобы удалить элемент управления инструментами рисования из объекта map:

drawingManager.setMap(null);

Если элемент управления инструментами рисования скрыт, он не будет отображаться, но все функции класса DrawingManagerбудут доступны. Это позволяет при желании реализовать собственный элемент управления. При удалении объекта DrawingManager из объекта map отключаются все функции рисования. Если нужно их восстановить, снова присоедините его к карте с помощью метода drawingManager.setMap(map) или создайте новый объект DrawingManager.

События рисования

При создании наложения фигуры происходят два события:

  • Событие {overlay}complete (где {overlay} представляет тип наложения, например circlecomplete, polygoncomplete и т. д.). В качестве аргумента передается ссылка на наложение.
  • Событие overlaycomplete. В качестве аргумента передается литерал объекта, содержащий тип наложения OverlayType и ссылку на наложение.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Обратите внимание, что события google.maps.Map, например click и mousemove, во время рисования на карте отключены.