怎么在leaflet地图上加载已经校准的图片

0 篇文章 0 订阅

最近在做一个gis web项目,项目基本使用leaflet,现在有一个需求是在地图上加载已经校准的图片(georeference)。图片是用arcgis校准的,在leaflet地图上插入一张图片很简单

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

但是普通的图片(jpg、png)没有保存位置信息等,因此关键是需要通过图片计算得到真实的位置信息。用arcgis校准图片后,导出的文件(以jpg格式为例)除了图片文件,还有后缀为 .jgw的空间位置文件、后缀为jpg.aux.xml文件,这几个文件保存了图片的真实位置信息,我们的目标就是通过这两个文件换算得到真实的位置。
这是我在github上找到的一个例子:
这里写图片描述
只需要把校准文件(jpg、jgw、jpg.aux.xml)打包成一个文件即可。
有需要的可以去下载github

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet可以通过L.imageOverlay方法加载图片地图。在Vue和Leaflet联合技术栈中,可以使用以下代码示例来加载图片地图: ```javascript initMap() { let imageUrl = '图片路径'; // 图片的绝对路径 var map = L.map('map', { zoom: 5, // 初始地图缩放级别 minZoom: -5, // 地图的最小缩放级别 maxZoom: 5, // 地图的最大缩放级别 crs: L.CRS.Simple, // 要使用的坐标参考系 }); var bounds = \[\[0, 0\], \[758, 729\]\]; // 图片地图的边界范围 L.imageOverlay(imageUrl, bounds).addTo(map); // 添加图片地图图层 map.fitBounds(bounds); // 自适应地图边界范围 } ``` 以上代码中,`imageUrl`是图片地图的路径,`bounds`是图片地图的边界范围。通过调用`L.imageOverlay`方法并将其添加地图中,即可加载图片地图。最后,使用`map.fitBounds`方法使地图自适应边界范围。 #### 引用[.reference_title] - *1* *3* [leaflet直接加载图片缩放,不需要地图底图(示例代码035)](https://blog.csdn.net/cuclife/article/details/127900987)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [leaflet引入图片作为地图](https://blog.csdn.net/Mi_si/article/details/121749597)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值