Leaflet中通过setStyle实现图形样式编辑
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中通过setStyle实现图形样式编辑
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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中使用Leaflet.Pa
- 下一篇： Leaflet中绘制同心圆、多个中心对称