如何使用Typescript + react-leaflet创建GeoJSON功能元素

npx create-react-app my-app
cd my-app

npm install react-leaflet leaflet @types/leaflet

npm install typescript @types/react @types/react-dom @types/node

import React from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';

const geojsonData = {
  // 在这里定义你的GeoJSON数据
};

const MapComponent: React.FC = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <GeoJSON data={geojsonData} />
    </MapContainer>
  );
};

export default MapComponent;

import React from 'react';
import MapComponent from './MapComponent';

const App: React.FC = () => {
  return (
    <div>
      <h1>使用Typescript + react-leaflet创建GeoJSON功能元素</h1>
      <MapComponent />
    </div>
  );
};

export default App;

npm start