V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
hoythan
V2EX  ›  JavaScript

前端有没有离线的地图服务?

  •  
  •   hoythan · 2020-11-03 17:57:00 +08:00 · 3939 次点击
    这是一个创建于 1480 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目需要在内网运行,但是高德百度等均无法通过 jsapi 接口实现离线地图。大家有什么好的方法吗?

    8 条回复    2020-12-19 13:02:18 +08:00
    BL1tCL9N5bspXB39
        1
    BL1tCL9N5bspXB39  
       2020-11-03 18:21:05 +08:00
    离线地图主要解决的是瓦片存储问题,而不是 js-api
    jinliming2
        2
    jinliming2  
       2020-11-03 21:04:20 +08:00   ❤️ 2
    OpenStreetMap ( OSM )自己下载全球(或是指定区域)地图数据,根据自己的需要渲染地图,自己假设地图瓦片服务器。
    配合 Leaflet 地图库,几乎可以涵盖高德百度地图的所有功能。

    这一套完全可以离线部署。

    另外关于 OSM 自己下载数据渲染这一步,如果觉得麻烦的话,可以写个爬虫,直接去爬 geoq 或是 wikimedia 的瓦片图,下载下来自己搭个静态文件服务就行了。
    bazingaterry
        3
    bazingaterry  
       2020-11-03 22:53:17 +08:00   ❤️ 1
    phobal
        4
    phobal  
       2020-11-04 08:57:23 +08:00 via iPhone   ❤️ 1
    楼上说的自己搭建瓦片服务是可行的,但成本会非常高,需要懂 GIS 的才玩得转。

    其实有个简单的方法,可以跟领导沟通下,让运维人员将高德或者百度地图 api 的域名加入到白名单中,这样是最简单的。
    huifer
        5
    huifer  
       2020-11-04 08:58:06 +08:00   ❤️ 1
    可以尝试自行搭建 wms 服务或者其他类似 wms 服务 (WMS-C\TMS\WMTS\WFS\WCS.列举可能不够详细) , 数据来源可以自行搜索. 自荐一下工具: https://github.com/huifer/tianditu-python 用来下载天地图的切片和 poi 数据. openlayers 自定义瓦片加载示例文章: https://blog.csdn.net/staHuri/article/details/88846239
    bojue
        6
    bojue  
       2020-11-04 09:40:35 +08:00   ❤️ 1
    资源:自己写一个地图下载器下载瓦片图 /或者找一个
    前端:通过 leafletjs 提供展示
    服务端:可以使用 node 写一个资源服务器或者使用 Geoserver 做地图服务
    ilingfeng
        7
    ilingfeng  
       2020-11-04 10:11:56 +08:00   ❤️ 1
    瓦片图估计会很大,我前两天也搭了个,百度的,只是简单的拼拼凑凑会用,因为项目只是为了验收,我也只下了一个县市的 17 级瓦片,有将近 80M 的大小
    rocwang
        8
    rocwang  
       2020-12-19 13:02:18 +08:00 via iPhone   ❤️ 2
    我正好做过一个业余个人项目,实现了浏览器端离线地图(缓存后)。

    Demo: https://bus.kiwiberry.nz/favourites?isCollapsed=yes
    代码: https://github.com/rocwang/bus

    大致方案:

    1. 去 https://openmaptiles.org/ 下载矢量地图包( sqlite db )。
    2. 用 https://github.com/ibesora/vt-optimizer 去除不需要的图层以减小地图包体积。
    3. 把地图用到的字体文件也写入地图包。
    3. 用 brotli 压缩整个地图包,进一步减小其体积。
    4. 把制作好的地图包另解压一份,以零散的字体文件和瓦片文件存储,以供浏览器无缓存第一次访问时使用。
    5. 在前端实现 service worker,在 cache storage 中缓存压缩好的地图包。
    6. 后续所有地图瓦片,字体的请求,均由 service worker 本地处理——使用 https://github.com/kripken/sql.js/ 在浏览器中直接查询基于 sqlite 的地图包,生成响应后直接返回给前端,从而实现离线地图。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2955 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 00:10 · PVG 08:10 · LAX 16:10 · JFK 19:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.