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

Answer 2

如果您尝试在React Hooks中显示/隐藏该层，则可以使用

import React, { useState, useEffect } from "react";
import L from 'leaflet';
import "leaflet-ellipse";
import { MapLayer, withLeaflet } from "react-leaflet";

function Ellipse({ latlng, radii, tilt, options, leaflet, show }) {
  const [layer, setLayer] = useState(null);
  const { map } = leaflet;

  useEffect(() => {
    if (show === false) {
      map.removeLayer(layer);
    } else {
      const x = L.ellipse(latlng, radii, tilt, options).addTo(map);
      setLayer(x);
    }
  }, [show])

  return (null);
}

export default withLeaflet(Ellipse);

Answer 3

从第 3 版开始，withLeaflet is no longer working。

您需要使用 React-Leaflet Hooks 和 React-Leaflet Core API。

我有一个 Demo on Stack Blitz set up here，您的代码应如下所示：

import { createPathComponent } from "@react-leaflet/core";
import L from "leaflet";
import "leaflet-ellipse";

// Instead of having the Leaflet element creation and updating logic 
// in useEffect callbacks, we can extract them to standalone functions 
// implementing the expected interface:
// Set State:
function createEllipse(props, context) {
  const { center, radii, tilt, options } = props;
  // Create the leaflet.ellipse instance:
  const instance = new L.Ellipse(center, radii, tilt, options);
  // Return the instance and context:
  return {
    instance,
    context: { ...context, overlayContainer: instance }
  };
}

// Update state:
function updateEllipse(instance, props, prevProps) {
  // If props have changed:
  if (
    props.center !== prevProps.center ||
    props.radii !== prevProps.radii ||
    props.tilt !== prevProps.tilt ||
    props.options !== prevProps.options
  ) {
    // Change the Style, LatLng, Radii, and Tilt of our ellipse instance:
    instance.setStyle(props.options);
    instance.setLatLng(props.center);
    instance.setRadius(props.radii);
    instance.setTilt(props.tilt);
  }
}

// Create our component with the React-Leaflet Higher-Level Component Factory,
// the createPathComponent hook. This hook combines the createElementHook, createPathHook,
// and createContainerComponent hooks from the React-Leaflet Core Api:
const Ellipse = createPathComponent(createEllipse, updateEllipse);

export default Ellipse;

如何在react-leaflet中制作椭圆形？

3 个答案:

从第 3 版开始，withLeaflet is no longer working。

来源：