场景
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; 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、效果
