Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場(chǎng)景
Leaflet快速入門(mén)與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面加載地圖顯示的基礎(chǔ)。
格網(wǎng)，即按照一定縱橫坐標(biāo)在地圖上繪制的格網(wǎng)。格網(wǎng)是地圖上不可缺少的要素之一，最常見(jiàn)的為地理坐標(biāo)網(wǎng)，即經(jīng)緯線的投影圖形。
插件地址：
https://github.com/turban/Leaflet.Graticule
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、下載插件并引入
<script type="text/javascript" src="./js/L.Graticule.js"></script>2、添加格網(wǎng)
L.graticule().addTo(map);3、完整代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet格網(wǎng)控件</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/L.Graticule.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);//添加格網(wǎng)L.graticule().addTo(map);</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.Graticule插件实现添加矩形格网的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Leaflet中实现添加比例尺控件与自定
- 下一篇： Leaflet中通过setZIndex实