场景

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

Leaflet中通过setStyle实现图形样式编辑相关推荐

Leaflet中添加的不同图层样式图标
如上图,具体问题请查看对应html页引用的basemaps的css样式. 如下图是本项目引用的css样式: .basemap img { width: 48px; border: 2px solid ...
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
Leaflet中使用draw绘制时获取图形的几何信息
场景 Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/d ...
合并图层和拼合图稿，锁定与解锁图层，显示与隐藏图层，剪切蒙版，了解图层样式面板，创建图形样式，编辑图形样式
合并图层和拼合图稿:先创建两个图层,然后选择两个图层,点击,选择合并所选图层.拼合图稿是点击需要拼合到的图层,,选择拼合图稿.就可以拼合在一起了. 锁定与解锁图层:就是锁住图层和不锁图层显示与隐藏图 ...
java中的图形界面编辑界面_第58节:Java中的图形界面编程-GUI
欢迎到我的简书查看我的文集前言: GUI是图形用户界面,在Java中,图形用户界面我们用GUI表示,而GUI的完整英文为: Graphical User Interface(图形用户接口), 所谓图 ...
Leaflet中对鼠标按下、移动事件监听实现移动单个图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
word中套用表格样式在哪里_在Word中，关于“套用表格样式”的用法，下列说法正确的是（）...
[单选题]茄子的分枝习性属于 [判断题]在Word编辑状态下,当选定若干文字后,用鼠标左键单击"常用"工具栏"显示比例"列表框中的下拉按钮并选定"75 ...
《Adobe Illustrator CS4中文版经典教程》—第0课0.11节将外观属性存储为图形样式...
本节书摘来自异步社区<Adobe Illustrator CS4中文版经典教程>一书中的第0课0.11节将外观属性存储为图形样式,作者[美]Adobe公司,更多章节内容可以访问云栖社区&q ...

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

场景

实现

Leaflet中通过setStyle实现图形样式编辑相关推荐

最新文章

热门文章