Рисование геометрических фигур
Для рисования геометрических фигур на карте MapGL вы можете использовать плагин MapGL Terra Draw. Плагин является адаптером JavaScript-библиотеки Terra Draw.
Библиотека позволяет:
- Рисовать на карте базовые геометрические фигуры: точки, линии, полигоны, окружности, прямоугольники и другие.
- Настраивать ширину линий, а также цвет вершин, сторон и заливки геометрических фигур.
- Скачивать файл с созданными геометриями в формате GeoJSON.
Начало работы
Чтобы начать работу с плагином, выполните следующие шаги:
1. Подключите плагин
При помощи тега script
Чтобы подключить плагин, добавьте следующие строки в код HTML-страницы (после подключения MapGL):
<script src="https://unpkg.com/terra-draw@1.0.0/dist/terra-draw.umd.js"></script>
<script src="https://unpkg.com/@2gis/mapgl-terra-draw/dist/mapgl-terra-draw.umd.cjs"></script>
При помощи npm
Если вы используете npm, подключите плагин с помощью пакета @2gis/mapgl-terra-draw:
npm install @2gis/mapgl-terra-draw
2. Инициализируйте плагин
Чтобы инициализировать плагин, используйте метод createTerraDrawWithUI().
При помощи тега script
<html>
<head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
/>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@2gis/mapgl-terra-draw@0.2.0/dist/mapgl-terra-draw.css"
/>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/terra-draw@1.0.0/dist/terra-draw.umd.js"></script>
<script src="https://unpkg.com/@2gis/mapgl-terra-draw/dist/mapgl-terra-draw.umd.cjs"></script>
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const map = new mapgl.Map('container', {
center: [37.615655, 55.768005],
zoom: 13,
key: 'Your API access key',
enableTrackResize: true,
});
map.on('styleload', () => {
mapglTerraDraw.createTerraDrawWithUI({
map,
mapgl: mapgl,
controls: [
'color',
'select',
'point',
'polygon',
'circle',
'download',
'clear',
],
});
});
</script>
</body>
</html>
При помощи npm
import { load } from '@2gis/mapgl';
import { createTerraDrawWithUI } from '@2gis/mapgl-terra-draw';
import '@2gis/mapgl-terra-draw/dist/mapgl-terra-draw.css';
load().then((mapgl) => {
const map = new mapgl.Map('map', {
center: [37.615655, 55.768005],
zoom: 13,
key: 'Your API access key',
enableTrackResize: true,
});
map.on('styleload', () => {
createTerraDrawWithUI({
map,
mapgl: mapgl as any,
controls: ['color', 'select', 'point', 'polygon', 'circle', 'download', 'clear'],
});
});
});
Пример использования
Выберите тип геометрии и нажимайте на карту, чтобы строить геометрические фигуры.
Использование TerraDrawMapGlAdapter
Вы можете использовать класс TerraDrawMapGlAdapter напрямую для работы с продвинутыми функциями Terra Draw. Например, чтобы добавить режим выбора объектов на карте или создать собственный пользовательский интерфейс, если встроенный не подходит по каким-либо причинам.
Пример создания карты с тремя режимами рисования (выбор объектов, рисование точек и рисование полигонов) и UI-элементами для переключения режимов и удаления нарисованных объектов:
import { load } from '@2gis/mapgl';
import {
TerraDraw,
TerraDrawPointMode,
TerraDrawPolygonMode,
TerraDrawSelectMode,
} from 'terra-draw';
import { TerraDrawMapGlAdapter } from '@2gis/mapgl-terra-draw';
load().then((mapgl) => {
const map = new mapgl.Map('map', {
center: [37.615655, 55.768005],
zoom: 13,
key: 'Your API access key',
enableTrackResize: true,
});
map.on('styleload', () => {
const draw = new TerraDraw({
adapter: new TerraDrawMapGlAdapter({
map,
mapgl,
coordinatePrecision: 9,
}),
modes: [
new TerraDrawSelectMode(),
new TerraDrawPointMode(),
new TerraDrawPolygonMode(),
],
});
const buttons = document.createElement('div');
buttons.style.display = 'flex';
buttons.style.flexDirection = 'column';
buttons.style.gap = '8px';
new mapgl.Control(map, buttons, { position: 'centerLeft' });
const selectButton = document.createElement('button');
selectButton.innerText = 'select';
selectButton.addEventListener('click', () => {
draw.setMode('select');
});
buttons.appendChild(selectButton);
const pointButton = document.createElement('button');
pointButton.innerText = 'point';
pointButton.addEventListener('click', () => {
draw.setMode('point');
});
buttons.appendChild(pointButton);
const polygonButton = document.createElement('button');
polygonButton.innerText = 'polygon';
polygonButton.addEventListener('click', () => {
draw.setMode('polygon');
});
buttons.appendChild(polygonButton);
const clearButton = document.createElement('button');
clearButton.innerText = 'clear';
clearButton.addEventListener('click', () => {
draw.clear();
});
buttons.appendChild(clearButton);
draw.start();
});
});
Получение данных об объектах
Чтобы извлечь данные об объектах со стилями, получите нарисованные фигуры с помощью метода getSnapshot(), создайте объект FeatureCollection и добавьте свойства icons и layers в его корень:
const adapter = new TerraDrawMapGlAdapter({
...
});
const { draw } = createTerraDrawWithUI({
adapter,
...
});
const features = draw.getSnapshot();
const { icons, layers } = adapter.addStyling(features);
const featureCollection = {
type: 'FeatureCollection',
icons,
layers,
features,
};
Чтобы отобразить полученные данные на карте, добавьте к карте icons и layers из созданного выше FeatureCollection через методы addIcon() и addLayer() и подключите GeoJSON в качестве источника карты через GeoJsonSource:
for (const icon in featureCollection.icons) {
map.addIcon(icon, { url: featureCollection.icons[icon] });
}
for (const layer of featureCollection.layers) {
map.addLayer(layer);
}
const source = new mapgl.GeoJsonSource(map, {
data: featureCollection,
attributes: {
name: 'terra-draw-output',
},
});
Пример использования:
Сырые данные
Если необходимо получить только геометрические фигуры в формате GeoJSON, используйте метод getSnapshot() библиотеки Terra Draw:
const { draw } = createTerraDrawWithUI({
...
});
...
draw.getSnapshot();
Подробнее о добавлении GeoJSON-данных на карту см. в инструкции GeoJSON.