【GIS】Leaflet:Web地图快速上手

news2024/9/27 23:25:19

Leaflet 是一个轻量级的开源 JavaScript 库,专为构建交互式地图而设计。它功能丰富,支持常见的地图操作,如缩放、平移、标记和多种地图图层。通过灵活的插件系统,Leaflet 也能实现高级功能。本文旨在指导你如何从基础开始,逐步构建复杂的Web地图应用。

环境搭建

Leaflet非常容易上手。你只需要一个基本的HTML文件,就能在网页中显示地图。

首先,创建一个基础的index.html文件,并在文件中加载Leaflet的CSS和JavaScript文件。我们可以通过CDN直接引用这些资源:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 1000px; }  /* 设置地图高度 */
    </style>
</head>

<body>
    <div id="map"></div>  <!-- 地图容器 -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // 初始化地图,设置中心和缩放级别
        var map = L.map('map').setView([39.90, 116.40], 10);

        // 创建高德地图图层
        L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],  // 子域名
            minZoom: 1,  // 最小缩放
            maxZoom: 19, // 最大缩放
            attribution: '高德地图'  // 版权信息
        }).addTo(map);  // 添加图层到地图
    </script>
</body>

</html>
  • L.map('map'):创建一个Leaflet地图对象,并将地图加载到页面中idmap的div元素内。
  • L.tileLayer():添加一个瓦片图层,瓦片地图是分块加载的图像,可以像拼图一样显示大面积区域。我们使用OpenStreetMap的公共瓦片服务。
  • 缩放级别:Leaflet的缩放级别从0到最大(取决于地图数据)。0是世界级别,较大的数字表示更详细的视图。

在Leaflet中,几何图形是指地图上绘制的基本图形,如点、线、面、圆等。这些图形广泛应用于表示各种地理信息。下面我们详细讲述如何使用Leaflet绘制点、线、面、圆等几何图形,并逐步解释每一个图形的实现方式和相关代码。

标识操作

移除版权标识

要移除地图右下角的默认版权标识,只需在初始化地图时将 attributionControl 设置为 false

var map = L.map('map', {
    attributionControl: false // 关闭版权控制
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

自定义 Logo 和版权信息

要对 Logo 和版权信息进行自定义,可以在创建地图对象时配置 attributionControl。以下是示例代码:

var map = L.map('map', {
    attributionControl: true, // 启用版权控制
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

// 获取版权控制对象
var attribution = map.attributionControl;

// 自定义版权前缀,包含 Logo 和链接
attribution.setPrefix('<img src="logo.png" alt="Logo">');

// 添加其他版权信息
attribution.addAttribution('地图数据 &copy; <a href="https://www.amap.com/">高德地图</a>');

交互控制

固定缩放比例

你可以通过在地图初始化时设置 minZoommaxZoom 来限制地图的缩放范围。例如,如果你希望用户只能在层级 510 之间缩放地图,你可以这样设置:

// 初始化地图,并设置最小缩放级别为5,最大缩放级别为10
var map = L.map('map', {
    minZoom: 5,   // 最小缩放级别
    maxZoom: 10   // 最大缩放级别
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

固定视野范围

通过 maxBounds 限制地图的拖动范围,使用户无法拖动地图超出设定的边界。maxBounds 是由两个对角坐标点组成的矩形框,可以限制地图的可视区域。

例如,你想让地图视野只能在某个区域内移动:

// 设置地图的最大边界
var bounds = [[38, 116], [40, 118]]; 

// 初始化地图,并设置 maxBounds
var map = L.map('map', {
    maxBounds: bounds,    // 限制地图视野范围
    maxBoundsViscosity: 1.0 // 控制视图拖动时的粘性,1表示严格限制
}).setView([39.90, 116.40], 7);
  • minZoommaxZoom:这两个参数分别设置了地图的最小和最大缩放级别,防止用户缩小得太多或放大得太多。
  • maxBounds:限制用户拖动地图的边界范围,参数为一个二维数组,定义了地图的地理边界。
  • maxBoundsViscosity:这是一个取值范围为 01 的值,用于控制视图边界的粘性,0 表示没有限制,1 表示严格限制。

禁止缩放

要禁止地图的缩放,可以在初始化时设置 scrollWheelZoomdoubleClickZoom 选项为 false,并将 zoomControl 设为 false,以禁用鼠标滚轮缩放、双击缩放和缩放控件。以下是示例代码:

// 初始化地图,禁止放缩
var map = L.map('map', {
    zoomControl: false,       // 禁止缩放控件
    scrollWheelZoom: false,   // 禁止滚轮缩放
    doubleClickZoom: false     // 禁止双击缩放
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

在这段代码中,通过将 scrollWheelZoomdoubleClickZoom 设置为 false,以及禁用 zoomControl,实现了禁止地图缩放的功能。这样,用户将无法通过滚轮、双击或缩放控件来改变地图的缩放级别。

禁止移动

要禁止地图移动,可以在初始化时设置 dragging 选项为 false。这样用户就无法通过拖动来移动地图。以下是示例代码:

// 初始化地图,禁止移动
var map = L.map('map', {
    dragging: false, // 禁止拖动
    scrollWheelZoom: false // 禁止滚轮缩放
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

在这段代码中,通过将 dragging 设置为 false,用户无法拖动地图。此外,将 scrollWheelZoom 设置为 false 可以禁止使用滚轮进行缩放。这样,地图将保持静止。

几何图形

点(Marker)

通常用于标记地图上的具体位置,在Leaflet中通过L.marker()函数来实现。你可以设置标记的经纬度坐标,并为标记添加弹出信息(如点击时显示的提示信息)。

// 创建一个标记,并设置其位置为北京附近 (40.0, 116.5)
var marker = L.marker([40.0, 116.5]).addTo(map);

// 为标记添加弹出信息,当用户点击标记时会显示弹窗
marker.bindPopup("<b>你好,世界!</b><br>这是一个标记。").openPopup();
  • L.marker([经度, 纬度]):创建一个新的标记对象,传入的参数为点的地理坐标。
  • addTo(map):将标记添加到指定的地图对象map中。
  • bindPopup():绑定一个弹出信息,当用户点击该标记时,会显示相关信息。

线(Polyline)

线用于连接多个地理点,常见应用场景为路径、河流等。你可以通过L.polyline()绘制线段,并通过传入一组坐标点来定义线的形状。

// 创建一条线,连接三个坐标点
var polyline = L.polyline([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'blue' // 设置线的颜色为蓝色
}).addTo(map);

// 为线段绑定弹出信息
polyline.bindPopup("这是一个线段。");
  • L.polyline([点数组]):创建一条线,传入一个包含多个坐标点的数组,每个点都是一对经纬度坐标。
  • color:指定线段的颜色。
  • addTo(map):将线段添加到地图上。
  • bindPopup():为线段绑定弹出信息。

面(Polygon)

是由多个点组成的封闭图形,如区域、多边形等。在Leaflet中,使用L.polygon()来创建面。

// 创建一个多边形,传入三个或以上的坐标点
var polygon = L.polygon([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'green',  // 设置边框颜色为绿色
    fillColor: '#f03',  // 填充颜色为红色
    fillOpacity: 0.5  // 设置填充透明度
}).addTo(map);

// 为多边形绑定弹出信息
polygon.bindPopup("这是一个多边形。");
  • L.polygon([点数组]):创建一个多边形,传入多个坐标点,最后的点会自动与第一个点相连形成闭合的图形。
  • fillColor:设置多边形内部的填充颜色。
  • fillOpacity:设置填充颜色的透明度,取值范围为0(完全透明)到1(完全不透明)。

圆(Circle)

在Leaflet中使用L.circle()来绘制。圆的中心位置由一个经纬度点决定,半径以米为单位。

// 创建一个圆,中心点为 [40, 116],半径为500米
var circle = L.circle([40, 116], {
    color: 'red',  // 圆的边框颜色
    fillColor: '#f03',  // 填充颜色
    fillOpacity: 0.5,  // 填充透明度
    radius: 500  // 圆的半径(米)
}).addTo(map);

// 为圆形绑定弹出信息
circle.bindPopup("这是一个圆形。");
  • L.circle([经度, 纬度], {属性}):创建一个圆,传入圆心坐标和配置参数,如边框颜色、填充颜色、透明度及半径。
  • radius:圆的半径,单位是米。
  • color:设置圆的边框颜色。
  • bindPopup():为圆形绑定弹出信息。

自定义样式

Leaflet允许你对这些几何图形进行自定义样式配置和交互事件。每个几何图形可以通过传递额外的样式属性来自定义外观。

// 自定义线的样式
var customLine = L.polyline([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'purple', // 设置线的颜色为紫色
    weight: 5, // 设置线的宽度
    opacity: 0.7, // 设置线的透明度
    dashArray: '5, 10' // 设置虚线样式,表示5像素实线和10像素空白间隔
}).addTo(map);

// 自定义圆形样式
var customCircle = L.circle([51.508, -0.11], {
    color: 'yellow',
    fillColor: '#ff0',
    fillOpacity: 0.3,
    radius: 300
}).addTo(map);

交互事件

你可以为图形绑定事件,例如当鼠标悬停、点击时触发动作。

// 监听多边形的点击事件
polygon.on('click', function(e) {
    alert("你点击了多边形!");
});

// 当鼠标悬停在圆形上时,改变圆的颜色
circle.on('mouseover', function() {
    circle.setStyle({
        fillColor: 'blue' // 鼠标悬停时,改变填充颜色为蓝色
    });
});
  • dashArray:用于线条的虚线设置,参数为实线与空白的长度(单位为像素)。
  • weight:设置线条的宽度。
  • on('事件类型', 回调函数):绑定一个事件监听器。例如,click事件会在用户点击该图形时触发

图层加载

Leaflet 支持加载多种图层,如瓦片地图、WMS图层(Web Map Service)和GeoJSON数据。

加载自定义瓦片图层

如果你有自己的瓦片服务器,可以加载自定义瓦片图层:

// 使用自定义瓦片服务器加载地图瓦片
L.tileLayer('https://{s}.yourtileserver.com/{z}/{x}/{y}.png', {
    maxZoom: 18 // 设置最大缩放级别
}).addTo(map);

加载WMS图层

WMS(Web Map Service)是地理信息系统中常见的标准地图服务协议。Leaflet可以通过WMS加载远程地图图层:

// 使用WMS加载地图图层
L.tileLayer.wms('https://ahocevar.com/geoserver/wms', {
    layers: 'topp:states', // 指定要加载的图层
    format: 'image/png',  // 返回图片格式
    transparent: true,  // 是否透明显示
    attribution: 'WMS 示例' // 添加版权信息
}).addTo(map);

加载GeoJSON数据

GeoJSON是一种用于表示地理空间数据的标准格式,Leaflet 支持直接加载并显示GeoJSON数据。

// 定义一个简单的GeoJSON对象
var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "地点名称",
        "amenity": "地点类型",
        "popupContent": "这里是弹窗信息。"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-0.09, 51.5] // 经纬度
    }
};

// 将GeoJSON数据添加到地图
L.geoJSON(geojsonFeature).addTo(map);

如果你有外部的GeoJSON文件,你也可以通过AJAX请求加载数据并显示:

// 使用fetch加载GeoJSON数据并显示
fetch('your-geojson-file.json')
    .then(response => response.json())
    .then(data => L.geoJSON(data).addTo(map)); // 将加载的数据添加到地图

图层控制

地图初始化

首先,我们需要初始化一个 Leaflet 地图,设置其中心点和缩放级别。

// 创建地图实例,设置中心点和缩放级别
var map = L.map('map').setView([39.90,116.40], 13); // 设置北京为中心点

创建图层

接下来,我们可以创建高德地图的基础图层。高德地图有多种样式可供选择,这里提供两个示例:

// 创建高德普通地图图层
var normalLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    minZoom: 1,
    maxZoom: 19
});
// 创建高德卫星地图图层
var satelliteLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    minZoom: 1,
    maxZoom: 19
});

创建叠加图层

我们还可以添加一些叠加图层,比如标记。以下示例创建两个标记:

// 创建标记
var marker1 = L.marker([39.91,116.40]).bindPopup("天安门");
var marker2 = L.marker([31.98,120.91]).bindPopup("另一个位置");

// 创建叠加图层对象
var overlayMaps = {
    "南京": marker1,
    "另一个位置": marker2
};

添加图层控制

使用 L.control.layers 创建图层控制,并将基础图层和叠加图层添加到地图中:

// 创建基础图层对象
var baseMaps = {
    "高德普通地图": normalLayer,
    "高德卫星地图": satelliteLayer
};

// 添加图层控制到地图
L.control.layers(baseMaps, overlayMaps).addTo(map);

添加标记到地图

最后,确保将标记添加到地图,以便它们可以显示:

// 添加标记到地图
marker1.addTo(map);
marker2.addTo(map);

完整示例代码

以下是完整的 HTML 示例,展示如何实现高德地图的图层控制功能:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 高德地图图层控制示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 1000px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // 创建地图实例
        var map = L.map('map').setView([39.90,116.40], 10); // 设置北京为中心点

        // 创建高德普通地图图层
        var normalLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 19
        }).addTo(map);

        // 创建高德卫星地图图层
        var satelliteLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 19
        });

        // 创建标记
        var marker1 = L.marker([39.91,116.40]).bindPopup("天安门");
        var marker2 = L.marker([31.98,120.91]).bindPopup("另一个位置");

        // 创建叠加图层对象
        var overlayMaps = {
            "天安门": marker1,
            "另一个位置": marker2
        };

        // 创建基础图层对象
        var baseMaps = {
            "高德普通地图": normalLayer,
            "高德卫星地图": satelliteLayer
        };

        // 添加图层控制到地图
        L.control.layers(baseMaps, overlayMaps).addTo(map);

        // 添加标记到地图
        marker1.addTo(map);
        marker2.addTo(map);
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2171451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于python深度学习遥感影像地物分类与目标识别、分割实践技术

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…

优思学院:如何借助“六西格玛设计”流程确保产品创新成功?

六西格玛设计&#xff08;DFSS, Design for Six Sigma&#xff09;是一种专注于产品设计初期减少变异、确保高质量的方法。虽然六西格玛的核心目标是通过减少流程和产品变异来提升质量&#xff0c;但它对创新过程有着重要的支持作用。创新过程中&#xff0c;六西格玛设计能确保…

开源b2b2c商城系统流程 多用户商城系统流程图

在选择多用户商城系统时&#xff0c;服务质量至关重要。商淘云多用户商城系统凭借其卓越的功能和强大的客户支持&#xff0c;成为了许多企业的首选。下面我们一起分析多用户商城的特性及b2b2c商城系统思维导图&#xff0c;文中的图大家需要的可评论“666”领取。 首先&#xff…

【含文档】基于Springboot+Vue的学生宿舍管理系统(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…

tomcat 文件上传 (CVE-2017-12615)

漏洞描述&#xff1a; 当 Tomcat 运行在 Windows 主机上&#xff0c;且启用了 HTTP PUT 请求方法 影响范围&#xff1a; Apache Tomcat 7.0.0 - 7.0.79 漏洞复现&#xff1a; 创建vulfocus靶场容器 poc #CVE-2017-12615 POC import requests import optparse import ospar…

mysql索引 -- 全文索引介绍(如何创建,使用),explain关键字

目录 全文索引 引入 介绍 创建 使用 表数据 简单搜索 explain关键字 使用全文索引 mysql索引结构详细介绍 -- mysql索引 -- 索引的硬件理解(磁盘,磁盘与系统),软件理解(mysql,与系统io,buffer pool),索引结构介绍和理解(page内部,page之间,为什么是b树)-CSDN博客 全文…

UE5: Content browser工具编写02

DebugHeader.h 中的全局变量&#xff0c;已经在一个cpp file中被include了&#xff0c;如果在另一个cpp file中再include它&#xff0c;就会有一些conflicts。先全部给加一个static Add static keyword to debug functionsWrap all the functions inside of a namespaceprint …

Linux入门攻坚——34、nsswitch、pam、rsyslog和loganalyzer前端展示工具

nsswitch&#xff1a;network service switch 名称解析&#xff1a;name <---> id 认证服务&#xff1a;用户名、密码验证或token验证等 名称解析和认证服务都涉及查找位置&#xff0c;即保存在哪里。如linux认证&#xff0c;passwd、shadow&#xff0c;是在文件中&…

Linux标准IO(五)-I/O缓冲详解

1.简介 出于速度和效率的考虑&#xff0c;系统 I/O 调用&#xff08;即文件 I/O&#xff0c;open、read、write 等&#xff09;和标准 C 语言库 I/O 函数&#xff08;即标准 I/O 函数&#xff09;在操作磁盘文件时会对数据进行缓冲&#xff0c;本小节将讨论文件 I/O 和标准 I/…

20 vue3之自定义hooks

Vue3 自定义Hook的作用 主要用来处理复用代码逻辑的一些封装 Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数 这个在vue2 就已经有一个东西是Mixins mixins就是将…

8,STM32CubeMX配置SPI工程(读取norflash的ID)

1&#xff0c;前言 单片机型号&#xff1a;STM32F407 编程环境 &#xff1a;STM32CubeMX Keil v5 硬件连接 &#xff1a;SPI1&#xff0c;CS/SS--->PB14 注&#xff1a;本工程在1&#xff0c;STM32CubeMX工程基础&#xff08;配置Debug、时钟树&#xff09;基础上完…

ARM点灯---看手册

知识点&#xff1a; 一个程序可能会遇到内存泄漏问题&#xff0c;可能一次运行泄漏几M大小&#xff0c;执行几个小时才会泄漏到站崩溃&#xff0c;所以要查看是否有内存泄漏。 查看手册教程 0927-上午 视频1&#xff1a;25&#xff1b;00 硬件程序开发流程 最小系统:单片…

AI驱动的智能运维:行业案例与挑战解析

华为、蚂蚁、字节跳动如何引领智能运维&#xff1f; ©作者|潇潇 来源|神州问学 引言 OpenAI 发布的 ChatGPT 就像是打开了潘多拉的魔盒&#xff0c;释放出了生产环境中的大语言模型&#xff08;LLMs&#xff09;。一些新的概念&#xff1a;“大语言模型运维 (LLMOps)”…

边裁员边收购,思科逐渐变身软件并购之王

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…

计算机毕业设计党建学习网站查看发布党建评论留言搜索部署安装/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序

目录 ‌开发背景‌&#xff1a; ‌开发意义‌&#xff1a; ‌开发目标‌&#xff1a; 部署安装 主要功能 功能图 界面介绍 技术介绍 需求分析 1. 用户角色分析 2. 功能需求分析 3. 性能需求分析 4. 界面设计需求 5. 其他需求 ‌党建学习网站的开发背景、意义与目…

史上最详细论文word排版格式指导保姆级教学!

一、前言 首先&#xff0c;每个学校的论文排版格式都是不太相同的&#xff0c;但大体上都是相似的。 正常来说&#xff0c;论文的排版操作是十分枯燥并且重复的&#xff0c;但是word中的样式工具使得论文排版会变得容易。 接下来我将以某个学校论文格式要求为例&#xff0c;…

新手做TikTok用什么手机?当然是海外云手机!

在当今数字化时代&#xff0c;TikTok已成为全球领先的短视频平台&#xff0c;吸引了大量个人和企业入驻&#xff0c;希望在这一广阔的市场中脱颖而出。然而&#xff0c;对于刚刚进入TikTok的新手来说&#xff0c;选择合适的工具是开启TikTok之路的第一步。近年来&#xff0c;海…

开关电源频率是什么?正常范围是多少?

在电子设备的小型化和高效化趋势下&#xff0c;开关电源的频率选择显得尤为重要。本文将详细阐述开关电源频率的范围及其测试方法。  一、开关电源频率的范围 开关电源是一种高效的电力转换装置&#xff0c;为电子设备提供稳定的电源。而作为评估开关电源性能的指标之一&#…

统信服务器操作系统【开机自启动】配置方法

开机自启动的四种配置方法,包括systemctl命令、rc.local文件、crontab任务,通过desktop配置开机自动,前三种方法适合后台程序或者脚本启动,最后一种方法适合图形化程序启动。 文章目录 准备环境配置方法一、通过编写service的方法,使用systemctl配置开机自启二、通过rc.lo…

[EBPF] 实时捕获DM数据库是否存在SQL阻塞

1. 介绍 eBPF&#xff08;extened Berkeley Packet Filter&#xff09;是一种内核技术&#xff0c;它允许开发人员在不修改内核代码的情况下运行特定的功能。eBPF 的概念源自于 Berkeley Packet Filter&#xff08;BPF&#xff09;&#xff0c;后者是由贝尔实验室开发的一种网…