离线使用Mapbox进行矢量瓦片属性标注报错的解决之道
目录
前言
在之前的博客中，我们已经介绍了如何在Mapbox中展示Mvt的矢量瓦片。但是在之前的博文中，我们仅仅进行了矢量瓦片的展示，在实际项目开展的过程当中。我们不仅要展示空间数据，同时还要把空间要素的重要属性信息进行地图上标注，好让关注的用户可以一目了然，让地图表达得更加清晰明了。
就像栅格瓦片一样，标注的作用也是一样的明显。因此如何Mapbox中基于矢量瓦片进行属性标注也是非常值得学习和探索的。在很多mapbox的应用中，都是在线应用，您一定也见识了很多的在校标注。笔者在学习过程中，由于网络环境的限制，不能访问在线资源，有朋友反应有一些场景，比如属性字体标注，在线环境也会存在报错的原因。
那么本文就来介绍一下在离线或者标注是有报错的具体解决方案，通过在项目中引入字体组件，让mapbox支持直接进行属性标注，让矢量瓦片发挥出更大的作用。如果您在系统建设过程当中也遇到这种问题，那么可以看看本文，或许对您有帮助。
一、问题描述
按照之前博文的介绍，我们决定使用mapbox进行矢量瓦片的展示，同时把矢量瓦片中的属性信息进行标注展示。按照上一篇博文的代码，我们把代码编写完毕。在mapbox中进行标注的主要属性代码如下：
1、运行报错
在完成上述代码之后，我们在浏览器中运行源代码，我们发现矢量数据确实在界面上展示出来了。如下图所示：
实际上，矢量瓦片是已经正常加载了，但是并没有达到我们的预期。因为在界面上并没有把属性标注展示出来。
2、字体显示报错
为了找到问题，我们来通过浏览器提供的调试服务来进行程序的调试，按F12或者点击检查进入调试窗口，可以看到有以下的报错信息：
详细的报错信息如下：
这个错误提示很明显了，因为在应用中开启了属性标注，因此用到了字体的显示配置。以下是关键的定义：
这里用到text-field属性，但是在mapbox中的style中没有定义glyphs。需要我们在定义mapbox的地图对象时把这个字体显示的属性进行预先定义。
二、解决问题
在明确了问题的根源之后，我们可以着手进行问题的解决。在Mapbox当中，字体的定义也是在上述这个文件当中。下面分享一种解决方案，您也可以使用访问mapbox的在线独立的字体资源。如果您是在自己的离线环境或者独立的开发环境中进行部署，那么建议采用本文推荐的方式，将字体文件下载后进行离线部署，这样就不受制于网络环境，可以独立使用。
1、下载字体资源
这里推荐使用一个mapbox的离线包项目，官方地址是：，将这个项目clone到本地，在项目中就包含了需要的字体文件。
在实际部署的时候，您可以采用nginx等静态服务器进行字体资源的部署，也可以使用apache服务器，都是没有问题的。只要保证在页面中能使用http协议访问到资源即可。
2、字体配置
在定义mapbox的配置当中，需要初始化定义字体资源引用，关键代码如下：
请注意，glyphs的属性配置一定要置到style当中才起作用，千万不能在addLayer的时候进行配置，因为必须要在地图初始化的时候就要配置好。
3、属性标注说明
这里对属性标注的配置进行简单说明，代码如下：
| 序号 | 参数 | 说明 |
| 1 | text-field | 矢量属性字段列 |
| 2 | text-font | 使用的字体，对应font文件夹的子文件夹 |
| 3 | symbol-spacing | |
| 4 | text-size | 文本大小 |
4、最终效果
在进行字体资源的引入后，来看一下实际的效果，已经能看到属性的标注能正确展示。
至此，在mapbox中进行属性标注展示时，系统报错的问题得到了解决，属性标注在界面上成功进行了展示。
总结
以上就是本文的主要内容，本文就来介绍一下在离线或者标注是有报错的具体解决方案，通过在项目中引入字体组件，让mapbox支持直接进行属性标注，让矢量瓦片发挥出更大的作用。如果您在系统建设过程当中也遇到这种问题，那么可以看看本文，或许对您有帮助。行文仓促，一定有很多不当之处，希望各位朋友批评指正。
- 点赞
- 收藏
- 关注作者
评论（0）