首页 > 其他分享 >leaflet瓦片地图纠偏

leaflet瓦片地图纠偏

时间:2023-03-14 10:01:49浏览次数:46  
标签:使用 地图 纠偏 leaflet 偏移 瓦片 icon

bug:使用leaflet搭建瓦片离线地图,坐标系皆为gcj02,使用标记定位发现定位偏移。

调试:经过地图缩放发现icon在不断的修正坐标定位,缩放越大,icon位置越精准。

原因:marker标记中使用了自定义icon,icon携带透明padding,因为坐标icon显示是根据icon图片左上角来精准锚点,导致元素大小被填充,图片位置偏差,出现偏移效果。

解决方案:

  1、直接使用默认icon。

  2、使用自定义icon时,设置iconAnchor(icon图片锚点位置)

 

注:多看文档。如果不要求使用离线地图,可参考:leaflet中如何优雅的解决百度、高德地图的偏移问题_leaflet地图偏移_GIS兵器库的博客-CSDN博客

 

标签:使用,地图,纠偏,leaflet,偏移,瓦片,icon
From: https://www.cnblogs.com/fengsaoke/p/17213760.html

相关文章

  • vue+leaflet示例:地图分屏对比展示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1)......
  • vue+leaflet示例:在线地图切换显示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1......
  • 瓦片地图搭建
    技术栈:MySQL数据库、Node.js、Leaflet.js地图下载器:MapDownloader  链接:https://pan.baidu.com/s/1LfFT_mjUGzXIIkVe0sBGYA  提取码:d0u6具体操作:dxxzst/OfflineMap:......
  • leaflet 设置图层优先级
    Leaflet在添加了区域、点位等图层之后,需要设置图层的优先级,可以通过pane来设置。 this.map.createPane('tlop')this.map.getPane('tlop').style.zIndex=500cons......
  • leaflet多边形填充图片
    效果图: leaflet 有imageOverlay图层根据两个点坐标生成图像,但体验感不太好,设计上传一张图片后,常常不能对齐,就尝试自己封装个图层。如上图所示,图片有两种方式,一种方式......
  • 地图下载器 002 根据下载范围获取要下载的瓦片信息
    1、瓦片信息的存储方式设计下载地图瓦片的第一步,就是要计算出要下载哪些地图瓦片。根据上篇内容,我们了解了谷歌瓦片组织的理论知识,现在就需要写代码实现这些内容。一般情......
  • Leaflet.js | Map类属性与方法
    1、初始化L.map(<String>id,options?)//用地图div的id创建L.map(<HTMLElement>el,options?)//用地图div的name创建//简单示例//initializethemaponthe......
  • Leaflet.js | 官方控件Control
    1、比例控件一个简单的比例控件,以公制(m/km)和英制(mi/ft)系统显示当前屏幕中心的比例,可扩展。使用示例L.control.scale().addTo(map);创造构造描述L.contr......
  • leaflet的简单使用
    一、官网https://leafletjs.com/reference.html  leaflet是一个轻量级的地图组件,但是由于地图使用的是瓦片地图图片,而leaflet使用的图片是https://tile.openstreetmap......
  • leaflet加载百度地图底图
    一、介绍leaflet使用百度地图,叠加层使用谷歌坐标;leaflet默认使用硬件/谷歌坐标,使用百度地图需要进行坐标偏移,就是把谷歌坐标转换成百度坐标,此方法是直接在地图投影方法出......