react使用Leaflet（1）

添加GridLayer网格图层

用于处理 HTML 元素的平铺网格的通用类。它是所有瓦片图层的基类，取代了 TileLayer.Canvas。GridLayer 可以被扩展来创建 HTML 元素的平铺网格，如 <canvas>, <img> or <div>。GridLayer 将为你处理这些 DOM 元素的创建和动画。

实现逻辑 一般不怎么用，一般使用继承他的TileLayer

在 React-Leaflet 中，GridLayer 可以用于创建自定义的网格图层（需要扩展GridLayer并实现 createTile() 方法）。以下是如何在 React 组件中添加一个简单的 GridLayer 网格图层的示例：

使用依赖leaflet和react-leaflet

import React from 'react';
import L from 'leaflet';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';

// 自定义网格图层
class CustomGridLayer extends L.GridLayer {
  // 创建瓦片的方法
  createTile(coords) {
    // 创建一个 <canvas> 元素用于绘图
    var tile = L.DomUtil.create('canvas', 'leaflet-tile');
    // 根据选项设置瓦片的宽度和高度
    var size = this.getTileSize();
    tile.width = size.x;
    tile.height = size.y;
    // 获取一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西
    var ctx = tile.getContext('2d');
    // 这里可以添加绘制逻辑，例如：
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, size.x, size.y);
    // 返回瓦片，以便在屏幕上呈现
    return tile;
  }
}

const GridLayerMap = () => {
  const map = useMap();

  // 初始化自定义网格图层并添加到地图
  const customGridLayer = new CustomGridLayer();
  map.addLayer(customGridLayer);

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      {/* 可以添加其他图层，如 TileLayer作为底图 */}
      {/* attribution 它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。*/}
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

export default GridLayerMap;

Options 选项

还有的可以去官网看，一般bounds和zoom就可以了

添加TileLayer瓦片图层

用于在地图上加载和显示瓦片图层，通常用于显示地图底图，如街道地图、卫星图像等。请注意，大多数tile服务器都需要属性，你可以在 Layer 下进行设置。 扩展 GridLayer，他继承了 GridLayer 的选项和方法。

• 瓦片图层可以提供丰富的地图细节，并且可以根据不同的需求加载不同级别的瓦片。

• 将瓦片图层放入一个图层组中可以方便地控制瓦片的加载和显示，如根据用户权限或地图区域动态加载瓦片。

实现逻辑

指定 URL 模板和可选的 options 对象，实例化一个瓦片图层对象。

L.tilelayer(<String> urlTemplate, <TileLayer options> options?)

URL 模板

表现为以下方式:

'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

{s} 是指可用的子域之一（按顺序使用，以帮助解决每个域的浏览器并行请求限制；子域值在选项中指定;默认为 a, b 或 c , 可以省略), {z} — 缩放级别, {x} 和 {y} — 瓦片坐标。 {r} 可以用来在URL中添加 "@2x" 以加载视网膜瓦片。

使用依赖leaflet 这种比较常用

import React, { useEffect, useRef } from 'react';

const TileLayerMap = () => {
  // 使用useRef创建一个引用，用于获取DOM元素
  const mapRef = useRef(null);
  useEffect(() => {
    // 在组件挂载后初始化Leaflet地图
    const map = L.map(mapRef.current).setView([51.505, -0.09], 13);
    // 创建一个OpenStreetMap瓦片图层，并设置对应的属性
    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); // 将图层添加到地图上

    // 当组件卸载时，Leaflet地图实例会自动清理，无需额外的清理工作
  }, []);

  // 返回一个指定高度和宽度的div作为地图容器
  return (
    <div ref={mapRef} style={{ height: '400px', width: '100%' }} />
  );
};
export default TileLayerMap;

使用依赖react-leaflet

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

const TileLayerMap = () => {
  return (
    // MapContainer组件用于创建地图容器
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      {/* TileLayer组件用于添加瓦片图层 */}
      {/* OpenStreetMap是一个免费的瓦片地图服务 */}
      {/* attribution 它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。*/}
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

export default TileLayerMap;

Options 选项

添加GeoJSON 图层

GeoJSON是一种基于JSON的格式，用于表示地理数据结构，如点、线和多边形等。GeoJSON图层代表一个 GeoJSON 对象或一个 GeoJSON 对象的数组。允许你解析 GeoJSON 数据并将其显示在地图上。扩展自 FeatureGroup。//具体方法看官网吧很多

• GeoJSON图层通常用于展示地理空间数据，如行政区划、路线等。

• 将所有GeoJSON图层放入一个图层组中可以方便地对它们进行统一管理，如批量添加、删除或显示/隐藏。

实现逻辑

在这个组件中，我们定义了一个geojsonData变量，它包含了GeoJSON格式的数据。然后，我们使用MapContainer组件创建地图容器，并设置了初始中心点和缩放级别。TileLayer组件用于添加OpenStreetMap的瓦片图层作为底图。GeoJSON组件用于将GeoJSON数据添加到地图上。

L.geoJSON(<Object> geojson?, <GeoJSON options> options?)

只使用Leaflet 常用

import L from "leaflet";  
useEffect(() => {
    if (mapView && mapData) {
      const a:any[]=[];
      // 处理每个地图数据项
      mapData.map((item: any, index: number) => {
        // 添加GeoJSON数据  数据格式详情可以看上一篇Leaflet，里面详细介绍了
        const geometry = JSON.parse(item.geom);
        const geoJsonLayer = L.geoJSON(geometry as any, {
          style: {
            fillColor: "transparent",
            color: "#1c6ec6",
            weight: 3,
            opacity: 0.9,
          },
        });
        // 获取当前GeoJSON图层的边界范围
        const bounds = geoJsonLayer.getBounds();
        // 将边界范围添加到数组中
        a.push(bounds)
        // 更新当前边界范围状态
        setCurrentBounds(a as any)
        // 调整地图视图以适应所有边界范围
        mapView.fitBounds(a);
        
        // 添加GeoJSON图层
        geoJsonLayer.addTo(GeoJSONLayerGroup.current);
        
        // 添加栅格数据
        const titleUrl =
          baseUrl +
          `/tile/service/mergeView?x={x}&y={y}&l={z}&metaId=${item.id}&tk=${userInfo?.info.tk}`;
        const rasterLayer = L.tileLayer(titleUrl, {
          id: `tile-${index}`,
          zIndex: 1000 - index,
        });
        
        // 添加栅格瓦片图层
        rasterLayer.addTo(TitleLayerGroup.current);
        return geometry;
      });
    }

    // 清理函数 - 清除图层
    return () => {
      if (mapView) {
        TitleLayerGroup.current.clearLayers();
        GeoJSONLayerGroup.current.clearLayers();
      }
    };
  }, [mapView, userInfo,mapData])

使用react-leaflet

import React from 'react';
import { MapContainer, TileLayer, GeoJSON, useMap } from 'react-leaflet';

// 示例GeoJSON数据；详情可以看上一篇Leaflet，里面详细介绍了geojsonData的实例
const geojsonData = {
 ......
};

const GeoJSONLayerMap = () => {
  return (
    <MapContainer center={[39.75621, -104.99404]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer //栅格瓦片图层
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 使用GeoJSON组件添加GeoJSON图层 */}
      <GeoJSON data={geojsonData} />
    </MapContainer>
  );
};

export default GeoJSONLayerMap;

Options 选项

详情看上一篇的Leaflet里面的GeoJson里面的3选项，里面详细解释了3个用的比较多的style、onEachFeature和filter；剩下的看官网吧GeoJSON 图层