Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格
生活随笔
收集整理的这篇文章主要介绍了
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