概述

mapboxGL升级到2的版本之后，用官方的引用token是必须要有的，为了能够离线使用，我们需要对源码做一定的修改后编译，本文讲述如何进行mapboxGL的离线应用。

效果

实现

clone代码

git clone https://gitee.com/lzugis15/mapbox-gl-js.git

安装依赖

npm install
-- 建议用cnpm，安装速度会快点
cnpm i

修改源码
token强制认证是在文件src/ui/map.js中，注释掉2871行的代码this._authenticate()即可。
编译

- 编译js
npm run build-dev- 编译css
npm run build-css

引用测试
编译完的文件位于dist目录下面，mapbox-gl-dev.js和mapbox-gl.css，在当前目录下新建html文件进行测试，html文件内容如下：

<!DOCTYPE html>
<html>
<head><title>Mapbox GL JS debug page</title><meta charset='utf-8'><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><link rel='stylesheet' href='../dist/mapbox-gl.css' /><style>body { margin: 0; padding: 0; }html, body, #map { height: 100%; }</style>
</head><body>
<div id='map'></div><script src='../dist/mapbox-gl-dev.js'></script>
<script src='../dist/turf.min.js'></script>
<script>const MAPTYPE = {NAVIMG: 'nav_img',NAVLBL: 'nav_lbl',NAVVEC: 'nav_vec'}function getNavTileUrls(lyr) {let res = [];const dict = {'nav_img': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}','nav_lbl': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}','nav_vec': 'http://webrd0${subdomain}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'}for(let i = 1; i < 5; i++) {let url = dict[lyr];url = url.split('${subdomain}').join(i);res.push(url)}return res;}const mapStyle = {"version": 8,"name": "Dark","sources": {"osm": {"type": "raster","tiles": ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],"tileSize": 256},"gaode-img": {"type": "raster","tiles": getNavTileUrls(MAPTYPE.NAVIMG),"tileSize": 256},"gaode-lbl": {"type": "raster","tiles": getNavTileUrls(MAPTYPE.NAVLBL),"tileSize": 256},"gaode-vec": {"type": "raster","tiles": getNavTileUrls(MAPTYPE.NAVVEC),"tileSize": 256}},"layers": [{"id": "img","type": "raster","source": "gaode-vec","minzoom": 1,"maxzoom": 18}]};var map = window.map = new mapboxgl.Map({container: 'map',zoom: 3.4,center: [104.61023753726323, 35.63101027697721],style: mapStyle,hash: false,maxZoom: 17.2});map.addControl(new mapboxgl.NavigationControl())
</script>
</body>
</html>

mapboxGL2离线化应用相关推荐

mapboxGL2中Terrain的离线化应用
概述 mapboxGL2中比较大的一个更新就是加入了Terrain,可以实现三维的立体效果,本文书接上文"mapboxGL2离线化应用",说说Terrain的离线化应用. 效果实 ...
LsLoader——通用移动端Web App离线化方案
由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡.从简单的全局变量分配,到RequireJS实现的AMD模块方式,browserify/webpack实现的 ...
【map】百度地图离线化V1.3
百度地图离线化(API v=1.3) 毕设(北斗导航项目)进行了一段时间,近日在实验室给老师汇报进展时,由于网络不畅,加载百度在线地图及其各种操作时,时间过长,于是想将百度地图离线化.查阅网上很多资料 ...
百度地图离线化（API v=1.3）
毕设进行了一段时间,近日在实验室给老师汇报进展时,由于网络不畅,加载百度在线地图及其各种操作时,时间过长,于是想将百度地图离线化.查阅网上很多资料,有的是广告(卖GIS应用的),有的版本太久..... ...
讯飞输入法新升级：支持离线输入方式加强用户数据安全
近日,讯飞输入法新版在全网上线,推出了一套离线输入方式,包括完全离线的拼音.语音以及手写输入,无疑能够更好地保护好用户数据安全. 据了解,<信息安全技术移动互联网应用(App)收集个人信息基本规 ...
Kiwix：离线的维基百科
Kiwix让您能够随身携带完整的维基百科!无论您搭乘船只,还是身处偏僻的地区,抑或身陷囹圄,Kiwix都使您能够接触到全人类的知识.您不需要连接因特网,因为所有的资料都储存在您的电脑,优盘或者DVD中 ...
关于“机器人离线编程”国内外近三年的研究
国外离线编程的研究现状机器人离线编程在国外的研究起步较早,从上世纪80年代开始,美国.日本以及一些欧洲国家的研究所.大学以及一些公司在机器人的离线编程领域做了大量的研究工作,并在这个研究领域取得了一 ...
美团大众点评 Hybrid 化建设
上周末,精神哥去参加了好友小青在北京办的T沙龙,探讨移动端热更新相关的话题.Bugly曾为大家介绍过不少腾讯内部的热更新的框架,正好这次看到了美团,去哪儿以及微博同学在应用热更新方面的实践,整理出来发 ...
QT百度离线地图（一）
离线地图的实现方式基本就瓦片图了,找了很多瓦片图下载的工具,要么有水印要么就收费... 最后找到了太乐地图5.0.5的一个破解版可以用,具体怎么破解压缩包里边都有了,使用时先拔掉网线(不然会自动更新, ...

mapboxGL2离线化应用

概述

效果

实现

mapboxGL2离线化应用相关推荐

最新文章

热门文章