基于leaflet用svg图片实现一个最简单的室内地图
生活随笔
收集整理的這篇文章主要介紹了
基于leaflet用svg图片实现一个最简单的室内地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
之前在CSDN上寫了一些關于室內地圖的博客，很多人問我要室內地圖的資料，今天特地分享一個室內地圖的demo，非常簡單，但是展示效果還是非常好的。主要是有個室內地圖的svg，然后通過leaflet加載出來。
SVG展示
由于沒法展示svg，這里只能轉成圖片展示了
leaflet加載效果
實現代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> </head> <body> <div style="width: 100vw;height: 100vh" id="map"> </div> <script>var map = L.map('map');var imageUrl = './file.svg',imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];L.imageOverlay(imageUrl, imageBounds).addTo(map);map.fitBounds([[40.712216, -74.22655], [40.773941, -74.12544]]) </script> <style>html, body {padding: 0;margin: 0;} </style> </body> </html>如果需要這個svg可以通過右上角的私信聯系我，也可以直接下載，下載地址https://download.csdn.net/download/GISuuser/12014416
總結
以上是生活随笔為你收集整理的基于leaflet用svg图片实现一个最简单的室内地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 读书笔记--关于PPT的制作
- 下一篇： spring-boot引用资源：图片、j