js修改本地json文件_mapboxgl本地化实践

很多时候&＃xff0c;我们不能将我们的数据托管到mapbox的在线服务。我们希望使用mapbox studio定制完地图样式后&＃xff0c;将样式文件导出&＃xff0c;然后将数据服务改成geoserver发布的矢量瓦片服务。实现这个目标&＃xff0c;需要解决&＃xff1a;

1、图标等静态资源的本地化。

2、字体文件本地化。

2、数据服务的本地化。

一、使用geoserver发布矢量瓦片服务

上一篇文章已经介绍了如何使用geoserver发布矢量瓦片服务&＃xff08;数据源使用的是wgs84坐标&＃xff09;&＃xff0c;前端使用mapbox-gl来绘制矢量瓦片服务。在这次测试实验中&＃xff0c;我发布了包括建筑、路网、湖泊水系&＃xff0c;公交站点等七个图层&＃xff0c;并将这七个图层放在一个图层组里面。

二、使用mapbox studio定制地图样式

使用mapbox studio制作自定义地图可以到看一下这篇文章&＃xff0c;这里我不写详细制作过程来&＃xff0c;可以看看官网给出的文档。如果&＃xff0c;你不想将你的所有数据上传到mapbox地图定制的在线平台&＃xff0c;事实上mapbox会对上传数据存储空间的大小是有限制&＃xff0c;你可以上传测试数据来定制地图样式。

为了测试需要&＃xff0c;我添加了公交站点和路网的标注图层、公交站点图标图层。mapbox-gl要在前端绘制标注&＃xff0c;需要获取所需要的字体文件&＃xff1b;同样&＃xff0c;在绘制图标的使用&＃xff0c;也要从服务端获取静态的图标资源。

制作完成后如果你想发布在线的地图样式&＃xff0c;可以点击右上角发布地图样式。拷贝样式地址至mapbox-gl示例中就可以了。

下载制作的样式文件可以点击【share】-->【下载】

icons中图标&＃xff08;svg格式&＃xff09;是我在制作地图时上传的。style.json是我们的地图样式配置文件。这里需要知道的是&＃xff0c;Mapbox 样式文件定义的是地图所呈现的视觉外观&＃xff0c;包括&＃xff1a;需要绘制哪些数据、绘制的顺序、以及绘制数据时如何进行符号化。样式文档是以json对象中的属性字段进行组织的。

三、静态资源&＃xff08;图标&＃xff09;的本地化

先来看一下&＃xff0c;mapbox-gl在线示例是如何加载静态的图标资源等。打开下载的样式文件style.json可以看到静态文件在线配置到地址。

mapbox通过使用精灵图来减少网络请求次数。sprite.png记录合并后图片资源&＃xff0c;sprite.json是索引文件&＃xff0c;通过索引文件可以访问具体一个图标的位置。

可以尝试将sprite设置为相对地址&＃xff0c;如"./xxx/",我这里测试貌似不行&＃xff0c;mapbox源码中好像用正则表达式验证如果设置相对路径会出错&＃xff0c;这里把我们定制地图的sprite.png和sprie.json下载下来&＃xff0c;放在本地。将样式配置文件中的sprite设置为服务器上绝对位置&＃xff0c;就可以了。如下图配置。

sprite.json和sprite.png是从定制好的地图样式&＃xff0c;在预览时直接下载下来的。也可以通过工具根据图标集合生城&＃xff0c;这里我们有测试&＃xff0c;可以看看这里。

四、字体文件的本地化处理

前端绘制示例瓦片时&＃xff0c;如果绘制标注的话需要提供字体&＃xff0c;英文字体文件相对较小&＃xff0c;如果是中文字体的少则都十几兆。mapbox使用pbf格式分段的请求方式来请求字体文件。因此需要根据配置文件中使用到的字体来生成pbf格式字体文件。

Mapbox开源了一个工具node-fontnik&＃xff0c;可以将ttf和otf格式字体转换成Mapbox GL渲染需要的字体。可以编写字体转换代码&＃xff0c;将ttf和otf格式到字体转换为pbf格式。下图&＃xff0c;转换结果。

可以将转换后的字体文件夹拷贝到本地的工程目录中&＃xff0c;然后修改glyphs的配置地址。占位符{fontstack}是字体类型&＃xff0c;{range}是字体范围。下图&＃xff0c;字体文件本地化配置。

这里面有个问题&＃xff0c;mapbox studio在定制地图的时候&＃xff0c;设置标注字体会给出一个fallback字体&＃xff0c;当主要字体缺少字形时&＃xff0c;文本将以后备字体当样式呈现。网络请求多个字体时&＃xff0c;字体文件名用逗号隔开。但是当字体服务本地化时候&＃xff0c;样式配置文件中text-font如果设置多个字体时&＃xff0c;将无法根据地址找到字体文件。这里面猜测是否可以将字体合并&＃xff0c;然后转换成pbf格式&＃xff0c;但这样感觉不合理&＃xff0c;没测试&＃xff0c;知道当可以告知一下。我这里直接将后备字体注释掉了。

四、数据服务的本地化配置

可以看出上一篇文章。这里给出完整代码。style如果设置style.json的相对路径可能会出错&＃xff0c;因为style的类型是一个对象。这里定义了一个style变量&＃xff0c;存储我们的地图配置。完整代码看这里。