亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2023年12月21日 10:46:22   作者：夜郎king  
本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件,基于這款經(jīng)緯網(wǎng)插件,詳細(xì)介紹如何實(shí)現(xiàn)經(jīng)緯網(wǎng)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

前言

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

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

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

一、Leaflet.Graticule

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

1、參數(shù)說(shuō)明

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

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

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

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

         當(dāng)然，如果您需要針對(duì)經(jīng)緯度來(lái)進(jìn)行精準(zhǔn)的控制，也是可以按照經(jīng)緯度來(lái)自定義的。配置參數(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)頁(yè)模板

<!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>

        請(qǐng)注意在代碼中需要引入經(jīng)緯網(wǎng)js資源文件

<script src="../Leaflet.Graticule.js"></script>

2、初始化地圖對(duì)象

<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、運(yùn)行效果

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

三、源碼調(diào)用分析

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

 2、經(jīng)緯網(wǎng)構(gòu)建

總結(jié) 

        以上就是本文的主要內(nèi)容，本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件，基于這款經(jīng)緯網(wǎng)插件，詳細(xì)介紹如何實(shí)現(xiàn)經(jīng)緯網(wǎng)功能。行文倉(cāng)促，如有不當(dāng)之處，歡迎批評(píng)指正。

到此這篇關(guān)于基于Leaflet的Webgis經(jīng)緯網(wǎng)格生成實(shí)踐的文章就介紹到這了,更多相關(guān)Leaflet經(jīng)緯網(wǎng)格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論