基于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/[email protected]/dist/leaflet.css"/>
    <script src="https://unpkg.com/[email protected]/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可以通过右上角的私信联系我

版权声明:本文为GISuuser原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GISuuser/article/details/103399124

智能推荐

使用Xdebug进行远程调试

为什么要用? 方便联调: 和客户端一起联调,是die(); exit(); 会影响其他人员是使用。 关注数据变化: 正常情况下,我们在调试和开发时,更关注数据的变化。频繁断点、效率比较低。 简单: 之前的开发自己比较懒,一直没用,用起来发现很简单。 原理 运行xdebug需要客户端IDE(phpstorm)、远程服务器配合,首先是客户端配置好端口,发送debug请求,请求会通过浏览器或者IDE的h...

【教程向】通过windows在树莓派3B上安装Ubuntu MATE 16.04.2 (Xenial)

本文参考了http://www.ituring.com.cn/article/273613 ================================================================= 1:因为树莓派3B的性能问题,所以使用这个特别为树莓派设计的版本。 2:准备: 树莓派3B * 1 16GB TF/Micro SD卡 *1(尽量用速度快一些的卡,因为以后这相...

LeetCode(7 整数反转)

如题 这就不用分析了,直接依次取每位即可,难点就是个越界判断...

Caused by: java.rmi.ConnectIOException: error during JRMP connection establishment; nested exception

启动RMI报如下错误: 最后发现是端口冲突造成的,当时用的5003端口启动服务端的RMI刚好和本地的一个服务端口冲突。 输入netstat -aon|findstr "5003"查询它的pid为3056 继续输入tasklist|findstr "3056",查看是哪个进程或者程序占用了5003端口,结果是:magentproc.exe 找到PID后可以直接...

【LeetCode(Java) - 322】零钱兑换

文章目录 1、题目描述 2、解题思路 3、解题代码 1、题目描述 2、解题思路   定义 dp[i] 表示对于组成金额 i 的最少硬币个数。   如果方案存在,那么至少有一个硬币至少出现了一次:   如果是第 0 个硬币出现了一次,则:dp[i] = dp[i-coins[0]] + 1   如果是第 1 个硬币出现了...

猜你喜欢

在Visual Studio 2013中配置Entity Framework使用MySQL

环境 使用的软件及版本 - Microsoft Visual Studio Ultimate 2013 (版本 12.0.40629.00 Update 5) - Microsoft.Net Framework 版本 4.6.01055 - MySQL版本: 5.6.17 步骤 1. 创建空的MVC项目 2. 安装扩展 3. 在数据库中建立对应的表 必须在数据库内先新建表,否则asp.net mv...

Python才是世界上最好的言语,php,java靠边站

伟大的入门编程语言有什么特征呢?或者换一种方式问,“当我们教他们编程时,应该给予他们什么?”对于成年人和青少年学生,我认为以下五点非常重要。 学生从入门语言获得的五样东西 非常棒的首次体验,就像一本书的第一页,首先需要“入迷”,学习新知识不可避免的会遇到挫折,但要有持续的热情和好奇心,这对于那些从未接触过编码的年轻人来说是至关重要的; Web编程的能...

动态调整docker容器cpu资源

目的:动态调整系统cpu核数后,如何在不停止容器服务的情况下,docker动态使用最新的CPU资源 事件由来:     1、在ucloud上购买了一台可以热升级的机器,热升级指的是动态更改系统cpu和内存资源     2、随着业务的扩展,发现cpu、内存负载过高,需要在不停止业务的情况下动态扩容,因此使用了ucloud提供的热升级服务,从4核12G扩容为8核...

用python itchat包 爬取微信好友头像形成矩形头像集

原创作品,转载请注明作者 abysscarry-袁杰丶 初学python,我们必须干点有意思的事!从微信下手吧! 头像集样例如下: 大家可以发朋友圈开启辨认大赛哈哈~ 话不多说,直接上代码,注释我写了比较多,大家应该能看懂 运行结果: ok!!!...

impala实现拉链表

1.文档目的         拉链表是针对数据仓库设计中表存储数据的方式而定义的,即是记录历史。记录一个事物从开始,一直到当前状态的所有变化的信息。传统数据仓库一般采用拉链的方式保留主数据(例如客户信息)的变化数据,采用这种设计方式的主要原因是减少数据冗余。这个需求在Hadoop中主要是有以下两种实现方式选择: 每天保留一份全量的切片数据。Hadoop平台由...