使用Leaflet-imageoverlay加载本地图片实现拖拽和缩放

最新推荐文章于 2025-05-12 08:10:51 发布
最新推荐文章于 2025-05-12 08:10:51 发布
阅读量8.6k 收藏 7
点赞数 2
CC 4.0 BY-SA版权
分类专栏： leaflet GIS 文章标签： leaflet GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GeneralLi95/article/details/81082064
本文介绍了如何使用Leaflet-imageoverlay加载本地图片，并实现图片在地图上的拖拽和缩放功能。通过设置缩放级别，将大尺寸图像平铺在地图上，利用Leaflet的坐标转换功能定位和展示图片。这种方法适用于在网页中展示大图并允许用户进行交互操作的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用Leaflet-imageoverlay加载本地图片实现拖拽和缩放

原文地址
http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

使用leaflet.js去平移和缩放大尺寸图像。

先上代码（本文写于18年7月17日，在原文作者的源代码中更新了使用最新的leaflet包）：

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css">
    <style>
    #image-map {
    
    
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    <
最低0.47元/天 解锁文章

200万优质内容无限畅学
035：vue+leaflet直接加载图片缩放，不需要地图底图
大剑师兰特的GIS世界
11-17 1128
第035个本示例的目的是介绍演示如何在vue+leaflet直接加载图片缩放，不需要地图底图。将经度和纬度直接映射到 x 和 y 的简单 CRS。可用于平面地图（例如游戏地图）。请注意，y 轴仍应反转（从下到上）。
143：vue+leaflet 在25833投影坐标下，加载一小块图像叠层数据
大剑师兰特的GIS世界
03-08 758
本示例是介绍如何在vue+leaflet, 自定义CRS，形成新的投影，这里是25833投影，并使用 L.Proj.imageOverlay的方法在地图上加载载一小块图像叠层数据。
react-leaflet-distortable-imageoverlay:缩放、倾斜、旋转和平移图像叠加
08-05
React传单失真图像覆盖 在React中缩放、倾斜、旋转和平移图像叠加 支持拉伸、倾斜、扭曲、旋转、平移和透明的 react-leaflet ImageOverlay。 它旨在允许在 react-leaflet 地图上定位和校正航空、无人机和 UAV 图像。 它是通过扩展和的功能为 安装 npm install --save react-leaflet-distortable-imageoverlay 用法 ReactLeafletImageOverlay组件获取ReactLeafletImageOverlay的角落，并使用onWellKnownTextUpdated和onCornersUpdated处理程序在更改时更新父onCornersUpdated 。 editMode可以是以下之一：“旋转”、“平移”、“扭曲”和“缩放”。 组件本身没有工具栏或在编辑模式之间切换的能力，因此您
Leaflet地图框架使用手册——L.ImageOverlay
black2Girl的博客
12-26 3591
用来在地图上规定范围内载入和显示单幅图像，继承自ILayer。 Constructor（函数构造器） L.ImageOverlay()：通过给定图像的URL和相关的地理范围来实例化一个图像叠加层对象。 Options（选项） opacity：图像叠加层的透明度。 Methods（方法） addTo()：将图像叠加层添加到地图上。 setOpacity()：设置叠加层的透明度。 brin...
源码分析之Leaflet中ImageOverlay
最新发布
Jinuss的博客
05-12 463
ImageOverlay是Leaflet中用于在地图指定地理范围内叠加显示静态图像（如卫星图、历史地图等）的类。它继承自Layer，提供了图像加载、透明度设置、交互性控制等功能。通过initialize方法，ImageOverlay接收图像URL、地理边界和配置选项，并初始化图像元素。onAdd和onRemove方法分别处理图像的添加和移除，确保图像在地图上的正确显示和交互。setOpacity、setUrl、setBounds等方法允许动态调整图像的透明度、URL和边界。_reset方法在缩放或重置视图时
leaflet插件imageOverlay简单用法
qq_38354883的博客
09-06 5004
&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Leaflet class diagram - Leaflet&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot
leaflet-image-draw:您可以设置比例尺，距离，计算地图图像上的面积和规划区域，以及将最终地图结果下载为PNG图像（原始）
03-05
平面地图的测绘功能，可在测绘图片上设置比例尺，测距，计算面积，规划区域等，依次最终测绘结果下载为png图片（原图）。 使用 （v0.7.7） （v0.4.9） （v3.1.1） 基于实现焦点图像区域编辑功能，能够在图片上放置，编辑，删除图形区域以及文字说明。 Github 设置比例尺 1.点击比例尺时激活地图点击事件 function createScale ( e ) { e . stopPropagation ( ) ; let sLen = scale_geometry . length ; if ( sLen > 0 ) { for ( let i = 0 ; i < sLen ; i ++ ) { map . removeLayer ( scale_geometry [ i ] ) ; }
120：vue+leaflet 加载多种形式google 地图
大剑师兰特的GIS世界
03-25 1145
第120个本示例的目的是介绍演示如何在vue+leaflet中添加谷歌地图，有多种形式，分别是google路网图、google卫星影像图等。
LeafLet离线地图详细demo合集.rar
11-15
这个"LeafLet离线地图详细demo合集.rar"文件显然是一个包含多个示例的资源包，旨在帮助开发者更好地理解和应用LeafLet在离线地图场景中的使用。 1. **LeafLet基本概念**： - **地图层（Map Layer）**：LeafLet的...
Leaflet.js imageOverlay无法触发点击事件
前端小菜鸡
10-13 1782
公司项目需求为用户上传光栅图，然后在图上标注监控点位，因百度地图API不支持不使用地图直接操作一张图片，于是选择Leaflet.js实现业务功能。 看网上代码将光栅图以 imageOverlay 对象添加到地图容器，后发现无法触发点击事件，关键代码如下 var image = L.imageOverlay('images/timg.jpg', bounds).addTo(map); imag...
ImageOverlay:一个有用的工具，供摄影师在他们的照片上叠加他们的个人品牌标志和文字
07-03
图像叠加 一个有用的工具，供摄影师在他们的照片上叠加他们的个人品牌标志和文字。
Leaflet.DistortableImage, 用于扭曲图像的小叶扩展.zip
09-18
Leaflet.DistortableImage, 用于扭曲图像的小叶扩展 Leaflet.DistortableImageLeaflet张扩展图片 --"弹性拉伸"-- for MapKnitter.org ( 。src ) 映像georectification服务 by public 实验室。 Leafle
imageOverlay:jQuery 示例
07-13
图像叠加 jQuery 示例。 图片库。 隐藏和显示图像。 孩子们（）; 属性（）；
LeafletJS-Overlay
专注GIS软件开发。
06-03 1455
除了地图叠加层，您还可以在Leaflet应用程序中使用图像，视频叠加层。在本章中，我们将看到如何使用这些叠加层。 图像叠加 请按照下面给出的步骤使用图像叠加层。 步骤1-通过传递<div>元素（字符串或对象）和地图选项（可选）来创建地图对象。 步骤2-通过传递所需图块的URL创建一个Layer对象。 第3步-使用Map类的addLayer（）方法将图层对象添加到地图。 步骤4-使用L.imageOverlay（）创建图像叠加层。传递图像的URL和代表图像边界的对象，如下所示。...
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3514
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
【亲测免费】 Leaflet-Image 项目教程
gitblog_00306的博客
08-16 856
Leaflet-Image 项目教程 1. 项目的目录结构及介绍 Leaflet-Image 项目的目录结构相对简单，主要包含以下几个部分： leaflet-image/ ├── dist/ │ └── leaflet-image.js ├── examples/ │ └── index.html ├── src/ │ └── leaflet-image.js ├── .gitigno...
【亲测免费】 探索Leaflet-Image：静态地图渲染利器
gitblog_00084的博客
04-27 514
探索Leaflet-Image：静态地图渲染利器 在Web开发中， Leaflet是一个广受欢迎的JavaScript库，用于创建交互式的地图应用。然而，在某些场景下，例如生成预览图、打印或批量处理地图时，我们可能需要将动态地图转换为静态图像。这就是项目的用途。 项目简介 Leaflet-Image是Mapbox团队开发的一个小型插件，它能够将你的Leaflet地图实例转化为一个完整的PNG或JP...
Leaflet加载图片-imageoverlay
SUN 的博客
11-06 7771
原文地址  http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html leaflet使用imageoverlay加载图片，转载 Using leaflet.js to pan and zoom a big image 14 Jun 2014 I recently used leaflet.js to e
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值