700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Leaflet中使用Leaflet.Graticule插件实现添加矩形格网

Leaflet中使用Leaflet.Graticule插件实现添加矩形格网

时间:2022-01-21 17:03:00

相关推荐

Leaflet中使用Leaflet.Graticule插件实现添加矩形格网

场景

Leaflet快速入门与加载OSM显示地图:

/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面加载地图显示的基础。

格网,即按照一定纵横坐标在地图上绘制的格网。格网是地图上不可缺少的要素之一,最常见的为地理坐标网,即经纬线的投影图形。

插件地址:

/turban/Leaflet.Graticule

注:

博客:

/badao_liumang_qizhi

关注公众号

霸道的程序猿

获取编程相关电子书、教程推送与免费下载。

实现

1、下载插件并引入

<script type="text/javascript" src="./js/L.Graticule.js"></script>

2、添加格网

L.graticule().addTo(map);

3、完整代码

​<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>leaflet格网控件</title><link rel="stylesheet" href="/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="/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}./{z}/{x}/{y}.png').addTo(map);//添加格网L.graticule().addTo(map);</script></body></html>​

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。