當前位置：
首頁 >
Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格
發布時間：2025/3/19
21
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面加載地圖顯示的基礎上，除了繪制基本圖形還可以繪制其他圖形。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、繪制同心圓
??????? //繪制同心圓//設置圓心坐標var latLng = L.latLng(36.09, 120.35);//初始半徑var r = 65;for (var i = 0; i < 5; i++) {//添加圓L.circle(latLng, {//圓半徑radius: r,//顏色color: '#ffcc33',//填充色fillColor: 'white',//填充色透明度fillOpacity: 0.8}).addTo(map);//調整半徑大小r = r / 1.5;}2、繪制多個中心對稱多邊形
??????? //繪制多個中心對稱多邊形for (var i = 0; i < 8; i++) {//設置矩形的坐標范圍var bounds = [[36.15 + i * 0.000125, 120.35 + i * 0.000125], [36.11 - i * 0.000125, 120.30 - i * 0.000125]];//將創建的矩形添加進圖層L.rectangle(bounds, {//邊線顏色color: "#ff7800",//線寬weight: 3,//填充色fillColor: 'white',//透明度fillOpacity: 0}).addTo(map);}3、繪制平行四邊形網格
??????? //繪制平行四邊形網格//繪制經線，傾斜for (var i = 0; i < 9; i++) {L.polyline([[36.13, 120.33 + i * 0.00375], [36.16, 120.33 + (i + 1) * 0.00375]], { color: 'red' }).addTo(map);}//繪制緯線,水平for (var j = 0; j < 9; j++) {L.polyline([[36.13 + j *0.00375, 120.33 + j * 0.00375 / 8], [36.13 + j * 0.00375, 120.36 + j * 0.00375 / 8]], { color: 'red' }).addTo(map);}注意這里的經緯度的差值除以8為遞增的等距離
4、繪制矩形網格
??????? //繪制矩形網格//繪制經線for (var i = 0; i < 11; i++) {L.polyline([[36.18, 120.36 + i * 0.001], [36.19, 120.36 + i * 0.001]], { color: 'red' }).addTo(map);}//繪制緯線for (var j = 0; j < 11; j++) {L.polyline([[36.18 + j * 0.001, 120.36], [36.18 + j * 0.001, 120.37]], { color: 'red' }).addTo(map);}注意這里也是經緯度的差值除以10為遞增的等距離
5、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet繪制同心圓</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">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//繪制同心圓//設置圓心坐標var latLng = L.latLng(36.09, 120.35);//初始半徑var r = 65;for (var i = 0; i < 5; i++) {//添加圓L.circle(latLng, {//圓半徑radius: r,//顏色color: '#ffcc33',//填充色fillColor: 'white',//填充色透明度fillOpacity: 0.8}).addTo(map);//調整半徑大小r = r / 1.5;}//繪制多個中心對稱多邊形for (var i = 0; i < 8; i++) {//設置矩形的坐標范圍var bounds = [[36.15 + i * 0.000125, 120.35 + i * 0.000125], [36.11 - i * 0.000125, 120.30 - i * 0.000125]];//將創建的矩形添加進圖層L.rectangle(bounds, {//邊線顏色color: "#ff7800",//線寬weight: 3,//填充色fillColor: 'white',//透明度fillOpacity: 0}).addTo(map);}//繪制平行四邊形網格//繪制經線，傾斜for (var i = 0; i < 9; i++) {L.polyline([[36.13, 120.33 + i * 0.00375], [36.16, 120.33 + (i + 1) * 0.00375]], { color: 'red' }).addTo(map);}//繪制緯線,水平for (var j = 0; j < 9; j++) {L.polyline([[36.13 + j *0.00375, 120.33 + j * 0.00375 / 8], [36.13 + j * 0.00375, 120.36 + j * 0.00375 / 8]], { color: 'red' }).addTo(map);}//繪制矩形網格//繪制經線for (var i = 0; i < 11; i++) {L.polyline([[36.18, 120.36 + i * 0.001], [36.19, 120.36 + i * 0.001]], { color: 'red' }).addTo(map);}//繪制緯線for (var j = 0; j < 11; j++) {L.polyline([[36.18 + j * 0.001, 120.36], [36.18 + j * 0.001, 120.37]], { color: 'red' }).addTo(map);}</script> </body></html>?6、效果
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中通过setStyle实现
- 下一篇： Leaflet中使用leaflet.po