mapbox gl本地化部署实践

最新推荐文章于 2024-04-03 09:52:42 发布

limengpiao

最新推荐文章于 2024-04-03 09:52:42 发布

阅读量3k

点赞数 2

分类专栏：前端技术 mapbox gl 文章标签： javascript gis map

本文链接：https://blog.csdn.net/limengpiao/article/details/121487264

版权

前端技术同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

mapbox gl

1 篇文章 0 订阅

订阅专栏

最近由于项目要求，需将mapbox gl部署在内网服务器中，经过分析后发现，需要本地化配置的主要包括

mapbox gl的js库、css库及其他依赖库（如turf等）
mapbox gl调用的地图服务
mapbox gl字体库
mapbox gl图标库1.地图下载：

1.JS库资源下载

首先，mapbox gl的js库和css库等资源可以下载到本地文件夹中，此步比较简单，在此就不再赘述。另外如果是采用vue、react等前端框架，安装mapbox相关依赖即可。

2.离线地图下载：

mapbox gl调用的地图服务可以通过多种方式进行配置，比如geoserver或者nginx代理的方式，本文主要讲后者。

地图下载的方式有很多种，比全能地图下载器、水经注、太乐地图下载器等等，本文采用比较简单的方式（无需授权，免费），通过qgis下载天地图（qgis所用版本3.20）。

打开qgis，下载插件QMetaTiles，然后在qgis左侧添加天地图在线地图，以影像地图为例，在XYZ Tile中右键新建连接，输入天地图的底图地址和标注地址：

URL:（key需要自己申请，免费）：http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你申请的key

影像底图注记url：https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你申请的key

然后将影像地图和标注添加到地图中，如下图显示，添加到地图后，往往会由于网络问题存在不可见的情况，此时需耐心等待一会，可通过鼠标滚轮适当滚动来查看影像地图，滚动太快可能影像会不能及时加载出来。

影像地图下载，点击QMetaTils，打开地图下载页面，配置相关参数，然后就可以将地图下载到本地了，注意下载的地图是金字塔结构，除非项目需要，不易过大。地图下载后可通过nginx进行代理转发。

3.字体库和图标库下载

mapbox gl的sprite库和glyphs库可通过以下链接获取，然后通过nginx进行代理转发

glyphs和sprite.zip-互联网文档类资源-CSDN下载mapboxgl字体库和图标库，可以通过nginx代理后进行本地化使用！更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/limengpiao/47269722

4.示例

由于mapbox gl所依赖的所有在线资源均已本地化处理，所以token就不再需要。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Extrude polygons for 3D indoor mapping</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="./js/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/mapbox-gl.css"/>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new mapboxgl.Map({
	  version: 8,
      container: 'map',
	  style:{
		version: 8,
		// {fontstack}请求字形时，此标记将替换text-font为符号图层属性中指定的字体堆栈中以逗号分隔的字体列表
		// {range}请求字形时，此标记将替换为256个Unicode代码点
		// 例如，要为Unicode Basic Latin和Basic Latin-1 Supplement块加载字形，范围将为0-255,根据需要显示的文本，在运行时确定加载的实际范围
		glyphs: 'http://localhost:8088/mapbox/{fontstack}/{range}.pbf',
		sprite: 'http://localhost:8088/mapbox/sprite/sprite',
		visibility: 'public',
		sources: {
		  'tdt-tiles': {
			'id': 'tdt_image_tile',
			'type': 'raster',
			'tiles': [
			'http://localhost:8088/tiles/{z}/{x}/{y}.png'
			],
			'tileSize': 256
		  },
		},
	    layers: [{
          id: 'layer-tiles',
          type: 'raster',
          source: 'tdt-tiles'
		}]
	  },
      center: [114.747, 30.46325],
      zoom: 8,
      antialias: true,
	  minzoom: 8,
	  maxzoom: 19
    });
  </script>
</body>
</html>

注意：在mapbox gl中使用字体时，要根据本地已有的字体库来设置，如下所示：

'layout': {
        'text-field': '{name}',
        'text-size': 14,
        'text-offset': [0, 2],
        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
      }

limengpiao

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
mapbox gl本地化部署实践

最近由于项目要求，需将mapbox gl部署在内网服务器中，经过分析后发现，需要本地化配置的主要包括mapbox gl的js库、css库及其他依赖库（如turf等） mapbox gl调用的地图服务 mapbox gl字体库 mapbox gl图标库1.地图下载：1.JS库资源下载首先，mapbox gl的js库和css库等资源可以下载到本地文件夹中，此步比较简单，在此就不再赘述。另外如果是采用vue、react等前端框架，安装mapbox相关依赖...
复制链接

扫一扫