MapBoxGL 本地离线部署

首先大概官网示例中心，拷贝一份可在线查看的demo代码

例子代码：https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpbGVpIiwiYSI6ImNrZ3p4MW9pNTE4M3cycXF4ZGR1Y253dWIifQ.BtfimlHqb0dnz4KUfuyY2w';var map = new mapboxgl.Map({container: 'map', // container idstyle: 'mapbox://styles/mapbox/streets-v11', // style URLcenter: [-74.5, 40], // starting position [lng, lat]zoom: 9 // starting zoom});
</script></body>
</html>

运行起来后找到style的png图片，下载本地

从网上找mapboxGL字体包下载离线本地

链接：https://pan.baidu.com/s/1eiQ9pwno7yGmrv538zP3sQ
提取码：hso1

然后本地部署离线加载代码示例：

注意项（坑）：sprite,glyphs路径不支持绝对路径，需要加载网络路径！！！

this.map = new mapboxgl.Map({container: domId,style: {"version": 8,"sprite": localhost + "/css/sprite","glyphs": localhost + "/css/font/{fontstack}/{range}.pbf","sources": {},"layers": [],},center: window.g.center,zoom: window.g.zoom,pitch: 0,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北antialias: true, //抗锯齿，通过false关闭提升性能});

MapBoxGL 本地离线部署相关推荐

linux 离线地图开发包,Mapbox本地离线部署
一离线部署说明从官网抄一个HelloWorld的例子,完整代码如下: Display a map body { margin:0; padding:0; } #map { position:abs ...
Kubeadm HA 1.9 高可用集群本地离线部署
Kubeadm HA 1.9 高可用集群本地离线部署 k8s介绍 k8s 发展速度很快,目前很多大的公司容器集群都基于该项目,如京东,腾讯,滴滴,瓜子二手车,北森等等. kubernetes1.9 ...
k8s（一）、 1.9.0高可用集群本地离线部署记录
一.部署说明 1.节点 master1: IP:192.168.0.170/24 hostname:171 master2: IP:192.168.0.171/24 hostname:172 VIP: ...
[K8s 1.9实践]Kubeadm 1.9 HA 高可用集群本地离线镜像部署
Kubeadm HA 1.9 高可用集群本地离线部署 k8s介绍 k8s 发展速度很快,目前很多大的公司容器集群都基于该项目,如京东,腾讯,滴滴,瓜子二手车,易宝支付,北森等等. kubernet ...
Python 进阶 — 创建本地 PyPI 仓库与 Python 程序的离线部署
目录文章目录目录创建本地 PyPI 仓库安装 pypiserver 上传 Python 安装包使用私有 PyPI 仓库 Python 程序的离线部署 pip download 获取必须的 P ...
Kubeadm 1.9 HA 高可用集群本地离线镜像部署【已验证】
k8s介绍 k8s 发展速度很快,目前很多大的公司容器集群都基于该项目,如京东,腾讯,滴滴,瓜子二手车,易宝支付,北森等等. kubernetes1.9版本发布2017年12月15日,每三个月一个迭代 ...
Node服务一键离线部署
背景说明项目测试通过,到了上线部署阶段.部署的机器安全限制比较严格,不允许访问外网.此外,没有对外网开放ssh服务,无法通过ssh远程操作. 针对上面提到的两条限制条件,通过下面方式解决: 无法访问 ...
centos离线部署gitlab
centos离线部署gitlab 有的时候因为工作环境需要,不能够连接互联网.而我们工作时又需要使用git进行合作开发,这时就需要在内网部署一个git服务端. 1.下载依赖软件包 yum instal ...
CentOS系统自动下载RPM包及其所有依赖的包（离线部署）
前几天我尝试去创建一个仅包含我们经常在 CentOS 7 下使用的软件的本地仓库.当然,我们可以使用 curl 或者 wget 下载任何软件包,然而这些命令并不能下载要求的依赖软件包.你必须去花一些时 ...

MapBoxGL 本地离线部署

MapBoxGL 本地离线部署相关推荐

最新文章

热门文章