Создание полигона

Open on CodeSandbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
    <!-- To make the map appear, you must add your apikey -->
    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {LOCATION, POLYGON_COORDINATES, DASHED_POLYGON_COORDINATES} from './common';

      window.map = null;

      main();
      async function main() {
        // Waiting for all api elements to be loaded
        await ymaps3.ready;
        const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature} = ymaps3;
        // Initialize the map
        map = new YMap(
          // Pass the link to the HTMLElement of the container
          document.getElementById('app'),
          // Pass the map initialization parameters
          {location: LOCATION, showScaleInCopyrights: true},
          [
            // Add a map scheme layer
            new YMapDefaultSchemeLayer({}),
            // Add a layer of geo objects to display the polygons
            new YMapDefaultFeaturesLayer({})
          ]
        );

        // Create polygon objects, set their coordinates and styles, and add them to the map
        const polygon = new YMapFeature({
          geometry: {
            type: 'Polygon',
            coordinates: [POLYGON_COORDINATES]
          },
          style: {stroke: [{color: '#006efc', width: 4}], fill: 'rgba(56, 56, 219, 0.5)'}
        });
        map.addChild(polygon);

        const dashedPolygon = new YMapFeature({
          geometry: {
            type: 'Polygon',
            coordinates: [DASHED_POLYGON_COORDINATES]
          },
          style: {stroke: [{color: '#006efc', width: 4, dash: [5, 10]}], fill: 'rgba(56, 56, 219, 0.5)'}
        });
        map.addChild(dashedPolygon);
      }
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
    <link rel="stylesheet" href="./common.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
    <!-- To make the map appear, you must add your apikey -->
    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="react, typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
      import {LOCATION, POLYGON_COORDINATES, DASHED_POLYGON_COORDINATES} from './common';

      window.map = null;

      main();
      async function main() {
        // For each object in the JS API, there is a React counterpart
        // To use the React version of the API, include the module @yandex/ymaps3-reactify
        const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
        const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
        const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature} = reactify.module(ymaps3);

        function App() {
          return (
            // Initialize the map and pass initialization parameters
            <YMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
              {/* Add a map scheme layer */}
              <YMapDefaultSchemeLayer />
              {/* Add a layer of geo objects to display the polygons */}
              <YMapDefaultFeaturesLayer />

              {/* Add polygon objects to the map, set their coordinates and styles */}
              <YMapFeature
                geometry={{
                  type: 'Polygon',
                  coordinates: [POLYGON_COORDINATES]
                }}
                style={{stroke: [{color: '#006efc', width: 4}], fill: 'rgba(56, 56, 219, 0.5)'}}
              />

              <YMapFeature
                geometry={{
                  type: 'Polygon',
                  coordinates: [DASHED_POLYGON_COORDINATES]
                }}
                style={{stroke: [{color: '#006efc', width: 4, dash: [5, 10]}], fill: 'rgba(56, 56, 219, 0.5)'}}
              />
            </YMap>
          );
        }

        ReactDOM.render(
          <React.StrictMode>
            <App />
          </React.StrictMode>,
          document.getElementById('app')
        );
      }
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
    <link rel="stylesheet" href="./common.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

    <!-- To make the map appear, you must add your apikey -->
    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {LOCATION, POLYGON_COORDINATES, DASHED_POLYGON_COORDINATES} from './common';

      window.map = null;

      async function main() {
        // For each object in the JS API, there is a Vue counterpart
        // To use the Vue version of the API, include the module @yandex/ymaps3-vuefy
        const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
        const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
        const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature} = vuefy.module(ymaps3);

        const app = Vue.createApp({
          components: {
            YMap,
            YMapDefaultSchemeLayer,
            YMapDefaultFeaturesLayer,
            YMapFeature
          },
          setup() {
            const refMap = (ref) => {
              window.map = ref?.entity;
            };
            return {
              LOCATION,
              POLYGON_COORDINATES,
              DASHED_POLYGON_COORDINATES,
              refMap
            };
          },
          template: `
          <!--Initialize the map and pass initialization parameters-->
          <YMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
            <!--Add a map scheme layer-->
            <YMapDefaultSchemeLayer/>
            <!-- Add a layer of geo objects to display the polygons -->
            <YMapDefaultFeaturesLayer/>

            <!-- Add polygon objects to the map, set their coordinates and styles -->
            <YMapFeature
                :geometry="{
                    type: 'Polygon',
                    coordinates: [POLYGON_COORDINATES]
                }"
                :style="{stroke: [{color: '#006efc', width: 4}], fill: 'rgba(56, 56, 219, 0.5)'}"
            />

            <YMapFeature
                :geometry="{
                  type: 'Polygon',
                  coordinates: [DASHED_POLYGON_COORDINATES]
                }"
                :style="{stroke: [{color: '#006efc', width: 4, dash: [5, 10]}], fill: 'rgba(56, 56, 219, 0.5)'}"
            />
          </YMap>`
        });
        app.mount('#app');
      }
      main();
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

.test {
}

import type {YMapLocationRequest, LngLat} from '@yandex/ymaps3-types';

export const LOCATION: YMapLocationRequest = {
  center: [56.5426, -20.6731], // starting position [lng, lat]
  zoom: 8.5 // starting zoom
};

export 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]
];

export 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]
];