基于Leaflet的WebGIS经纬网格功能实现
本文详细介绍如何在WebGIS开发中利用Leaflet.Graticule插件实现经纬网格功能。文章涵盖插件参数配置，包括默认与自定义zoomInterval，以及从引入资源、初始化地图到添加网格对象的完整集成步骤，帮助开发者快速实现地图坐标网格展示。
前言
在地球仪或地图表面，经线与纬线交织形成经纬网。通过标注的经度和纬度数值，可以精确确定地球表面各地点、区域及地理现象的空间位置。该技术在军事、航空和航海等领域具有重要应用价值。例如，轮船在海上航行或飞机在空中飞行时，无论身处何地，均可借助仪器精确测定经纬度，从而确定具体位置。
为精确定位地球表面位置，人类构建了经纬线坐标系。公元344年，亚历山大南侵并东征，随军地理学家尼尔库斯沿途搜集资料以绘制“世界地图”。他发现沿东征路线，从西向东，无论季节如何变化，日照时长和季节特征均大致相似。基于此观察，他做出了重要贡献：首次划定一条纬线，该线从直布罗陀海峡起，沿托鲁斯山脉和喜马拉雅山脉延伸至太平洋。公元120年，一位青年在古老图书馆研究天文学与地理学，即克罗狄斯·托勒密。托勒密综合前人成果，主张地图绘制应基于已知经纬度的定点，并提出在地图上绘制经纬度线网的概念。为此，他测量了地中海地区重要城市与据点的经纬度，编写了8卷地理学著作，包含8000个地点的经纬数据。为使地球经纬线能在平面呈现，他将经纬线绘制为简单的扇形，从而创作出著名的“托勒密地图”。在许多场景中，需在地图上直观展示经纬网以辅助定位，例如在地震信息系统中展示震中区域范围，如下图所示：
此前博客已介绍多款Leaflet插件，支持利用Leaflet进行WebGIS系统开发。本文将介绍一款Leaflet经纬网插件，并基于该插件详细阐述经纬网功能的实现方法，相关代码可从clone的Leaflet.Graticule仓库获取。在CSDN社区中，部分博主提供了较为简单的介绍，也有自行实现的版本。感兴趣者可下载相关代码与资料进行参考。
一、Leaflet.Graticule
鉴于GitHub当前访问可能存在不稳定性，可在Gitee上查看网友克隆的版本，建议关注最新克隆内容，其应与原始GitHub代码保持同步更新。
1、参数说明
Leaflet.Graticule的参数配置相对简单，以下简要介绍相关配置参数。
| 序号 | 参数名称 | 说明 | 默认值 |
| 1 | showLable | 在地图边缘显示网格记号标签 | true |
| 2 | opacity | 光栅和标签的不透明度 | 1 |
| 3 | weight | 网格线的宽度 | 0.8 |
| 4 | color | 网格线的颜色 | #aaa |
| 5 | font | 刻度标签的字体样式 | 12px Verdana |
| 6 | fontColor | 刻度标签的颜色 | #aaa |
| 7 | zoomInterval | 刻度标签的颜色在不同的缩放级别中使用不同的间隔。例如，您可以设置纬度和经度线，也可以设置不同的纬度和经度间隔，如下所示： | zoomInterval: [] |
注意：zoomInterval参数的默认配置如下：
zoomInterval: [
{start: 2, end: 2, interval: 40},
{start: 3, end: 3, interval: 20},
{start: 4, end: 4, interval: 10},
{start: 5, end: 7, interval: 5},
{start: 8, end: 20, interval: 1}
]若需针对经纬度进行更精准的控制，也可根据经纬度自定义配置。具体配置参数如下：
zoomInterval: {
latitude: [
{start: 4, end: 6, interval: 5},
{start: 7, end: 20, interval: 1}
],
longitude: [
{start: 4, end: 6, interval: 10},
{start: 7, end: 20, interval: 2}
]
}二、集成使用
1、新建网页模板
<!doctype html>
<html lang="en">
<head>
<title>Leaflet Lat/Lon Graticule 经纬网演示</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/2d/leaflet/leaflet.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="/2d/leaflet/leaflet-src.js"></script>
<script src="../Leaflet.Graticule.js"></script>
<style>
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0;}
.map { width: 100%; height: 600px; }
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>请注意，在代码中需引入经纬网JS资源文件。
<script src="../Leaflet.Graticule.js"></script>2、初始化地图对象
<script>
var map = new L.Map('map',{zoomControl:false}).setView([24.0, 121], 6),
stamenTerrain = L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png').addTo(map);
//添加格网
L.latlngGraticule({
showLabel: true,
color: 'red',
zoomInterval: {
latitude: [
{start: 2, end: 4, interval: 30},
{start: 5, end: 20, interval: 5}
],
longitude: [
{start: 2, end: 4, interval: 30},
{start: 5, end: 20, interval: 5}
]
}
}).addTo(map);
</script>3、运行效果
上述效果基本满足初始需求，可在地图上渲染并展示经纬度网格。
三、源码调用分析
1、参数注入
L.latlngGraticule({
showLabel: true,
color: 'red',
zoomInterval: {
latitude: [
{start: 2, end: 4, interval: 30},
{start: 5, end: 20, interval: 5}
],
longitude: [
{start: 2, end: 4, interval: 30},
{start: 5, end: 20, interval: 5}
]
}
}).addTo(map);
2、经纬网构建
总结
本文主要内容如上，介绍了一款Leaflet经纬网插件，并基于该插件详细阐述了经纬网功能的实现方法。行文较为仓促，如有不当之处，欢迎批评指正。
至此，关于基于Leaflet的WebGIS经纬网格生成实践的介绍到此结束。更多相关Leaflet经纬网格内容，请搜索本站历史文章或继续浏览后续相关文章，希望大家以后多多支持本站！
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53