Плагин "Линейка"
Линейка
У линейки есть два режима использования: полилиния и полигон.
Режим полилинии позволяет измерять расстояние, а режим полигона используется, если нужно измерить площадь и периметр многоугольника на карте.
Использование линейки
Чтобы добавить линейку на карту, создайте экземпляр Ruler:
const ruler = new mapgl.Ruler(map, { mode: 'polyline' });
Если вы используете npm:
// Импортируйте либо как модуль ES...
import { Ruler } from '@2gis/mapgl-ruler';
// ... либо как модуль CommonJS
const { Ruler } = require('@2gis/mapgl-ruler');
const ruler = new Ruler(map, { mode: 'polyline' });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="MapGL API ruler example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.button {
padding: 4px 10px;
background: #00a81f;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
border: none;
color: #fff;
font-size: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const ruler = new mapgl.Ruler(map, {
mode: 'polyline',
points: [
[55.31878, 25.23584],
[55.31878, 25.25584],
[55.33878, 25.23584],
],
});
const resetControl = new mapgl.Control(
map,
'<button class="button">Reset points</button>',
{
position: 'topLeft',
},
);
resetControl
.getContainer()
.querySelector('button')
.addEventListener('click', function () {
ruler.destroy();
ruler.enable();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="MapGL API ruler example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.button {
padding: 4px 10px;
background: #00a81f;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
border: none;
color: #fff;
font-size: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const ruler = new mapgl.Ruler(map, {
mode: 'polygon',
points: [
[55.31878, 25.23584],
[55.31878, 25.25584],
[55.33878, 25.23584],
],
});
const resetControl = new mapgl.Control(
map,
'<button class="button">Reset points</button>',
{
position: 'topLeft',
},
);
resetControl
.getContainer()
.querySelector('button')
.addEventListener('click', function () {
ruler.destroy();
ruler.enable();
});
</script>
</body>
</html>
Элемент управления "Линейка"
Экземпляр RulerControl является оболочкой экземпляра Ruler и расширяет Control.
Он предоставляет элемент управления для включения или отключения линейки.
Использование RulerControl
const rulerControl = new RulerControl(map, { position: 'centerRight', mode: 'polyline' });
Вы можете получить экземпляр Ruler с помощью метода getRuler()
.
rulerControl.getRuler().setPoints([
[55.31878, 25.23584],
[55.31878, 25.25584],
[55.33878, 25.23584],
]);
Демонстрация RulerControl
Нажмите на кнопку линейки, чтобы включить или отключить ее отображение.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="MapGL API ruler control example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.button {
padding: 4px 10px;
background: #00a81f;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
border: none;
color: #fff;
font-size: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
let mode = 'polyline';
let control = new mapgl.RulerControl(map, { position: 'centerRight', mode });
control.getRuler().setPoints([
[55.31878, 25.23584],
[55.31878, 25.25584],
[55.33878, 25.23584],
]);
const resetControl = new mapgl.Control(
map,
'<button class="button">Switch mode</button>',
{
position: 'topLeft',
},
);
resetControl
.getContainer()
.querySelector('button')
.addEventListener('click', function () {
const data = control.getRuler().getData();
control.destroy();
let points = [];
switch (data.type) {
case 'polyline':
points = data.coordinates;
break;
case 'polygon':
points = data.coordinates[0];
break;
}
mode = mode === 'polyline' ? 'polygon' : 'polyline';
control = new mapgl.RulerControl(map, { position: 'centerRight', mode });
control.getRuler().setPoints(points);
});
</script>
</body>
</html>