react使用Leaflet（1）

原创

已于 2024-11-21 15:11:06 修改 · 1.6k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-11-21 15:03:16 首次发布

添加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.opens