Как сделать эллипс в реактив-листовке?

Question

Я хочу сделать эллипс в реактивной листовке.И я проверил вопрос Как можно создать эллипс в реактивном листочке?

Когда я создаю файл типа "ellipse.js" и вставляю код в файл, кажется,не работает.

Кто-нибудь может помочь взглянуть на это?

спасибо.

Answer 1

Leaflet.Ellipse плагин может быть интегрирован с react-leaflet следующим образом:

а) установить leaflet-ellipse пакет :

npm i leaflet-ellipse

b) ввести следующий компонент для рисования эллипса:

import React, { Component } from "react";
import L from 'leaflet';
import "leaflet-ellipse";
import { withLeaflet } from "react-leaflet";

class Ellipse extends Component {
  componentDidMount() {
    const { latlng, radii, tilt, options } = this.props;
    const { map } = this.props.leaflet;
    L.ellipse(latlng, radii, tilt,options).addTo(map);
  }

  render() {
    return null;
  }
}

export default withLeaflet(Ellipse);

Использование

class MapExample extends React.Component {
  render() {
    const { zoom, center } = this.props;
    return (
      <div>
        <Map center={center} zoom={zoom}>
          <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <Ellipse
            latlng={[51.505, -0.05]}
            radii={[500, 200]}
            tilt={0}
            options={{
              color: "green",
              fillColor: "green",
              fillOpacity: 0.5
            }}
          />
          <Ellipse
            latlng={[51.508, -0.12]}
            radii={[750, 400]}
            tilt={135}
            options={{
              color: 'red', 
              fillColor: 'red',
              fillOpacity: 0.5
            }}
          />
        </Map>
      </div>
    );
  }
}

Демо