Создание прямоугольника
html
<yandex-map
:height="height"
:settings="{
location: {
center,
zoom: 11,
},
theme,
showScaleInCopyrights: true,
}"
:width="width"
>
<yandex-map-default-scheme-layer/>
<yandex-map-default-features-layer/>
<yandex-map-controls :settings="{ position: 'right' }">
<yandex-map-zoom-control/>
</yandex-map-controls>
<yandex-map-feature :settings="FEATURE1"/>
<yandex-map-feature :settings="FEATURE2"/>
</yandex-map>
ts
import {
YandexMap,
YandexMapControls,
YandexMapDefaultFeaturesLayer,
YandexMapDefaultSchemeLayer,
YandexMapFeature,
YandexMapZoomControl,
} from 'vue-yandex-maps';
import type { YMapFeatureProps } from '@yandex/ymaps3-types';
const FEATURE1: YMapFeatureProps = {
id: 'one',
draggable: true,
geometry: {
type: 'Polygon',
coordinates: [
[
// Specify the coordinates of the vertices of the rectangle.
[37.6, 55.66],
[37.66, 55.66],
[37.66, 55.71],
[37.6, 55.71],
],
],
},
style: {
fill: 'rgba(56, 56, 219, 0.5)',
stroke: [{ color: '#f00', width: 4 }],
},
};
const FEATURE2: YMapFeatureProps = {
id: 'second',
geometry: {
type: 'Polygon',
coordinates: [
[
[37.63, 55.665],
[37.73, 55.665],
[37.73, 55.76],
[37.63, 55.76],
],
],
},
style: {
fill: 'rgba(44,52,42,0.5)',
stroke: [{ color: '#00ff5a', width: 1 }],
},
};