离线地图实现

最新推荐文章于 2024-03-10 17:31:44 发布
最新推荐文章于 2024-03-10 17:31:44 发布
阅读量1.4k 收藏 5
点赞数 1
文章标签： 爬虫 python git
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36120342/article/details/118192276
版权

离线地图 对比

方式数据来源
GeoServer(shap) +leafletjs国外OSM开源数据
Web GIS离线国内某开源地图下载器
tileserver-gl-ligh(mbtiles) +leafletjs国外Maptiler开源数据

GeoServer(shap) +leafletjs

GeoServer(shap) +leafletjs

跨域问题

https://zhuanlan.zhihu.com/p/65584557

优点

  • 免费
  • 支持多种形式的地图源发布

缺点

  • 数据来源困难
  • 前端集成困难
  • 数据源与国内人员操作习惯不同

例子

页面情况

在这里插入图片描述

Web GIS离线

离线地图切片 sqlLite能稳定下载

https://leafletjs.com/plugins.html

后端 代码 https://github.com/luxiaoxun/Code4Java

搜索 地图数据来源 爬虫 https://www.cnblogs.com/Christbao/p/12291874.html

爬虫 https://github.com/liujiao111/poi.git

优点

  • 免费
  • 支持国内多个地图下载
  • 博客文档齐全
  • 前端集成容易

缺点

  • 下载地图耗费时间
  • 搜索地图地名需要爬取对应官方地图的poi，账号容易被限制，爬取数量少
  • 全国地图全部下载过大，目前支持全国12级地图和深圳18级地图

例子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zZ6IMGsH-1624880668651)(imgs/image-20210628193442570.png)]

tileserver-gl-ligh(mbtiles) +leafletjs

https://l7.antv.vision/zh/docs/tutorial/map/offline

1.加载第三方底图，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以

2.下载opensteetmap 矢量瓦片地图做底图

3.自己业务数据发布底图服务，或者矢量瓦片服务。

npm install -g tileserver-gl-light

tileserver-gl-light china.mbtiles

优点

  • 简单数据免费
  • 前端集成容易

缺点

  • 数据源来源困难
  • 搜索地图地名需要爬取对应官方地图的poi，账号容易被限制，爬取数量少
  • 全国地图全部下载过大，目前支持全国12级地图和深圳18级地图

例子

在这里插入图片描述

借鉴博客：

https://segmentfault.com/a/1190000019363295

https://www.cnblogs.com/luxiaoxun/p/5022333.html

https://www.cnblogs.com/luxiaoxun/p/4454880.html

https://www.cnblogs.com/luxiaoxun/p/5022333.html

最终方案(Web Gis)

架构

在这里插入图片描述

数据维护

地图数据来源

地图下载器地址：https://github.com/luxiaoxun/MapDownloader/releases

使用MapDownLoader地图下载器下载对应是数据

1、如果是数据增加，将原来的DATA.gmdb文件复制到对应的目录下 MapDownloader\MapCache\TileDBv5\en

在这里插入图片描述

2、在MapDownloader目录打开MapDownloader.exe

在这里插入图片描述

3、找到对应的省份数据

在这里插入图片描述

4、双击下载需要的层级(注意对应层级的大小)
在这里插入图片描述

5、等待下载完毕即可

poi数据来源

项目下载 https://github.com/liujiao111/poi.git

1、打开项目(python)

2、找到app.py 修改对应的参数即可

在这里插入图片描述

申请对应的地图的服务，如高德

在这里插入图片描述

3、找到爬去的数据，导入数据库

在这里插入图片描述

4、选择对应数据库的表，导入向导

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5eSU8tBb-1625106549433)(imgs/image-20210701101832703.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YASoI2zk-1625106549434)(imgs/image-20210701101925933.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fb5d1XbF-1625106549434)(imgs/image-20210701102001429.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mwZPaxn0-1625106549435)(imgs/image-20210701102027853.png)]

5、导入完成即可

server服务端

下载地址：https://gitee.com/liuhaomin/publicdemo

1、将poi 的sql导入数据库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O2CrMdvO-1625106549435)(imgs/image-20210701102430664.png)]

2、将地图数据源地址填写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEvE1Ia9-1625106549436)(imgs/image-20210701102219770.png)]

3、启动服务

4、访问服务 localhost:9090/map/map

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkQg0FxN-1625106549436)(imgs/image-20210701102520538.png)]

liuhm~
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
离线地图的实现
07-13
对于内网需要做离线地图的人 应该是有用的 （瓦片）已经测试
百度离线地图---加载卫星地图（二）
yb305
11-30 1234
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 1.
天地图——内网使用离线地图
最新发布
为技术而生
03-10 1333
在内网中，无法直接使用外网天地图资源。可以将天地图资源下载到内网服务器，并且将天地图​​​​​​​JavaScript API指向到内网服务器，实现内网使用天地图全部功能。
如何开发离线地图服务
tangshenq17565的博客
03-25 791
下载离线地图数据(支持谷歌、百度、高德等所有地图源) 离线地图分为两种：一种叫“金字塔瓦片”数据，一种叫“矢量地图数据”。我们看的在线地图比如，百度，谷歌，高德等等网页上的地图，都是金字塔瓦片；另外一种是手机上用来导航的，比如高德地图APP，也可以下载离线地图数据，这个就是矢量的。 卫星影像地图都是金字塔瓦片，无矢量数据。 因此，我们所说的离线地图下载通...
关于实现离线地图的几种方式
weixin_57466771的博客
10-11 2435
Leaflet支持添加各种瓦片图层，包括OpenStreetMap、Google Maps等。可以通过提供瓦片图层的URL来添加图层。在JavaScript中，使用Leaflet初始化地图，并设置地图的中心点和缩放级别。其中 [22.48972, 114.03259]为中心点的经纬度，9为初始缩放级别。当你学会了以上三种方式之后，就可以自己实现如下图的类似效果了。在HTML文件中引入Leaflet库。元素，用于容纳Leaflet地图。在页面中引入 ECharts 库。具体实现步骤和（二）相似。
下载地图瓦片及制作自已的离线地图
bbarber的博客
03-26 853
下载百度地图瓦片 在线下载地址：http://www.wmksj.com/map.html 使用很简单，首先需选择下载地图瓦片的样式，默认即可，然后文本框可搜索指定的位置 点击左边菜单栏的矩形菜单 然后在地图上直接选定需要下载的区域，右键下载 点击下载瓦片， 在弹出框中选择需要下载瓦片级别，点击jpg下载或png下载即可 2. 实现百度离线地图 中国网络人才...
百度离线地图实现（可完全实现断网访问）
04-20
该示例为百度离线地图的一些实现，根据经纬度对离线地图实现标点，从后台返回数据，页面用ajax调用接口获取json数据，用OpenLayers实现离线地图的发布，里面包含了示例区域的离线地图瓦片以及网页Demo
基于Qt的离线地图实现原理简介
07-03
描述了基于瓦片的离线地图的实现原理及在Qt应用程序开发框架下的实现方案。
离线地图实现示例（可完全实现断网访问）
04-15
该示例为离线地图的实现，可完全在没有连接外网的情况下进行访问，用OpenLayers实现离线地图的发布，里面包含了示例区域的离线地图瓦片以及网页Demo。
百度离线地图实现绘制路径并打点示例
04-27
本人博客文章《百度离线地图示例之十二：混合图(街道图、卫星图)实现路径及打点》源码
百度离线地图示例之一：地图展示
xiaoge_586的博客
02-18 6835
前言介绍： 主要是基于v3.0的API版本进行的离线，纯内网可操作，基本上实现了现有90%以上的功能点，能兼容jpg和png格式的瓦片图层，实现了原生和基于Vue两个版本，实现的功能点概要如下： 地图示例： 地图展示 同时加载两个地图 设置地图最大及最 小级别移动地图 缩放地图 拖拽地图 设置地图显示范围 获取地图显示范围 测距 地图控件： 工具条、比例尺控件 地图类型 缩略图控件 添加版权控件 添加自定义控件 覆盖物示例： 添加/删除覆盖物 折线上添加方向箭头 添加动画标注点 设置点的新图标 设
html的map热力图（一）
wolfpirelee的博客
01-13 1万+
因为团队对地图引擎的研究工作正在起步，包括地图制作，地图发布需要一定时间了解。但是前端需求依旧在不停迭代，刚好首页需要展示某个地市的地图及其分区，无奈之下只要用html的map来实现这个功能。ps：真是个苦力活，太不智能了。  标签 带有可点击区域的图像映射 div> img src="area
如何在HTMl网页中插入百度地图
weixin_30415801的博客
11-25 4512
方法/步骤 1、打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图： 2、在“1.定位中心点”中，切换城市，并查找具体位置，如下图： 3、在“2.设置地图”中，可以按照自己的喜好修改地图的外观： a、地图的宽和高 b、地图上显示的按钮（缩放、缩略图、比例尺） c、鼠标和键盘对地图的操作 ...
Java SpringBoot项目 + GraphHopper 实现地图多途径点离线路径规划
weixin_44640245的博客
11-18 1841
GraphHopper 实现地图多途径点离线路径规划
html 调用离线地图,百度地图API1.1制作的离线地图控件(html+webbroswer)
weixin_29557763的博客
06-07 977
【实例简介】使用百度地图API1.1的离线地图,在线时可下载瓦片到本地,离线时,从本地获取瓦片加载显示;【实例截图】【核心代码】/// /// C#调用JS方法/// private object CsharpInvokeJs(string func, params object[] args){try{HtmlDocument doc = webBrowser1.Document;object ...
轻松实现离线地图-离线地图-地图瓦片下载
热门推荐
寒山空明月
08-21 1万+
此demo为前端页面离线地图，不连外网，不用与后端交互，瓦片下载的全就显示的全； 代码示例下载： 链接：https://pan.baidu.com/s/1We86NFDNBCoD9JPz3z_iyw提取码：lhrn 里面有使用讲解视频 或者 https://download.csdn.net/download/bird73/10323603 demo...
java解析本地.geoJson地理信息，根据经纬度找到所在区域(全程Chatgpt3.5交互写代码，附gpt交流记录)
weixin_44123956的博客
06-20 4707
java解析本地.geoJson地理信息，根据经纬度找到所在区域，实现空间搜索 (全程Chatgpt3.5交互写代码，附gpt交流记录)
java百度地图逆地址解析_百度地图—地址解析/逆地址解析
weixin_34640046的博客
02-13 415
1、地址解析：根据地址获取坐标key就是百度地图ak，可以去百度开发者中心去免费申请接口：http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城市名2、逆地址解析：根据坐标获取地址接口：http://api.map.baidu.com/geocoder?location=纬度,经度...
Vue中加载天地图的离线地图
前端-尔嵘
06-17 3309
在上述代码中，我们引入了Leaflet.js和天地图离线地图插件的依赖。在initMap方法中，我们创建了一个地图实例，并使用L.tileLayer.wmts方法来添加天地图离线地图瓦片图层。请将'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png'替换为实际的离线瓦片文件的路径。要在Vue中加载天地图的离线地图，你可以使用L.TileLayer.WMTS插件来实现。
js 离线地图实现搜索
07-26
### 回答1： 要在 JavaScript 中实现离线地图的搜索，可以遵循以下步骤： 1. 获取离线地图数据：下载所需的地图数据，并将其保存在本地。可以选择使用开源地图数据或商业地图数据，具体取决于你的需求和偏好。 2. 加载地图数据：使用适当的 JavaScript 库（如 Leaflet.js 或 OpenLayers 等）加载地图数据。这些库提供了在网页中渲染地图的功能，并支持与地图交互的各种功能。 3. 实现搜索功能：使用适当的搜索算法（如二叉搜索树、哈希表等）将地图数据组织起来，以便快速检索。 4. 创建搜索界面：在网页中创建一个搜索输入框和一个搜索按钮，以便用户可以输入关键字并触发搜索功能。 5. 实现搜索逻辑：当用户输入关键字并点击搜索按钮时，将触发搜索逻辑。在搜索逻辑中，使用先前创建的搜索算法对地图数据进行搜索，并找到与关键字匹配的结果。 6. 显示搜索结果：将搜索结果显示在地图上，可以使用图钉、标记、信息窗口等形式在地图上标示出结果位置。 7. 支持离线搜索：离线地图意味着无法通过网络进行实时搜索。因此，可以考虑将地图数据预加载到浏览器的本地存储（例如 IndexedDB 或 localStorage）中，以便在离线状态下进行搜索。 8. 处理边界情况：考虑搜索的边界情况，例如无结果的情况或用户输入错误的情况。在这些情况下，要给予用户适当的反馈并提供相应的修正建议。 通过上述步骤，可以实现在离线地图中进行搜索的功能。具体实现的细节可能会根据所使用的地图库和数据结构而有所不同。 ### 回答2： 要在离线地图上实现搜索功能，可以使用JavaScript (JS)编写程序。 首先，你需要一个离线地图的数据集，这可以是一个地图图层（例如，使用openstreetmap.org下载的地图数据集），或者是一个支持离线模式的地图API（例如，Mapbox GL JS）。确保你已经将地图数据加载到你的应用程序中。 接下来，你需要一个搜索引擎或库来处理用户输入的搜索请求并返回匹配结果。有一些常用的库可以实现这个功能，例如ElasticSearch、Lunr.js或者Fuse.js。选择一个适合你应用程序需求的库，然后将其集成到你的代码中。 然后，你需要为用户提供一个搜索输入框，让他们输入搜索关键词。你可以通过HTML和CSS来创建一个搜索框，然后使用JS监听输入框的变化。当用户输入关键词时，你可以调用搜索引擎库来进行搜索，然后获取匹配的结果。 最后，你需要在地图上显示搜索结果。可以通过JS使用地图的API来在地图上添加标记或图标来表示搜索结果。你可以根据搜索结果的位置信息，在地图上定位并标记匹配的地点。此外，你还可以为每个搜索结果提供一个信息窗口，显示更详细的信息。 这样，你就能通过JS在离线地图上实现搜索功能了。用户可以在搜索框中输入关键词，然后查看地图上显示的匹配结果。这个实现可以帮助用户在离线地图上快速找到他们需要的地点。 ### 回答3： 要实现在JS离线地图上进行搜索，我们可以按照以下步骤进行操作： 1. 获取离线地图数据：首先，我们需要获取离线地图的数据，可以使用一些开源的地图库或者下载相应地区的离线地图数据包。可以使用工具转换地图数据为适用于JS的格式，例如GeoJSON格式。 2. 创建地图容器：使用HTML和CSS创建一个地图容器，在容器中嵌入离线地图的视图，可以使用类似Leaflet或OpenLayers的地图库来实现。 3. 添加搜索功能：在地图容器中添加一个搜索框和搜索按钮，使用JS监听搜索按钮的点击事件。 4. 编写搜索逻辑：当用户点击搜索按钮时，JS将获取搜索框中的关键字。然后使用适当的方法在地图数据中进行搜索，可以使用地图库提供的搜索功能或者手动实现一个搜索算法。 5. 显示搜索结果：将搜索结果在地图上标注出来，可以使用标记、线条或其他符号来表示搜索结果的位置或范围。 6. 提供交互和导航功能：为了提供更好的用户体验，可以添加交互功能，例如点击某个搜索结果以获取更多信息，或者为搜索结果提供导航功能。 总之，通过获取离线地图数据并在地图容器中实现搜索功能，用户可以在不依赖网络的情况下，在JS离线地图上方便地进行地点搜索和导航。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值