基于Leaflet的Webgis經(jīng)緯網(wǎng)格功能實現(xiàn)

更新時間：2023年12月21日 10:46:22 作者：夜郎king

本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件,基于這款經(jīng)緯網(wǎng)插件,詳細介紹如何實現(xiàn)經(jīng)緯網(wǎng)功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

前言

眾所周知，在地球儀上或地圖上，經(jīng)線和緯線相互交織，就構成經(jīng)緯網(wǎng)。利用它上面標注的經(jīng)度和緯度，可以確定地球表面上各地點、各地區(qū)和各種地理現(xiàn)象的地理位置。它在軍事、航空、航海等方面很有用處。例如，輪船在茫茫大海上航行，飛機在廣闊天空中飛翔，無論到了什么地方，人們都可以使用儀器精確地測定出它的經(jīng)緯度，從而確定其位置。

為了精確地表明各地在地球上的位置，人們給地球表面假設了一個坐標系，這就是經(jīng)緯線。公元344年，亞歷山大渡海南侵，繼而東征，隨軍地理學家尼爾庫斯沿途搜索資料，準備繪一幅“世界地圖”。他發(fā)現(xiàn)沿著亞歷山大東征的路線，由西向東，無論季節(jié)變換與日照長短都很相仿。于是做出了一個重要貢獻——第一次在地球上劃出了一條緯線，這條線從直布羅陀海峽起，沿著托魯斯和喜馬拉雅山脈一直到太平洋。
　　公元120年，一位青年也在這座古老的圖書館里研究天文學、地理學。他就是克羅狄斯·托勒密。托勒密綜合前人的研究成果，認為繪制地圖應根據(jù)已知經(jīng)緯度的定點做根據(jù)，提出地圖上繪制經(jīng)緯度線網(wǎng)的概念。為此，托勒密測量了地中海一帶重要城市和據(jù)點的經(jīng)緯度，編寫了8卷地理學著作。其中包括8000個地方的經(jīng)緯度。為使地球上的經(jīng)緯線能在平面上描繪出來，他設法把經(jīng)緯線繪成簡單的扇形，從而繪制出一幅著名的“托勒密地圖”。
　　在很多的場景中，需要在地圖中直觀的展示經(jīng)緯網(wǎng)，方便進行位置定位。比如在地震信息系統(tǒng)中，會在震中區(qū)域范圍進行展示。如下圖：

在之前的博客中，介紹了很多Leaflet的插件，可以利用Leaflet進行webgis系統(tǒng)開發(fā)。本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件，基于這款經(jīng)緯網(wǎng)插件，介紹如何實現(xiàn)經(jīng)緯網(wǎng)功能，clone的Leaflet.Graticule地址。在CSDN社區(qū)中，有一些博主做了比較簡單的介紹，有一些是自己實現(xiàn)的。感興趣的朋友可以去下載相關代碼和資料來看看。

一、Leaflet.Graticule

由于gitHub現(xiàn)在有一些不穩(wěn)定，可以在gitee上看到有網(wǎng)友clone過來的版本，可以看看最新克隆過來的，與原來的github代碼是保持同步更新的。

1、參數(shù)說明

Leaflet.Graticule的參數(shù)配置是比較簡單的，下面來簡單介紹一下配置參數(shù)。

序號	參數(shù)名稱	說明	默認值
1	showLable	在地圖邊緣顯示網(wǎng)格記號標簽	true
2	opacity	光柵和標簽的不透明度	1
3	weight	網(wǎng)格線的寬度	0.8
4	color	網(wǎng)格線的顏色	#aaa
5	font	刻度標簽的字體樣式	12px Verdana
6	fontColor	刻度標簽的顏色	#aaa
7	zoomInterval	刻度標簽的顏色在不同的縮放級別中使用不同的間隔。例如，您可以設置緯度和經(jīng)度線，也可以設置不同的緯度和經(jīng)度間隔，如下所示：	zoomInterval: []

注意：zoomInterval的參數(shù)默認如下：

  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}
  ]

當然，如果您需要針對經(jīng)緯度來進行精準的控制，也是可以按照經(jīng)緯度來自定義的。配置參數(shù)如下：

  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、新建網(wǎng)頁模板

<!doctype html>
<html lang="en">
<head>
	<title>Leaflet Lat/Lon Graticule 經(jīng)緯網(wǎng)演示</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>

請注意在代碼中需要引入經(jīng)緯網(wǎng)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);
		//添加格網(wǎng)
		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、運行效果

以上效果基本滿足我們的初始需求，可以在地圖上進行經(jīng)緯度的渲染展示。

三、源碼調用分析

1、參數(shù)注入

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);