尝试使用react-leaflet-draw和Vite绘制矩形时出现错误“未捕获的ReferenceError：分配给未声明的变量类型”

Question

我在尝试绘制矩形时遇到错误“Uncaught ReferenceError：分配给未声明的变量类型”， 所有其他形状都工作正常，但矩形不起作用，当我使用 Vite 时，它会抛出此错误，当我使用 webpack 时它工作得很好

版本：

"react": "^18.2.0",
"leaflet": "^1.9.4",
"react-leaflet": "^4.2.1",
"react-leaflet-draw": "^0.20.4",

import React, { useState } from 'react';
import L from 'leaflet';
import { FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

const EditFeature = () => {
    const _onEdited = (e) => {
        let numEdited = 0;
        e.layers.eachLayer((layer) => {
            numEdited += 1;
        });
        console.log(`_onEdited: edited ${numEdited} layers`, e);

        // this._onChange();
    };

    const _onCreated = (e) => {
        alert('test');

        let type = e.layerType;
        let layer = e.layer;
        if (type === 'marker') {
            // Do marker specific actions
            console.log('_onCreated: marker created', e);
        } else {
            console.log('_onCreated: something else created:', type, e);
        }

        console.log('Geojson', layer.toGeoJSON());
        console.log('coords', layer.getLatLngs());
        // Do whatever else you need to. (save to db; etc)

        // this._onChange();
    };

    const _onDeleted = (e) => {
        let numDeleted = 0;
        e.layers.eachLayer((layer) => {
            numDeleted += 1;
        });
        console.log(`onDeleted: removed ${numDeleted} layers`, e);

        // this._onChange();
    };

    const _onMounted = (drawControl) => {
        console.log('_onMounted', drawControl);
    };

    const _onEditStart = (e) => {
        console.log('_onEditStart', e);
    };

    const _onEditStop = (e) => {
        console.log('_onEditStop', e);
    };

    const _onDeleteStart = (e) => {
        console.log('_onDeleteStart', e);
    };

    const _onDeleteStop = (e) => {
        console.log('_onDeleteStop', e);
    };

    const _onDrawStart = (e) => {
        console.log('_onDrawStart', e);
    };

    return (
        <FeatureGroup>
            <EditControl
                onDrawStart={_onDrawStart}
                position='topleft'
                onEdited={_onEdited}
                onCreated={_onCreated}
                onDeleted={_onDeleted}
                draw={{
                    polyline: {
                        icon: new L.DivIcon({
                            iconSize: new L.Point(8, 8),
                            className: 'leaflet-div-icon leaflet-editing-icon'
                        }),
                        shapeOptions: {
                            guidelineDistance: 10,
                            color: 'navy',
                            weight: 3
                        }
                    },
                    rectangle: true,
                    circlemarker: false,
                    circle: false,
                    polygon: false
                }}
            />
        </FeatureGroup>
    );
};

export default EditFeature;

这是问题的屏幕截图

https://firebasestorage.googleapis.com/v0/b/markosbahgat-e49a2.appspot.com/o/Screenshot%20from%202023-08-13%2013-14-25.png?alt=media&token=570bd97c- 196d-415f-9721-e45d1b01429e

Answer 1

您可以从repo复制原始函数，修复类型变量，然后替换它。

（除了声明类型变量的一行之外，我没有更改原始函数。）

L.GeometryUtil = L.extend(L.GeometryUtil || {}, {
    readableArea: function (area, isMetric, precision) {
        var areaStr,
            units,
            type,
          // ^ Note type variable is added here 
            precision = L.Util.extend({}, defaultPrecision, precision);

        if (isMetric) {
            units = ['ha', 'm'];
            type = typeof isMetric;
            if (type === 'string') {
                units = [isMetric];
            } else if (type !== 'boolean') {
                units = isMetric;
            }

            if (area >= 1000000 && units.indexOf('km') !== -1) {
                areaStr = L.GeometryUtil.formattedNumber(area * 0.000001, precision['km']) + ' km²';
            } else if (area >= 10000 && units.indexOf('ha') !== -1) {
                areaStr = L.GeometryUtil.formattedNumber(area * 0.0001, precision['ha']) + ' ha';
            } else {
                areaStr = L.GeometryUtil.formattedNumber(area, precision['m']) + ' m²';
            }
        } else {
            area /= 0.836127; // Square yards in 1 meter

            if (area >= 3097600) { //3097600 square yards in 1 square mile
                areaStr = L.GeometryUtil.formattedNumber(area / 3097600, precision['mi']) + ' mi²';
            } else if (area >= 4840) { //4840 square yards in 1 acre
                areaStr = L.GeometryUtil.formattedNumber(area / 4840, precision['ac']) + ' acres';
            } else {
                areaStr = L.GeometryUtil.formattedNumber(area, precision['yd']) + ' yd²';
            }
        }

        return areaStr;
    }
});