Создание полигона
html
<yandex-map
v-model="map"
:settings="{
location: LOCATION,
theme,
showScaleInCopyrights: true,
}"
:width="width"
:height="height"
>
<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 v-for="(feature, index) in features" :key="index" :settings="feature" />
</yandex-map>ts
import {
YandexMap,
YandexMapControls,
YandexMapDefaultFeaturesLayer,
YandexMapDefaultSchemeLayer,
YandexMapFeature,
YandexMapZoomControl,
} from 'vue-yandex-maps';
import { shallowRef } from 'vue';
import type { LngLat, YMap, YMapFeatureProps } from '@yandex/ymaps3-types';
import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap';
const map = shallowRef<YMap | null>(null);
const LOCATION: YMapLocationRequest = {
center: [56.5426, -20.6731], // starting position [lng, lat]
zoom: 8, // starting zoom
};
const defaultSettings = {
geometry: {
type: 'Polygon',
},
style: {
stroke: [{
color: '#006efc',
width: 4,
}],
fill: 'rgba(56, 56, 219, 0.5)',
},
} satisfies Omit<YMapFeatureProps, 'geometry'> & { geometry: Partial<YMapFeatureProps['geometry']> };
const POLYGON_COORDINATES: LngLat[] = [
[55.23552357664134, -21.017790222253545],
[55.247375661860424, -21.019813576876416],
[55.27538968146916, -21.00413185217551],
[55.282393186371344, -20.974787373851168],
[55.276467143761806, -20.95657062698021],
[55.28077699293238, -20.948979653267394],
[55.28077699293238, -20.937845520537877],
[55.284009379810314, -20.92519208028493],
[55.288319228980896, -20.92316742950606],
[55.30232623878526, -20.92873515255186],
[55.34542473049101, -20.922661262487228],
[55.35135077310055, -20.91152515055328],
[55.394987995952626, -20.88114968434353],
[55.421924553268724, -20.873554846186842],
[55.44078014339, -20.876592828065444],
[55.44832237943851, -20.871023147148318],
[55.46663923841345, -20.884187510824972],
[55.50273422521702, -20.882668605355263],
[55.54744891036174, -20.895325675954506],
[55.555529877556566, -20.891275530823545],
[55.581388972580015, -20.897856960511024],
[55.592702326652784, -20.89583193632143],
[55.62017761511519, -20.910006524996188],
[55.640110667529115, -20.91304376055101],
[55.665969762552564, -20.925698238655364],
[55.69775490018556, -20.965173259456712],
[55.70260348050246, -21.015260989917046],
[55.70691332967303, -21.026895099299512],
[55.71930414603843, -21.03195312122404],
[55.733311155842806, -21.04965482995931],
[55.732233693550164, -21.06280329254686],
[55.757231765238004, -21.089111898442784],
[55.761654047030255, -21.0983344829384],
[55.771972704545526, -21.10525104107762],
[55.78425682063514, -21.12369360205876],
[55.795066842794, -21.124615669223502],
[55.82504008605263, -21.14305579424648],
[55.83502351916447, -21.160265147718587],
[55.83711567788211, -21.18297265534579],
[55.822688305475175, -21.207121792308097],
[55.81374175845885, -21.21897701356349],
[55.80881024148156, -21.23495031555173],
[55.80572485831597, -21.289008242036463],
[55.8094847016364, -21.330400842430706],
[55.80718858005149, -21.33679546486688],
[55.79712410976588, -21.350016583669003],
[55.782464990002055, -21.360674591904225],
[55.7748072408717, -21.36426124521594],
[55.75508255424453, -21.363262915594078],
[55.75224850767004, -21.36617326809467],
[55.74422154660723, -21.368321626422638],
[55.726950668327135, -21.369418411313482],
[55.717729775686074, -21.373942561140765],
[55.70016617065548, -21.37627312858491],
[55.690067097762885, -21.374902211104665],
[55.677626210866215, -21.375587671468296],
[55.67777257424146, -21.378466569537192],
[55.671625312480764, -21.38353877437351],
[55.66358168977258, -21.38165666571665],
[55.64691061293218, -21.389116670056815],
[55.633018048898506, -21.382177143621448],
[55.60986377550906, -21.38668787368018],
[55.59041418586193, -21.376451783677624],
[55.57301374940977, -21.375441282921404],
[55.56329763743871, -21.37153882676907],
[55.55107218108909, -21.373967877489772],
[55.54199570592043, -21.366507092023564],
[55.49673660629282, -21.351082909981884],
[55.48455852981631, -21.35228803527813],
[55.47483836139122, -21.346410259554244],
[55.460097499583725, -21.341460239816882],
[55.45620322461116, -21.33808201029897],
[55.454007765120515, -21.33113422275632],
[55.450906768383106, -21.329208504447212],
[55.430224630077575, -21.326025312039906],
[55.41582984153423, -21.31868139961077],
[55.41107017212332, -21.313241557275145],
[55.40836581450349, -21.30675402537443],
[55.40275223210768, -21.30255101336996],
[55.39770409788398, -21.2958940414403],
[55.38717513221742, -21.290149201200137],
[55.335289777649514, -21.277689034668636],
[55.3322969552169, -21.27245044528681],
[55.334491710447736, -21.270201411342878],
[55.33153494611672, -21.26526674930041],
[55.33167917852311, -21.26080512999207],
[55.32914130791924, -21.25742066709771],
[55.32023495682457, -21.25201233462142],
[55.32084794455174, -21.24937569970719],
[55.307837308213095, -21.237938505595924],
[55.293428575325784, -21.2296538263028],
[55.29294010073069, -21.223059817445733],
[55.28911794196133, -21.218935009653034],
[55.28572135210748, -21.20714147449081],
[55.28124202243512, -21.203438813104754],
[55.28656039857354, -21.187482876043443],
[55.287102658894064, -21.1601286316958],
[55.28148251490065, -21.153222163598308],
[55.27247510348071, -21.14859373087417],
[55.2707565633893, -21.143454256026153],
[55.27194574411047, -21.14274215147096],
[55.27132581479235, -21.131460468166107],
[55.268540575159314, -21.130205110890117],
[55.26725718042644, -21.1273356824492],
[55.26337968995693, -21.126310872962534],
[55.25319199760895, -21.11378460013401],
[55.25370373743114, -21.109709364642114],
[55.23186907818154, -21.092366736385795],
[55.22097608787383, -21.078044351631057],
[55.22217955327842, -21.054514316342374],
[55.22400750397655, -21.054088274333775],
[55.21793613481595, -21.04395184611717],
[55.216978944768464, -21.036065622343777],
[55.233862653788506, -21.018820986313326],
];
const DASHED_POLYGON_COORDINATES: LngLat[] = [
[57.32249651661454, -20.43249351148491],
[57.32587994241797, -20.435740260485453],
[57.32215550316606, -20.442200089108557],
[57.3454316274164, -20.443770045984888],
[57.368029615077916, -20.414701362840205],
[57.36835995887095, -20.394758766385234],
[57.376669715487175, -20.393699115361496],
[57.37759974732159, -20.388146488714035],
[57.358694332642926, -20.37950412341211],
[57.360056587825916, -20.371347015189045],
[57.37177277549398, -20.365947042666363],
[57.36011870901005, -20.35417309619383],
[57.362989555382, -20.34046328224021],
[57.365479970617514, -20.333695895644226],
[57.379400076162796, -20.323053958589153],
[57.36671081758194, -20.31432801382359],
[57.362689204357295, -20.297128561805437],
[57.36475464162945, -20.281583465227662],
[57.38365863158688, -20.24951443511646],
[57.38094361788167, -20.241143959103592],
[57.38670807276153, -20.226308665333452],
[57.394491112049835, -20.216142921135],
[57.40155014768341, -20.216399208659684],
[57.40470316945905, -20.205812977047664],
[57.402531158494874, -20.198978026579855],
[57.43141034919715, -20.174028549769126],
[57.46305086438527, -20.164301331445557],
[57.47734993656612, -20.168488717135332],
[57.47547100226798, -20.16305199863398],
[57.481799023294094, -20.156596020239792],
[57.47686214221986, -20.152345274467386],
[57.50188583900391, -20.113639659716295],
[57.51306110811848, -20.107276962778467],
[57.508162360013465, -20.090862888580265],
[57.515208099262495, -20.087104210208075],
[57.51195335674138, -20.075800084844808],
[57.522570999694345, -20.05038667364209],
[57.54135866842445, -20.041013834337477],
[57.54645423358073, -20.02698299280485],
[57.55676285075999, -20.017766473602517],
[57.55191649948466, -19.99980250944241],
[57.57008178440513, -20.00314754953536],
[57.58034399082124, -20.001029032494568],
[57.58942663328148, -19.988317324488488],
[57.610304915300446, -19.98229562677122],
[57.62937641762242, -19.98515881534338],
[57.649160050310165, -20.00243136808681],
[57.6525187998089, -19.996589395679198],
[57.66353549816477, -20.00116139274575],
[57.66232634834521, -20.00433631165819],
[57.682747545297545, -20.008781089260918],
[57.68355364517724, -20.02947937962495],
[57.67979184573865, -20.031003071185488],
[57.68625934203197, -20.03819363403197],
[57.68361667341852, -20.05725203293537],
[57.687789308071345, -20.057317747502132],
[57.686467973764614, -20.06218054817272],
[57.705151035729216, -20.086059666818777],
[57.711436365611426, -20.086059666818777],
[57.707997222845684, -20.089981026278004],
[57.70942031640393, -20.098047510558832],
[57.74720363852993, -20.107615449356075],
[57.75851857988136, -20.127395747094063],
[57.75463434628312, -20.12930983512024],
[57.74826870484312, -20.15454903192498],
[57.7710864169079, -20.167396954089416],
[57.77646473181967, -20.19436343296719],
[57.78984634757204, -20.20488662713093],
[57.80820754773645, -20.230588184477053],
[57.80351608640407, -20.237081046175845],
[57.78752474951776, -20.24360571579353],
[57.79843056502946, -20.249745197491375],
[57.79409081713122, -20.259153790871025],
[57.797198786920305, -20.267282155222066],
[57.789500652497686, -20.278910789389414],
[57.79560194461318, -20.283764696421855],
[57.796858092989886, -20.291158143017594],
[57.789261386140225, -20.294544335278385],
[57.78028889773508, -20.290480895581027],
[57.773110907010995, -20.296463144322924],
[57.780565549460924, -20.302888245941958],
[57.781163715354595, -20.312368669071024],
[57.77069581221528, -20.318632197782453],
[57.76836787205955, -20.33081047354201],
[57.77841705907329, -20.334872842181877],
[57.77865632543077, -20.338596585227876],
[57.76711172368284, -20.338483745862987],
[57.76539542711781, -20.348678956679798],
[57.745421777806, -20.35581322728259],
[57.72884789858983, -20.375530936943786],
[57.71320895614995, -20.378656681213425],
[57.70870426077323, -20.37032122076203],
[57.7026696688535, -20.36911895329153],
[57.70159009239519, -20.39475486777007],
[57.693214726934904, -20.394888712263718],
[57.70895700967868, -20.402233363290925],
[57.713007388902135, -20.42003563770073],
[57.718334521153054, -20.416563649376506],
[57.72800227968248, -20.426669395009807],
[57.727205207219335, -20.435370860629035],
[57.7189297156476, -20.44543826883478],
[57.699251218371074, -20.440751525405364],
[57.69876202675105, -20.443863929418587],
[57.708749688992796, -20.44859005061613],
[57.677902908813486, -20.471251264740847],
[57.6820610375835, -20.47524662336269],
[57.64752024214241, -20.490788652457482],
[57.626075750378284, -20.494034471037796],
[57.61129219490099, -20.50115141109759],
[57.60087828385787, -20.500635196817377],
[57.58570665146525, -20.513199064656597],
[57.555051781812416, -20.516565846564458],
[57.55217715672751, -20.52032719713432],
[57.52878090256418, -20.525592930840183],
[57.520715982187056, -20.51942448152471],
[57.510974197177056, -20.522960086898436],
[57.499257667005125, -20.517392763996735],
[57.481051708134, -20.519423893817507],
[57.446258298251784, -20.50137305736589],
[57.4408166875749, -20.508480840853583],
[57.416492093586065, -20.511965779926726],
[57.370823863224516, -20.490265388328204],
[57.37061991777489, -20.48507665752436],
[57.365766016073295, -20.48865113555827],
[57.35402617475588, -20.486701470966743],
[57.34168171344736, -20.465889402098604],
[57.33515134686922, -20.46248602809869],
[57.33958745869942, -20.463672491101953],
[57.33866414310189, -20.461260868247294],
[57.32145687913904, -20.459773979551034],
[57.315099191738895, -20.468401033077964],
[57.30849006571621, -20.466910815325907],
[57.31979022558456, -20.43634311384356],
];
const features: YMapFeatureProps[] = [
{
...defaultSettings,
geometry: {
...defaultSettings.geometry,
coordinates: [POLYGON_COORDINATES],
},
},
{
...defaultSettings,
geometry: {
...defaultSettings.geometry,
coordinates: [DASHED_POLYGON_COORDINATES],
},
},
];