Leaflet中繪製同心圓、多箇中心對稱多邊形、平行四邊形網格、矩形網格
阿新 • • 發佈：2022-04-07
場景
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/[email protected]/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/[email protected]/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、效果