离线使用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支持直接进行属性标注，让矢量瓦片发挥出更大的作用。如果您在系统建设过程当中也遇到这种问题，那么可以看看本文，或许对您有帮助。行文仓促，一定有很多不当之处，希望各位朋友批评指正。