MapBoxGL 本地离线部署

最新推荐文章于 2024-09-24 12:04:48 发布

一碗老面i

最新推荐文章于 2024-09-24 12:04:48 发布

阅读量4.3k

点赞数

分类专栏： MapBox GL 文章标签： web gis webgl

本文链接：https://blog.csdn.net/qq_29808089/article/details/109737002

版权

MapBox GL 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

首先大概官网示例中心，拷贝一份可在线查看的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 id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-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关闭提升性能
      });