离线使用Mapbox进行矢量瓦片属性标注报错的解决之道

目录

前言

一、问题描述

1、运行报错

2、字体显示报错

二、解决问题

1、下载字体资源

2、字体配置

3、属性标注说明

4、最终效果

总结 

---

前言

        在之前的博客中基于Mapbox的Mvt矢量瓦片集成实践，我们已经介绍了如何在Mapbox中展示Mvt的矢量瓦片。但是在之前的博文中，我们仅仅进行了矢量瓦片的展示，在实际项目开展的过程当中。我们不仅要展示空间数据，同时还要把空间要素的重要属性信息进行地图上标注，好让关注的用户可以一目了然，让地图表达得更加清晰明了。

        就像栅格瓦片一样，标注的作用也是一样的明显。因此如何Mapbox中基于矢量瓦片进行属性标注也是非常值得学习和探索的。在很多mapbox的应用中，都是在线应用，您一定也见识了很多的在校标注。笔者在学习过程中，由于网络环境的限制，不能访问在线资源，有朋友反应有一些场景，比如属性字体标注，在线环境也会存在报错的原因。

        那么本文就来介绍一下在离线或者标注是有报错的具体解决方案，通过在项目中引入字体组件，让mapbox支持直接进行属性标注，让矢量瓦片发挥出更大的作用。如果您在系统建设过程当中也遇到这种问题，那么可以看看本文，或许对您有帮助。

一、问题描述

        按照之前博文的介绍，我们决定使用mapbox进行矢量瓦片的展示，同时把矢量瓦片中的属性信息进行标注展示。按照上一篇博文的代码，我们把代码编写完毕。在mapbox中进行标注的主要属性代码如下：

map.addLayer({
			"id": "area-layer", // 唯一 id （必填）
			"type": "symbol", // 类型（必填）
			"source": "tile", // 数据源的名称（除了 layer 的 type 为 background 外，source 必填） 
			"source-layer": "university", // 数据源的图层（只有数据源 source 的 type 为 vector 时，才能设置 source-layer，其他类型的不可以设置）
			"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
			"maxzoom": 7, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
			 "layout": {
			  //"text-field": "{name}/{address}",
			  "text-field": "{name}",
			  "text-font": ["Open Sans Semibold"],
			  //"text-offset": [0,1],
			  //"symbol-placement": "line",
			  "symbol-spacing": 600,
			  "text-size": 15
			},
			"paint": {
			  "text-color": "#f7f5f5",
			  "text-halo-width": 1.5
			}
		})

1、运行报错

        在完成上述代码之后，我们在浏览器中运行源代码，我们发现矢量数据确实在界面上展示出来了。如下图所示：

         实际上，矢量瓦片是已经正常加载了，但是并没有达到我们的预期。因为在界面上并没有把属性标注展示出来。

2、字体显示报错

        为了找到问题，我们来通过浏览器提供的调试服务来进行程序的调试，按F12或者点击检查进入调试窗口，可以看到有以下的报错信息：

         详细的报错信息如下：

evented.js:150 Error: layers.area-layer.layout.text-field: use of "text-field" requires a style "glyphs" property
    at Object.ri [as emitValidationErrors] (validate_style.js:13:41)
    at Zt (style.js:57:5)
    at $t._validate (style.js:1641:16)
    at $t.addLayer (style.js:861:22)
    at Map.addLayer (map.js:2247:20)
    at Map. (mapboxlocalpng4.html:108:7)
    at Map.fire (evented.js:129:26)
    at Map._render (map.js:3006:18)
    at map.js:3316:26

 这个错误提示很明显了，因为在应用中开启了属性标注，因此用到了字体的显示配置。以下是关键的定义：

 "layout": {
	"text-field": "{name}",
	"text-font": ["Open Sans Semibold"],
	"symbol-spacing": 600,
	"text-size": 15
},

         这里用到text-field属性，但是在mapbox中的style中没有定义glyphs。需要我们在定义mapbox的地图对象时把这个字体显示的属性进行预先定义。

二、解决问题

        在明确了问题的根源之后，我们可以着手进行问题的解决。在Mapbox当中，字体的定义也是在上述这个文件当中。下面分享一种解决方案，您也可以使用访问mapbox的在线独立的字体资源。如果您是在自己的离线环境或者独立的开发环境中进行部署，那么建议采用本文推荐的方式，将字体文件下载后进行离线部署，这样就不受制于网络环境，可以独立使用。

1、下载字体资源

        这里推荐使用一个mapbox的离线包项目，官方地址是：mapbox-gl-js-offline-example，将这个项目clone到本地，在项目中就包含了需要的字体文件。

        在实际部署的时候，您可以采用nginx等静态服务器进行字体资源的部署，也可以使用apache服务器，都是没有问题的。只要保证在页面中能使用http协议访问到资源即可。 

2、字体配置

在定义mapbox的配置当中，需要初始化定义字体资源引用，关键代码如下：

style: {
			"version": 8,
			"glyphs": "http://localhost:8086/2d/mapbox-gl-js-offline-example/font/{fontstack}/{range}.pbf",
			"sources": {
				"raster-tiles": {
					"type": "raster",
					"tiles": ['http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png'],
					"tileSize": 256,
				}
			},
			"layers": [{
				"id": "tdt-img-tiles",
				"type": "raster",
				"source": "raster-tiles",
				"minzoom": 0,
				"maxzoom": 18
			}]
		},

        请注意，glyphs的属性配置一定要配置到style当中才起作用，千万不能在addLayer的时候进行配置，因为必须要在地图初始化的时候就要配置好。

3、属性标注说明

        这里对属性标注的配置进行简单说明，代码如下：

"layout": {
	"text-field": "{name}",
	"text-font": ["Open Sans Semibold"],
	"symbol-spacing": 600,
	"text-size": 15
},

序号	参数	说明
1	text-field	矢量属性字段列
2	text-font	使用的字体，对应font文件夹的子文件夹
3	symbol-spacing
4	text-size	文本大小

4、最终效果

        在进行字体资源的引入后，来看一下实际的效果，已经能看到属性的标注能正确展示。

        至此，在mapbox中进行属性标注展示时，系统报错的问题得到了解决，属性标注在界面上成功进行了展示。 

总结 

        以上就是本文的主要内容，本文就来介绍一下在离线或者标注是有报错的具体解决方案，通过在项目中引入字体组件，让mapbox支持直接进行属性标注，让矢量瓦片发挥出更大的作用。如果您在系统建设过程当中也遇到这种问题，那么可以看看本文，或许对您有帮助。行文仓促，一定有很多不当之处，希望各位朋友批评指正。