系列文章目录

开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址)

开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片

开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计

开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现

开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库

开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用

开源方案搭建可离线的精美矢量切片地图服务-8.mapbox 之sprite大图图标文件生成(附源码)

项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵)。

01:中国地图:http://test.sharegis.cn/mapbox/html/3china.html

02:德国-德累斯顿市:http://test.sharegis.cn/mapbox/html/6germany.html

1.为什么要使用.pbf格式的字体库

.pbf全称Protocal Buffers,是Google公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化,可用于数据存储、通信协议等方面。简单来说就是结构简单、速度快,我们前面讲到的矢量切片也使用了这种格式。

我们常见的字体库例如微软雅黑的.ttf字体文件大约有15M,一次请求加载15M并且还要解析,对服务端和客户端的压力都大,所以Mapbox使用了.pbf的格式进行分批请求,下面是两种格式的对比。.pbf格式大大的减少了请求压力。

2.pbf格式的字体库的生成

1.使用node-fontnik工具进行转换,具体参考https://www.jianshu.com/p/23634e54487e这篇文章。

2.使用Arcgis pro进行转换,Arcgis pro包含基于Mapbox企业级的矢量切片方案,要收费,但是有20天试用,大家可以试一下,我会在下篇进行详细分析。我自己使用的自己就是通过这种方式获取的。

3.分享一些常用.pbf字体库

我在一些Mapbox群里,大家离线部署Mapbox js遇到最主要的问题就是字体库弄不下来,这里我分享几个常用字体库。

SimSun Regular(宋体):https://pan.baidu.com/s/1lv69EP5QlaUnlKZlH4-qlA

Microsoft YaHei Regular(雅黑):https://pan.baidu.com/s/1-tJr-PpKSFRxlfhWwtc0Kw

Microsoft YaHei Bold:https://pan.baidu.com/s/1Ls1hgLIbcu5impJ086x5DQ

Arial Regular:https://pan.baidu.com/s/102-e8pYKB2CO9bvP3LvWug

4.Mapbox中调用字体

字体引用

style 中添加请求路径,fontstack就是字体文件夹的名称,range就是文件名,这些请求Mapbox会自动给我们完成。

"glyphs": "../fonts/{fontstack}/{range}.pbf",

具体给symbol添加字体的方式

{//郊区"id": "place-suburb","type": "symbol","source": "germany","source-layer": "gis_osm_places_07_1","minzoom": 10,"maxzoom": 16,"filter": ["==","fclass","suburb"],"layout": {"text-field": "{name}","text-transform": "uppercase","text-font": [//这个就是{fontstack},也就是字体文件夹的名称"Microsoft YaHei"],"text-letter-spacing": 0.15,"text-max-width": 7,"text-padding": 3,"text-size": {"base": 1,"stops": [[11,11],[15,18]]}},"paint": {"text-halo-color": "hsl(0, 0%, 100%)","text-halo-width": 1,"text-color": "hsl(230, 29%, 35%)","text-halo-blur": 0.5},"interactive": true
},

5.总结

本文主要分享了一些适用Mapbox 的.pbf字体库,下篇我们主要讲一下企业级Arcgis Pro 发布矢量切片服务的方法,他会将Mapbox所需的所有离线文件生成。可以借鉴一下企业级服务是如何构建的。

待续。。。。。。。。。。。。。。。。。。。。。

作者:ATtuing

出处:http://www.cnblogs.com/ATtuing

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

转载于:https://www.cnblogs.com/ATtuing/p/9217029.html

开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库相关推荐

  1. 开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

    系列文章目录 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 开源方案搭建可离线的精美矢 ...

  2. 开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现

    系列文章目录 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 开源方案搭建可离线的精美矢 ...

  3. 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址)

    系列文章目录 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 开源方案搭建可离线的精美矢 ...

  4. 开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用

    系列文章目录 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 开源方案搭建可离线的精美矢 ...

  5. 基于mapbox搭建可离线的矢量切片地图服务-3.Mapbox个性化地图定制入门

    作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...

  6. 【GeoServer + MapBox-GL 搭建离线矢量切片地图服务】多图详细流程 + 踩过的坑总结

    文章目录 前言 Geoserver 安装 前期工作 JDK的安装 安装 GeoServer GeoServer 的使用 进入 GeoServer 界面 使用 GeoServer 发布矢量切片离线地图 ...

  7. 基于mapbox搭建可离线的矢量切片地图服务-1.开篇(附成果演示地址)

    作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...

  8. Mapbox加载天地图CGCS2000矢量瓦片地图服务

    1.背景 最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...

  9. Cesium使用技巧 - 离线情况下使用自定义地图服务(取消对Bing地图的访问)

    Cesium使用技巧 - 离线情况下使用自定义地图服务(取消对Bing地图的访问) 本人在做项目的时候,由于项目要求限制,必须在 完全断网的情况下 使用Cesium.因此根据Cesium的API文档, ...

最新文章

  1. Python:Scrapy的安装和入门案例
  2. 嵌入式linux设计报告,嵌入式linux课程设计报告
  3. datagirdview跟据内容自动适应单元格大小
  4. HBase总结(十二)Java API 与HBase交互实例
  5. mknod创建设备(加载新的设备驱动时候,通常会用到此命令)
  6. Android 启动分析 1
  7. how is SAP UI5 applyBackendSearchPattern being called
  8. win10家庭版调出组策略_利用powershell为win10家庭版安装组策略
  9. 看懂友盟指数,洞察移动行业大趋势
  10. 推荐30款最佳的数据可视化工具
  11. 【mindspore】数据加载报错,提示The pointer[cnode] is null.
  12. 汉宁窗+matlab,m汉宁窗hanning汉明窗hamming矩形窗-read.ppt
  13. 水晶易表 Xcelsius 2008 安装指南 完美支持office2010
  14. 网络骇客入门之UDP编程
  15. 苹果手机电池保养再用两年!
  16. 初学Python三周总结感想
  17. AWD平台搭建–Cardinal
  18. EasyFlash移植
  19. 乖离率背离公式_乖离率指标——BIAS
  20. vue开发项目必备知识

热门文章

  1. php 如果则,如果python脚本在phpfi中运行,则导入python模块时会出错
  2. oracle的基本命令,Oracle基本命令
  3. Spring框架的xml出错Cannot resolve reference to bean txPointcut while setting bean property pointcut
  4. 公因式的概念_公因式概念论文,关于也淡化概念相关参考文献资料-免费论文范文...
  5. 20210310 20210311 :栈、队列、堆类题目合集
  6. 20210217:力扣第228周周赛(上)
  7. Android添加程序背景颜色,Android小程序实现切换背景颜色
  8. sot23-6 随机数生成芯片,i2c接口
  9. 马斯克宣布:特斯拉Model Y本月14日发布,预估售价折合人民币25.8万
  10. 云从科技宣布B+轮融资,多家国有基金入股,累计获资35亿元