React与Leaflet 环境安装与基本使用

环境准备与基本使用

1. leftlet包安装

npm install leaflet

2. css文件引入

方式1：在根元素的css文件进行全局引用

@import url("../node_modules/leaflet/dist/leaflet.css");

方式2：在组件的jsx文件中进行引用

import "../node_modules/leaflet/dist/leaflet.css";

3. leftlet的API引入

import L from 'leftlet'

基本案例

加载在线瓦片地图

实例代码

App.css 部分

@import url("../node_modules/leaflet/dist/leaflet.css");

//其他代码省略

组件部分

import React, { useEffect } from 'react';
import L from "leaflet"

// 这个css只是标记了onlinetilelayer_map容器的样式
import "./OnlineTileLayer.css"

function OnlineTileLayer(props) {
    
    useEffect(()=>{
        //leaflet与div进行绑定，并指明默认的地图中心和缩放比例
        var map = L.map('onlinetilelayer_map').setView([51.5, -0.09], 13);
        //构建一个切片图层对象，并添加到map容器中
	    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	    }).addTo(map);
    },[])

    return (
        <div id = "onlinetilelayer_map"></div>
    );
}

export default OnlineTileLayer;

代码说明

1. leaflet使用时，当前环境必须引入leaflet.css文件，否则地图加载会出现错位，丢失等等问题
2. app.css 的@import方式，只是其中一种引入方式，也可直接在组件的jsx文件中以import方式导入
3. 暂时没有找到leaflet.css自动引入方法（类似于antd的按需引用）
4. leaflet的API都是链式调用的即API中的函数都是返回当前对象本身，因此可以连续调用

组件式Popup

问题描述

1. leaflet默认的Popup一般只能在context中直接指定String型的内容或者具有Html标签的string元素
2. 如果Context是自身是一个React的组件，一般情况下不能直接加载。

解决办法

动态的将React组件与临时的div元素进行绑定，再将绑定的div(一个html元素)设置为Popup的context

实例代码

内容组件（类似于件简单的要素属性List）

import React from 'react';

//就是将一个object对象的key-value转换为ul-li
function SimplePropertiesPopup(props) {
    return (
        <ul>
            {Object.keys(props).map((key,index)=>{
                return <li key = {index}>{key} : {props[key]}</li>
            })}
        </ul>
    );
}

export default SimplePropertiesPopup;

加载到Popup中

import ReactDOM from 'react-dom';
//绑定到地图的click事件，对地图进行indentify的查询，其他代码省略
map.on("click", (evt)=>{
    layer.identify().at(evt.latlng).on(map).run((error, result) => {
        if(error){
            message.error(error);
            return
    }
    if(result.features.length>0)
    {
        //创建一个临时的div元素
        let div = document.createElement('div');
        //通过reactDom将内容组件与div进行绑定并执行渲染
        ReactDOM.render(SimplePropertiesPopup(result.features[0].properties), div);
        //在地图的单机位置上开启popup，并将Context设置为div元素
        L.popup().setLatLng(evt.latlng).setContent(div).openOn(map);
    }
})
})

代码说明

1. 内容组件利用函数组件编写，主要式时是为了方便创建与调用
2. ReactDOM一定要单独进行import
3. 默认情况下，leaflet的popup的边界会自动包裹context的内容，一般不用单独设置样式
4. 默认情况下，leaflet的popup的已经带了关闭事件，一般情况下不用单独处理