R1ZEN / react-yandex-maps

Yandex.Maps API bindings for React (fork https://github.com/gribnoysup/react-yandex-maps)
https://pbe-react-yandex-maps.vercel.app
MIT License
125 stars 21 forks source link

Property 'startDrawing' does not exist on type 'IGeometryEditor'. #89

Closed asya-aisa closed 2 weeks ago

asya-aisa commented 1 month ago

Добрый день, я недавно начала использовать typescript, подскажите, пожалуйста, решение. В документации яндекс карт нет типа для startDrawing, что тут можно сделать? я попробовала переназначить тип, но не уверена, безопасно ли это для кода. Прикрепляю первый код с ошибкой + скрины ошибки и второй код - мой исправленный вариант.

import { Map, Polygon, SearchControl, YMaps } from '@pbe'
import { FC, useCallback, useState } from 'react'
import '../../App.css'

export const MapComponent: FC = () => {
    const [isEdit, setIsEdit] = useState<boolean>(false)

    const API_KEY: string = '05f8d2ae-bd94-4329-b9f9-7351e2ec9627'

    const polygonOptions = {
        fillColor: '#00FF00',
        strokeColor: '#0000FF',
        opacity: 0.5,
        strokeWidth: 3,
        strokeStyle: 'solid',
    }

    const handleEditPolygon = useCallback(
        (polygon: ymaps.GeoObject) => {
            if (polygon) {
                if (isEdit) {
                    polygon.editor.startEditing()
                    polygon.editor.startDrawing()
                } else {
                    polygon.editor.stopEditing()
                    polygon.editor.stopDrawing()
                }
            }
        },
        [isEdit]
    )

    return (
        <YMaps
            query={{
                load: 'package.full',
                apikey: API_KEY,
            }}
        >
            <Map
                modules={['geoObject.addon.editor']}
                state={{
                    center: [55.751574, 37.573856],
                    zoom: 10,
                }}
                className='map'
            >
                <SearchControl
                    options={{
                        float: 'right',
                    }}
                />

                <Polygon
                    geometry={[
                        [
                            [55.75, 37.3],
                            [55.9, 37.6],
                            [55.74, 37.9],
                            [55.6, 37.6],
                        ],
                    ]}
                    options={polygonOptions}
                    modules={['geoObject.addon.balloon']}
                    instanceRef={polygon => handleEditPolygon(polygon)}
                />
            </Map>
        </YMaps>
    )
}

image image

мой исправленный вариант

import { Map, Polygon, SearchControl, YMaps } from '@pbe/react-yandex-maps'
import { FC, useCallback, useState } from 'react'
import '../../App.css'

export const MapComponent: FC = () => {
    const [isEdit, setIsEdit] = useState<boolean>(false)
    const API_KEY: string = '05f8d2ae-bd94-4329-b9f9-7351e2ec9627'

    const polygonOptions = {
        fillColor: '#00FF00',
        strokeColor: '#0000FF',
        opacity: 0.5,
        strokeWidth: 3,
        strokeStyle: 'solid',
    }

    const handleEditPolygon = useCallback((polygon: ymaps.GeoObject) => {
        if (polygon) {
            if (isEdit) {
                polygon.editor.startEditing()

                const editor = polygon.editor as unknown as {
                    startDrawing: () => void
                }
                editor.startDrawing()
            } else {
                ;(polygon as ymaps.GeoObject).editor.stopEditing()

                const editor = (polygon as ymaps.GeoObject).editor as unknown as {
                    stopDrawing: () => void
                }

                editor.stopDrawing()
            }
        }
    }, [isEdit])

    return (
        <YMaps
            query={{
                load: 'package.full',
                apikey: API_KEY,
            }}
        >
            <Map
                modules={['geoObject.addon.editor']}
                state={{
                    center: [55.751574, 37.573856],
                    zoom: 10,
                }}
                className='map'
            >
                <SearchControl
                    options={{
                        float: 'right',
                    }}
                />

                <Polygon
                    geometry={[
                        [
                            [55.75, 37.3],
                            [55.9, 37.6],
                            [55.74, 37.9],
                            [55.6, 37.6],
                        ],
                    ]}
                    options={polygonOptions}
                    modules={['geoObject.addon.balloon']}
                    instanceRef={polygon =>
                        handleEditPolygon(polygon as unknown as ymaps.GeoObject)
                    }
                />
            </Map>
        </YMaps>
    )
}