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

vanilla.html

react.html

vue.html

variables.ts

<!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="react, typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {LOCATION, POLYGON_STYLE, POLYGONS_COORDINATES} from '../variables';
            
            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({})
                    ]
                );
            
                for (const polygonCoords of POLYGONS_COORDINATES) {
                    // Create polygon objects, set their coordinates and styles, and add them to the map
                    const polygon = new YMapFeature({
                        geometry: {
                            type: 'Polygon',
                            coordinates: [polygonCoords]
                        },
                        style: POLYGON_STYLE
                    });
                    map.addChild(polygon);
                }
            }
        </script>

        <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>

<!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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import {LOCATION, POLYGON_STYLE, POLYGONS_COORDINATES} from '../variables';
            
            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 */}
                            {POLYGONS_COORDINATES.map((polygonCoords) => (
                                <YMapFeature
                                    geometry={{
                                        type: 'Polygon',
                                        coordinates: [polygonCoords]
                                    }}
                                    style={POLYGON_STYLE}
                                />
                            ))}
                        </YMap>
                    );
                }
            
                ReactDOM.render(
                    <React.StrictMode>
                        <App />
                    </React.StrictMode>,
                    document.getElementById('app')
                );
            }
        </script>

        <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>

<!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>

        <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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {POLYGONS_COORDINATES, LOCATION, POLYGON_STYLE} from '../variables';
            
            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,
                            POLYGONS_COORDINATES,
                            POLYGON_STYLE,
                            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
                            v-for="polygonCoords in POLYGONS_COORDINATES"
                            :key="polygonCoords"
                            :geometry="{
                                type: 'Polygon',
                                coordinates: [polygonCoords]
                            }"
                            :style="POLYGON_STYLE"
                          />
                      </YMap>`
                });
                app.mount('#app');
            }
            
            main();
        </script>

        <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>

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

export const LOCATION: YMapLocationRequest = {
    center: [60.6218, 56.8418], // starting position [lng, lat]
    zoom: 12.6 // starting zoom
};

const firstPolygon: LngLat[] = [
    [-299.2943573, 56.8827509],
    [-299.2887354, 56.8821178],
    [-299.2845726, 56.8806875],
    [-299.2836714, 56.8787881],
    [-299.2819118, 56.8774046],
    [-299.2783928, 56.8747781],
    [-299.2766762, 56.8724328],
    [-299.2751312, 56.870275],
    [-299.2763329, 56.8683048],
    [-299.2749596, 56.8660529],
    [-299.2725563, 56.8640824],
    [-299.2730713, 56.8593904],
    [-299.2765045, 56.8547916],
    [-299.2816544, 56.8504739],
    [-299.2893791, 56.8483149],
    [-299.2980695, 56.847646],
    [-299.3020391, 56.8477281],
    [-299.3041849, 56.8479628],
    [-299.305687, 56.8477281],
    [-299.3063736, 56.8474348],
    [-299.307189, 56.8474935],
    [-299.3078971, 56.8478338],
    [-299.3079829, 56.8482797],
    [-299.3087769, 56.8487138],
    [-299.310236, 56.8486317],
    [-299.3112874, 56.8483618],
    [-299.3122745, 56.8486786],
    [-299.3120599, 56.8489485],
    [-299.3139696, 56.8503214],
    [-299.3167806, 56.852011],
    [-299.3166733, 56.8542989],
    [-299.3167591, 56.8546156],
    [-299.3164587, 56.8553078],
    [-299.3159652, 56.8559179],
    [-299.3155146, 56.8569034],
    [-299.3152785, 56.857924],
    [-299.3140984, 56.8592614],
    [-299.3139482, 56.8596367],
    [-299.3132186, 56.8602937],
    [-299.3125534, 56.8603992],
    [-299.3099785, 56.8614784],
    [-299.3093348, 56.8615957],
    [-299.3085837, 56.8615488],
    [-299.3083048, 56.8612438],
    [-299.3069744, 56.8614198],
    [-299.3065882, 56.8617717],
    [-299.3063736, 56.8634021],
    [-299.3054295, 56.8644578],
    [-299.3052149, 56.865185],
    [-299.3058372, 56.8658183],
    [-299.3063736, 56.8667214],
    [-299.3072104, 56.866956],
    [-299.3083262, 56.8670733],
    [-299.3096995, 56.8683165],
    [-299.3095279, 56.8688208],
    [-299.3100643, 56.8698997],
    [-299.3101072, 56.8706737],
    [-299.3098927, 56.8712718],
    [-299.3098712, 56.8721162],
    [-299.3099785, 56.8724211],
    [-299.3099141, 56.8727729],
    [-299.3093562, 56.8732654],
    [-299.3087769, 56.8735116],
    [-299.3084335, 56.8738751],
    [-299.3081331, 56.8739807],
    [-299.3078971, 56.8742504],
    [-299.3074465, 56.8743794],
    [-299.305644, 56.8765838],
    [-299.3034124, 56.8782957],
    [-299.3030691, 56.8795151],
    [-299.3025541, 56.8802185],
    [-299.3019104, 56.8807578],
    [-299.3007946, 56.8812033],
    [-299.3003225, 56.8818364],
    [-299.2984772, 56.882024],
    [-299.2950439, 56.8825633]
];
const secondPolygon: LngLat[] = [
    [-299.4184685, 56.8357336],
    [-299.4143486, 56.8254025],
    [-299.3638802, 56.8306623],
    [-299.368, 56.8413675],
    [-299.4181252, 56.8359214]
];
const thirdPolygon: LngLat[] = [
    [-299.3589878, 56.8510841],
    [-299.3461132, 56.8573257],
    [-299.34062, 56.8412736],
    [-299.3529797, 56.8397244],
    [-299.3569279, 56.8495352],
    [-299.3576145, 56.8504035],
    [-299.3590307, 56.8510841]
];
const fourthPolygon: LngLat[] = [
    [-299.3820763, 56.8238057],
    [-299.3621635, 56.8258722],
    [-299.3597603, 56.818357],
    [-299.379158, 56.8165719],
    [-299.3819046, 56.823336]
];
const fifthPolygon: LngLat[] = [
    [-299.4104004, 56.8135653],
    [-299.4076538, 56.8066115],
    [-299.390316, 56.808397],
    [-299.3923759, 56.8154444],
    [-299.4104004, 56.8137532]
];

export const POLYGONS_COORDINATES: LngLat[][] = [
    firstPolygon,
    secondPolygon,
    thirdPolygon,
    fourthPolygon,
    fifthPolygon
];

export const POLYGON_STYLE = {
    stroke: [
        {
            color: '#196DFF99',
            width: 3
        }
    ],
    fill: '#196DFF14'
};