如何通过缓存制作离线地图(使用leaflet OSM)?

2023-12-25

我正在尝试通过浏览器中的缓存(IndexedDB)制作离线地图。我理解的概念是,当连接到互联网时,我首先下载并存储地图的图块。

然后我必须逻辑上离线加载图块。

但是,我无法弄清楚。

如何存储它们以及如何逻辑地再次加载它们?我被困在这里了。我正在使用leaflet API对于地图。如何实施?


请参阅我对此的广泛研究:

为离线Web应用程序存储图像数据(客户端存储数据库) https://stackoverflow.com/questions/14113278/storing-image-data-for-offline-web-application-client-side-storage-database

and at:

https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles

您想要做的关键是使用功能平铺层从数据库获取内容:

https://github.com/ismyrnow/Leaflet.functiontilelayer https://github.com/ismyrnow/Leaflet.functionaltilelayer

顺便说一句,我刚刚为此测试了 PouchDB,它比原始 IndexeDB 干净得多。

请关注我的结果:

https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R0 https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R0

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过缓存制作离线地图(使用leaflet OSM)? 的相关文章

  • javascript中的(多维)数组中的反向条目

    我正在使用 leaflet js 在 openstreetmap 上显示一些多边形 我有一个外部数据资源 它为我提供了多边形的坐标 不幸的是 这个数组的坐标顺序错误 例子 我得到 10 5254913 52 2734311 10 52588
  • Leaflet OSM:多边形上的中心地图视图

    我想生成一个 html 文件 包括Leaflet库来显示OpenStreetMap用多边形查看 地图上的多边形应居中 为此 我遵循this https github com Leaflet Leaflet issues 1196讨论 但我仍
  • IndexedDB - 什么是 Key、keyPath 和 indexName?

    我来自MySQL 习惯了传统的数据库表方案 我无法理解 IndexedDB 及其一些术语 我在文档中查找了这些定义 Key一种数据值 通过它在对象存储中组织和检索存储的值 索引名称要创建的索引的名称 keyPath要使用的索引的键路径 基本
  • Leaflet 删除 GeoJSON 层

    我通过在传单中创建 GeoJSON 图层来为地图上的区域着色 首先我创建一个空层 var layerPostalcodes L geoJSON addTo map 然后 我创建一个包含形状信息的 geojson 元素并将其添加到图层中 la
  • R 传单缩放控制选项

    我正在使用传单在 R 中构建地图工具 我想将缩放限制在某个区域 但是setMaxBounds功能似乎没有任何效果 library dplyr library leaflet library tigris ohio map lt leafle
  • Blazor - Web 程序集加载时间

    我开发了 Blazor Server 服务器应用程序 客户显然不喜欢 无法重新连接到服务器 重新加载页面以恢复功能 的消息 这就是我尝试探索迁移到 Web Assembly 的原因 我正在努力 如何加快 Web 程序集加载时间 因为主页无法
  • 将 Leaflet 与 Ionic2 typescript 一起使用

    我是新来的Ionic2 and Angular2 with 打字稿我想为 iOS 和 Android 构建一个移动应用程序 下一步我想包括一张地图并找到Leaflet 在 GoogleMaps 和 OSM 之间轻松更改 所以 我的问题从安装
  • 无法使用 R 的 leaflet 包循环生成多个地图

    这是新来的 对 R 来说也相对较新 所以请原谅 apriori 并让我知道我在这篇文章中做错了什么 以避免将来烦扰其他人 我正在尝试创建传单地图序列 1971 年 9 月至 1972 年 4 月 最后 我想将它们压缩成闪亮的 并让用户播放
  • 带有 Google 卫星图层的 Leaflet Map API [重复]

    这个问题在这里已经有答案了 我对此非常感兴趣传单地图API http leaflet cloudmade com 但是 我需要能够使用 Google 卫星层 我无法找到有关如何将 Google 卫星图层添加到 Leaflet 的示例 我知道
  • 传单通过图层选择添加/删除图例

    我是 Leaflet JavaScript 的新手 并且一直在努力让图例仅在从图层控件中选择特定图层时才显示地图 我有三层 其中一层我希望没有图例 另外两层有相应的图例 我遇到了一个例子 但未能使其工作 Add and remove leg
  • 如何在 R 中按下传单弹出窗口时创建事件?

    当我单击传单多边形时 我想让 tabPanel 变为闪亮 我对如何做到这一点有一些想法 但我找不到实现它们所需的信息 我在选项卡面板中有传单 但我想在单击多边形时切换到另一个选项卡 leaflet llmap gt addTiles gt
  • R传单和闪亮如何清除地图点击数据

    下面的例子摘自RStudio 教程 http rstudio github io leaflet shiny html传单上 我稍微修改了一下以适应我的问题 我有一张地图 这里是地震 我使用它在地图上绘制addCircleMarkers单击
  • 如何在大型光栅图像上将 Leaflet FlyTo() 与 unproject() 和 GeoJSON 数据结合使用?

    我正在使用 Leaflet 构建故事地图 使用切片为图块的大图像而不是 真实世界 地图数据 我正在使用这个插件 https commenthol github io leaflet rastercoords https commenthol
  • Osmdroid 离线文件

    我有一个 osmdroid 地图 我想从 MOBAC 的 osmdroid zip 或 gemf 文件加载离线图块 我查看了它 无论我走到哪里 它都说只需将其放入 sdcard osmdroid 中即可 但它不起作用 我需要更改代码中的某些
  • 如何在 IndexedDB 中创建具有多个条件的查询

    我有一个商店有多个我想要查询的索引 为了举例 我们假设我有一个消息存储 其中包含 user id 索引和 create date 时间戳 并且假设我有索引 user id create date user id create date 我知
  • 在 Leaflet L.Draw 插件中以编程方式添加多边形

    有没有办法使用 Leaflet 绘制插件以编程方式添加多边形 https github com Leaflet Leaflet draw https github com Leaflet Leaflet draw 例如 单击一个按钮并添加一
  • 如何更改传单弹出窗口的背景颜色?

    我正在使用 Leafletjs 创建地图 我想将弹出窗口 当前显示图像和链接 的背景颜色从白色更改为其他颜色 看起来基本的背景颜色 CSS 语法并不能解决这个问题 有什么建议吗 谢谢 斯科特 调用 leaflet css 后 您可以包含
  • 未捕获的错误:地图容器已初始化

    我正在使用 React JS 制作网页 我的目标是在前端显示地图 我正在使用react leaflet npm 包来实现同样的目的 但是 我收到以下错误 Error Uncaught Error Map container is alrea
  • 根据纬度和经度识别哪个是多边形

    我有一张使用 leaflet js 绘制的地图 如果我给出经度和纬度值作为输入 我可以识别多边形吗 我可以获得一个客户端脚本吗 得到答复如下 这是基于 多边形中的点算法 function getPoint float x 89 824218
  • 使用 leaflet.js 在点周围添加设定大小的正方形多边形

    有点奇怪 希望有人能帮忙 在传单中 一旦用户输入了纬度 经度并向地图添加了一个点 我希望能够在该点周围添加一个 10 公里的正方形 我尝试四处寻找计算方法来找到 x 公里外的正方形角点 但没有挖出任何东西 但肯定有更简单的方法 有人有想法吗

随机推荐

  • 根据单选按钮单击显示和隐藏 div [重复]

    这个问题在这里已经有答案了 我希望能够使用单选按钮和 jQuery HTML 动态更改显示的 div div 2 Cars div
  • Linq 风格“For Each”[重复]

    这个问题在这里已经有答案了 是否有用于 Foreach 操作的 Linq 风格语法 例如 将基于一个集合的值添加到另一个已存在的集合中 IEnumerable
  • Pycharm 中的远程开发 - 无需本地副本

    我知道如何在 Pycharm 中设置远程解释器 到目前为止远程开发进展顺利 但在某些情况下 我无法在我处理商业问题的计算机上保存文件的本地副本 有没有办法在 Pycharm 中远程开发WITHOUT有脚本和其他项目文件的本地副本吗 我刚刚遇
  • IE 中的 JavaScript 分析器

    有谁知道在 IE 中分析 JavaScript 的工具吗 可用列表 IE8 http blogs msdn com ie archive 2008 09 11 introducing the ie8 developer tools jscr
  • 录制直播音频

    我实际上正在制作一个应用程序 它必须在 iPad 上播放和录制来自互联网的流媒体音频 音频流已经完成 我很快就要进入录音部分 我不知道如何继续 你能给我一个提示吗 主意 它必须在播放的同时录制为 AAC 或 MP3 Thanks 您需要使用
  • 如何在 TypeScript 中通过 AMD 请求 jquery

    我的 TypeScript 模块如何需要 jquery AMD 模块 例如 假设脚本的目录结构如下所示 jquery 1 8 2 js jquery d ts module ts require js 我希望从 module ts 生成的
  • 为什么它不是尾递归?

    我有以下代码 我不明白为什么它不是尾递归 override fun drop n Int List a if n 0 this else tail drop n 1 而这是尾递归 fun drop n Int List a tailrec
  • 如何在 Python 中比较数组中的值 - 找出两个值是否相同

    我基本上有一个包含 50 个整数的数组 我需要找出这 50 个整数是否相等 如果相等 我需要执行一个操作 我该怎么做呢 据我所知 Python 中目前没有一个函数可以做到这一点 如果你的意思是你有一个列表并且你想知道是否有重复的值 那么从列
  • 并发、并行和异步方法有什么区别?

    并发是指两个任务在不同的线程上并行运行 但是 异步方法并行运行 但在同一个线程上 这是如何实现的 另外 并行性怎么样 这3个概念有什么区别 并发和并行实际上与您正确推测的原理相同 两者都与同时执行的任务有关 尽管我想说并行任务应该是真正的多
  • Wpf:在多个控件上应用自定义样式的工具提示

    我正在使用 WPF 应用程序 我创建了一个自定义控件库 在其中自定义了所有控件 这意味着添加了一些功能并重新设计了它们的样式 我也以同样的方式重新设计了工具提示 我在其他项目中使用这个自定义库 除了工具提示之外 一切都工作正常 工具提示样式
  • 如何使用两个按钮从 api 制作日期和时间列表水平视图,以通过颤动滚动列表视图

    我在颤振日期和时间页面视图中 当用户单击时间时 将单击的时间设置为灰色 并将其他时间设置为透明颜色 在此图片中您可以看到所选日期 https i stack imgur com jQ8dd jpg请注意 用户可以再次重新选择 以便旧的选择设
  • 如何转换 JToken

    我有一个值为 1234 的 JToken 如何将其转换为整数值 如 var totalDatas 1234 var tData jObject totalDatas int totalDatas 0 if tData null totalD
  • Pandas 中的plot 和iplot 有什么区别?

    在 Jupyter Notebook 中显示图形时 plot 和 iplot 有什么区别 我刚刚开始在 Python 3 6 6 中使用 iplot 我认为它使用了 Cufflinks 包装器来运行 Matplotlib 这似乎是我用简单的
  • MongoDB 数组 - 原子更新或推送元素

    我在 MongoDB 中有以下文档 id ObjectId 521aff65e4b06121b688fabc user abc servers name server1 cpu 4 memory 4 name server2 cpu 6 m
  • 如何在MVC单元测试类中模拟Request.Files[]?

    我想在 MVC 单元测试中测试控制器方法 为了测试我的控制器方法 我需要一个长度为 1 的 Request Files 集合 我想模拟 Request Files 因为我在控制器方法渲染的视图上使用了文件上传控件 任何人都可以建议我如何在单
  • 如何使用GD检查GIF是否具有透明度?

    我找到了问题如何使用GD检查图像是否具有透明度 https stackoverflow com q 5495275但答案都是针对 PNG 文件的 是否有解决方案可以使用 GD 扩展在 PHP 中检查 GIF 图像是否具有透明度 我假设 al
  • 依赖算法 - 找到要安装的最小软件包集

    我正在研究一种算法 其目标是找到安装包 X 的最小包集 我将通过一个例子更好地解释 X depends on A and E or C A depends on E and H or Y E depends on B and Z or Y
  • 打开新选项卡时使用 JSF 受保护视图时出错

    我已经设置了我的 Web 应用程序 通过在 faces config protected views 中列出各个页面来防止 CSRF 这在本地运行时效果很好 但在部署到服务器后 我最终在打开页面链接时收到这些错误 javax faces a
  • brew install python3 没有安装 pip3

    我使用 homebrew 安装了 python3 但它没有安装 pip3 或者我应该说它已安装但它无法识别该命令 这是我所做的 brew install python3 这安装了 python3 但最后抛出了一个错误 说它无法链接 pyth
  • 如何通过缓存制作离线地图(使用leaflet OSM)?

    我正在尝试通过浏览器中的缓存 IndexedDB 制作离线地图 我理解的概念是 当连接到互联网时 我首先下载并存储地图的图块 然后我必须逻辑上离线加载图块 但是 我无法弄清楚 如何存储它们以及如何逻辑地再次加载它们 我被困在这里了 我正在使