javascript - 如何在 react 传单中制作椭圆？

Question

我想在 react-leaflet 中制作一个椭圆。我已经检查了这个问题 How can one make an ellipse in react-leaflet?

当我制作一个像“ellipse.js”这样的文件并将代码粘贴到文件中时，它似乎不起作用。

谁能帮忙看看这个？

谢谢。

Answer 1

Leaflet.Ellipse plugin可以像这样与 react-leaflet 集成:

a) 安装 leaflet-ellipse package :

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>
    );
  }
}

Demo