Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面的基礎上，實現對圖形進行旋轉。
?
Leaflet的L.Path.Transform插件實現了圖形了旋轉、拖拽、比例縮放等功能。
插件地址：
https://github.com/w8r/Leaflet.Path.Transform
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、下載插件并引入css
??? <link rel="stylesheet" href="./css/transform/style.css" /><link rel="stylesheet" href="./css/transform/topcoat-desktop-light.css" />?
2、引入bundle.js
<script src="./js/transform/bundle.js" type="text/javascript"></script>并且修改bundle.js中地圖相關參數為自己對應的參數
3、新建html代碼
? <!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" /><link rel="stylesheet" href="./css/transform/style.css" /><link rel="stylesheet" href="./css/transform/topcoat-desktop-light.css" /> </head><body ><div id="map"></div><div id="controls"><div class="wrapper"><p><ul><li><label class="topcoat-checkbox"><input type="checkbox" id="scaling" checked /><div class="topcoat-checkbox__checkmark"></div>Scale</label></li><li><label class="topcoat-checkbox"><input type="checkbox" id="rotation" checked /><div class="topcoat-checkbox__checkmark"></div>Rotate</label></li><li><label class="topcoat-checkbox"><input type="checkbox" id="dragging" checked /><div class="topcoat-checkbox__checkmark"></div>Drag</label></li><li><br></li><li><label class="topcoat-checkbox"><input type="checkbox" id="uniform" checked /><div class="topcoat-checkbox__checkmark"></div>Uniform scaling</label></li></ul></p></div></div><!-- 引入圖形旋轉腳本庫--><script src="./js/transform/bundle.js" type="text/javascript"></script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.Path.Transform插件实现旋转图形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中对鼠标按下、移动事件监听
- 下一篇： Leaflet中通过setStyle实现