如何在react-leaflet中制作椭圆形? [英] How to make an ellipse in react-leaflet?

问题描述

我想在react-leaflet中做成一个椭圆形. 我已经检查了问题 如何在react-leaflet中制作一个椭圆形?

I want to make an ellipse in react-leaflet. And I have checked the question How can one make an ellipse in react-leaflet?

当我创建"ellipse.js"之类的文件并将代码粘贴到文件中时，似乎不起作用.

When I make a file like "ellipse.js" and paste the code in the file, it seems doesn't work.

有人可以帮忙看看吗?

Can anybody help to take a look at this?

谢谢.

推荐答案

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

a)安装 leaflet-ellipse软件包:

a) install leaflet-ellipse package:

npm i leaflet-ellipse

b)引入以下组件来绘制椭圆:

b) introduce the following component to draw an ellipse:

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

演示

这篇关于如何在react-leaflet中制作椭圆形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！