Leaflet中通过setStyle实现图形样式编辑

末蓝、 2023-09-30 12:52 23阅读 0赞

## 场景 ##

Leaflet快速入门与加载OSM显示地图：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/122290880 ][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_122290880]

上面加载显示后图形会有对应的样式，leaflet封装了setStyle接口，让用户可以灵活地修改已经绘制

图形的样式。

![0f0413179a9a4cc7940d86d98445e0aa.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、页面上添加地图和按钮

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;
                width: 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>

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_122290880]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[0f0413179a9a4cc7940d86d98445e0aa.gif]: https://img-blog.csdnimg.cn/0f0413179a9a4cc7940d86d98445e0aa.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi