使用react- leaflet -draw in leaflet创建新图层之前删除图层

在Leaflet中使用react-leaflet-draw插件创建新图层之前删除图层，可以按照以下步骤进行操作：

首先，确保已经安装了Leaflet和react-leaflet-draw插件，并在项目中引入它们。
创建一个Leaflet地图实例，并将其渲染到页面上的某个容器中。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import 'leaflet-draw';

class MapComponent extends Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
      </Map>
    );
  }
}

export default MapComponent;

在地图组件中，使用react-leaflet-draw插件创建一个绘制控件，并将其添加到地图上。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import 'leaflet-draw';

class MapComponent extends Component {
  render() {
    const drawOptions = {
      position: 'topright',
      draw: {
        polyline: false,
        polygon: true,
        circle: false,
        rectangle: false,
        marker: false,
      },
      edit: {
        featureGroup: this.featureGroup,
      },
    };

    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
        <EditControl {...drawOptions} />
      </Map>
    );
  }
}

export default MapComponent;

在地图组件的构造函数中，创建一个FeatureGroup实例，并将其保存在组件的实例变量中。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import 'leaflet-draw';

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.featureGroup = new L.FeatureGroup();
  }

  render() {
    // ...
  }
}

export default MapComponent;

在绘制控件的onCreated事件处理程序中，将绘制的图层添加到FeatureGroup中。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import 'leaflet-draw';

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.featureGroup = new L.FeatureGroup();
  }

  handleCreated = (e) => {
    const { layerType, layer } = e;
    if (layerType === 'polygon') {
      this.featureGroup.addLayer(layer);
    }
  };

  render() {
    const drawOptions = {
      position: 'topright',
      draw: {
        polyline: false,
        polygon: true,
        circle: false,
        rectangle: false,
        marker: false,
      },
      edit: {
        featureGroup: this.featureGroup,
      },
    };

    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
        <EditControl onCreated={this.handleCreated} {...drawOptions} />
      </Map>
    );
  }
}

export default MapComponent;

如果需要在创建新图层之前删除之前的图层，可以在handleCreated事件处理程序中添加删除逻辑。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import 'leaflet-draw';

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.featureGroup = new L.FeatureGroup();
  }

  handleCreated = (e) => {
    const { layerType, layer } = e;
    if (layerType === 'polygon') {
      // 删除之前的图层
      this.featureGroup.clearLayers();
      this.featureGroup.addLayer(layer);
    }
  };

  render() {
    const drawOptions = {
      position: 'topright',
      draw: {
        polyline: false,
        polygon: true,
        circle: false,
        rectangle: false,
        marker: false,
      },
      edit: {
        featureGroup: this.featureGroup,
      },
    };

    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
        <EditControl onCreated={this.handleCreated} {...drawOptions} />
      </Map>
    );
  }
}

export default MapComponent;

通过以上步骤，你可以在Leaflet中使用react-leaflet-draw插件创建新图层之前删除之前的图层。这样可以确保每次只有一个图层存在，避免图层重叠或混淆的问题。

腾讯云相关产品和产品介绍链接地址：