Skip to content

Создание прямоугольника

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 }],
    },
};

Сделано с ♥ под лицензией MIT.