react-leaflet-editable

这是一个轻量的react组件，基于 react-leaflet 和 leaflet-editable. 它仅仅提供了一些地图编辑的api，你可以随意的更改你的UI.

Example

瞧一瞧 DEMO

How to use

Install

npm install react-leaflet-editable -S

Introducing dependency and import component

Note:

• 在 import react-leaflet-editable之前先 安装 react-leaflet and leaflet-eidtable
• Map组件<Map /> 必须包含 ref and editable = true 属性
• ReactLeafletEditable 的children属性可以任意嵌套，也可以有多个Map组件，不过只会第一个Map组件起作用，其他的会正常显示

import React, { Component, createRef } from 'react'
import L, { Icon } from 'leaflet'
import 'leaflet-editable'
import ReactLeafletEditable from 'react-leaflet-editable';
import { Map, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'

class Demo extends Component {
    constructor(){
        super()
        this.editRef = createRef();
        this.mapRef = createRef();
    }
    // 编辑一个多边形
    editPolygon = () => {
        this.editRef.current.startPolygon()
    }
    render(){
        return(
             <ReactLeafletEditable
                ref={this.mapRef}
             >
                <Map
                    ref={this.mapRef}
                    editable={true}
                    zoom={4}
                    maxZoom={18}
                    center={[35, 105]}>
                    <button
                        onClick={this.editPolygon}
                        className="editable-btn"
                    >polygon</button>
                    <TileLayer url="xxx" />
                </Map>
            </ReactLeafletEditable>
        )
    }
}

Component API

Props

Methods