场景
Leaflet快速入门与加载OSM显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
上面加载显示后图形会有对应的样式,leaflet封装了setStyle接口,让用户可以灵活地修改已经绘制
图形的样式。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、页面上添加地图和按钮
<div id="map"></div> <div class="ToolLib"> <input type="button" class="ButtonLib" value="修改矩形样式" onclick="setPolygonStyle()" /> </div>
2、按钮点击事件中调用获取随机颜色的方法,重新设置样式
/**生成随机颜色 */ function getRandomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + ',' + g + ',' + b + ")"; } /**修改矩形图形的样式 */ function setPolygonStyle() { //获取颜色 var color = getRandomColor(); //修改样式 rectangle.setStyle({ color: color }); }
3、完整代码
<!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; 80%; height: 80%; overflow: hidden; } </style> </head> <body> <div id="map"></div> <div class="ToolLib"> <input type="button" class="ButtonLib" value="修改矩形样式" onclick="setPolygonStyle()" /> </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); //绘制矩形 rectangle = L.rectangle([[36.09, 120.35], [36.12, 120.55]], { //颜色 color: "#ff7800", //线宽 weight: 1, //填充色透明度 fillOpacity: 0.5 }).addTo(map); /**生成随机颜色 */ function getRandomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + ',' + g + ',' + b + ")"; } /**修改矩形图形的样式 */ function setPolygonStyle() { //获取颜色 var color = getRandomColor(); //修改样式 rectangle.setStyle({ color: color }); } </script> </body> </html>