react + Leaflet初始化

效果

源码

import { useState, useEffect, useRef } from 'react'

import L from 'leaflet'
// 不引入样式文件地图会错乱或不显示
import 'leaflet/dist/leaflet.css'
// 使用默认marker图标报错找不到，手动引入图片
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'

const DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
})

// 挂在到默认属性
L.Marker.prototype.options.icon = DefaultIcon

const Leaflet = () => {
    const [map, setMap] = useState()
    const mapRef = useRef()

    useEffect(() => {
        if(map) return
        // 创建地图
        const tempMap = L.map(mapRef.current, {
            // center：地图初始化时的中心点位置，坐标数组形式时，下标0是纬度，下标1是经度
            center: [39, 116],
            // zoom：地图初始化时的缩放等级
            zoom: 4,
            // layers：默认添加到地图上的图层组
            layers: [
                // tileLayer：用于在地图上加载和显示瓦片图层
                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    // attribution：归属控制中要显示的字符串，例如 "© OpenStreetMap 贡献者"。 它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。
                    // attribution: '© OpenStreetMap contributors'
                })
            ],
            // attributionControl：是否将 attribution 版权控件添加到地图中
            attributionControl: false,
        })
        setMap(tempMap)
    }, [])


    useEffect(() => {
        if(map) {
            // Marker 用于在地图上显示可点击/可拖动的图标
            const marker = L.marker([39, 116], {
                // 标记（marker）是否可通过鼠标/触摸拖动
                draggable: true,
                // 将此标记（marker）拖动到其边缘附近时是否平移地图
                autoPan: true
            })

            // 弹出窗口，用于在地图的某些位置打开弹出窗口
            marker.bindPopup(`
this is a marker
`).openPopup()

            // tooltip工具提示，用于在地图图层顶部显示小文本
            marker.bindTooltip('tooltip')

            const circle = L.circle([40, 117], {
                // Stroke（描边）颜色
                color: '#1890ff',
                // 填充颜色
                fillColor: '#ff4d4f',
                // 填充的不透明度
                fillOpacity: 0.5,
                // 圆的半径，以米为单位
                radius: 500
            })

            const polygon = L.polygon([
                [50.5, 110],
                [60.8, 120],
                [40.3, 130],
            ])
            
            const markerCircle = L.circleMarker([30, 117], {
                radius: 50
            })

            const layerGroup = L.layerGroup([marker, circle, polygon, markerCircle]).addTo(map)

            return () => {
                layerGroup.clearLayers()
            }
        }
    }, [map])

    return (
        

    )
}

export default Leaflet