开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计
系列文章目录
开源方案搭建可离线的精美矢量切片地图服务-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.Mapbox设计思想
下面我们以一条路的设计为基础进行分析。本身这只是线的矢量数据，我们要对它进行丰富的渲染，大体上分为四个部分：
1.橙色的为是路的主体。对应type=line，是对线的渲染。代码如下
{
//高速公里
"id": "bridge-motorway",
"type": "line",
"source": "germany",
"source-layer": "gis_osm_roads_07_1",
"filter": [
"==",
"fclass",
"motorway"
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-width": {
"base": 1.5,
"stops": [
[
5,
0.75
],
[
18,
32
]
]
},
"line-color": "hsl(26, 100%, 68%)"
},
"interactive": true
},
2.为了美观路两边加白色渲染线：对应type=line，是线渲染
{
"id": "bridge-motorway-case",
"type": "line",
"source": "germany",
"source-layer": "gis_osm_roads_07_1",
"filter": [
"==",
"fclass",
"motorway"
],
"layout": {
"line-join": "round"
},
"paint": {
"line-width": {
"base": 1.5,
"stops": [
[
10,
1
],
[
16,
2
]
]
},
"line-color": "hsl(0, 0%, 100%)",
"line-gap-width": {
"base": 1.5,
"stops": [
[
5,
0.75
],
[
18,
32
]
]
}
},
"interactive": true
},
3.公路编号图标，图标是一张图片外加属性数据。对应type=symbol，是符号渲染
{
"id": "road-shields-white",
"type": "symbol",
"source": "germany",
"source-layer": "gis_osm_roads_07_1",
"minzoom": 14,
"filter": [
"==",
"fclass",
"motorway"
],
"layout": {
"text-size": 9,
"icon-image": "de-motorway-2",
"icon-rotation-alignment": "viewport",
"text-max-angle": 38,
"symbol-spacing": {
"base": 1,
"stops": [
[
11,
150
],
[
14,
200
]
]
},
"text-font": [
"Microsoft YaHei",
],
"symbol-placement": {
"base": 1,
"stops": [
[
10,
"point"
],
[
11,
"line"
]
]
},
"text-padding": 2,
"text-rotation-alignment": "viewport",
"text-field": "{ref}",
"text-letter-spacing": 0.05,
"icon-padding": 2
},
4.单行道路标，对应type=symbol，是符号渲染
{
"id": "road-oneway-arrows-white",
"type": "symbol",
"source": "germany",
"source-layer": "gis_osm_roads_07_1",
"minzoom": 16,
"filter": [
"==",
"fclass",
"motorway"
],
"layout": {
"symbol-placement": "line",
"icon-image": {
"base": 1,
"stops": [
[
16,
"oneway-white-small"
],
[
17,
"oneway-white-large"
]
]
},
"icon-padding": 2,
"symbol-spacing": 200
},
"paint": {},
"interactive": true
}
从上面的分析可以看出mapbox的对单个图层渲染可以写各种样式，可以对每个细节做不同的渲染，对线就可以做多次渲染，符号也可以多次，极大提高了渲染的灵活性。可将每个渲染细节划分出来，某些共用的渲染方式还可以复用。告别了传统一图层一渲染的模式，这就是个性化定制地图的基础，其他渲染内容请查看Api；
2.Mapbox样式在线编辑
这里我们讲一下Mapbox官方提供的在线样式编辑器的使用。
首先注册一个Mapbox账户；登陆后转到样式编辑器，创建一个自己的样式，这里建议从官方的样式库中选取一个模板。我这里选择了一个基础模板，
进入编辑页面后，就可以看到他的基础样式地图了，点击你感兴趣的渲染区域，便会弹出点击范围内的所有渲染样式对象。
我们打开路的渲染，修改路图层中的小路的颜色为红色，结果如下
编辑器类似于Photoshop的编辑面板，还有一些例如图层选择等功能，自己多摸索一下，这里就不展开了，下面讲一下样式文件的导出：
返回主页面，点击刚才编辑的样式项目，选择导出功能，便可以将我们修改好的样式文件导出，也可以导出一些mapbox的常用模板，对自己感兴趣的官方样式代码实现做分析，完善自己的样式实现。
3.Mapbox样式中几个特别关注的四个方法
1.缩放显示
对于某个图层我们只想他在8-12级的地图级别进行显示，这是提供了minzoom，maxzoom的属性来设定缩放级别，它支持小数，例如minzoom:8.55;
2.属性过滤
我们有时候图层展示的时候要进行属性的过滤，例如一个图层pio点图层有饭店、学校、咖啡厅等点数据我们进行定制个性化展示，这时图层数据进行过滤来对不同类别进行单独的渲染。我们可以使用Filter 进行过滤，filter提供了好多种过滤条件具体可查看api。
3.分级
前面1中是控制不同级别图层的显示与否，这边的分级是指不同级别范围图层渲染方式，例如8-10级是路是细路，10-15级路变成粗的路，随着级别变化作调整，使得整地图缩放起来更加自然。对应的api为stops，下面会给出例子。
4.属性输出
我们对一些要展示标注内容的属性要进行输出，我们使用{}进行输出，例如要输出name属性的内容可以{name}便可以输出。
最后给出一个有这四个特性的一个样式例子。
{
//村庄
"id": "place-village",
"type": "symbol",
"source": "germany",
"source-layer": "gis_osm_places_07_1",
//8级开始显现
"minzoom": 8,
//超过15级隐藏
"maxzoom": 17,
//过滤出所有fclass=village的点
"filter": [
"==",
"fclass",
"village"
],
"layout": {
//使用{}输出属性数据
"text-field": "{name}",
"text-font": [
"Microsoft YaHei",
],
"text-max-width": 7,
"text-size": {
"base": 1,
//字体默认大小为1，10-16级字体为大小为 11.5
//大于16级字体大小为18
"stops": [
[
10,
11.5
],
[
16,
18
]
]
}
},
"paint": {
"text-halo-color": "hsl(0, 0%, 100%)",
"text-halo-width": 1.25,
"text-color": "hsl(0, 0%, 0%)"
},
"interactive": true
},
4.总结
这一篇主要讲了一下Mapbox的样式的设计原理，以及Mapbox在线样式编辑器的使用，最后分享了一下我在使用Mapbox中认为比较重要的方法，下篇主要讲一下我的离线部署项目的具体实现。
待续。。。。。。。。。。。。。。。。。。。。。
作者：ATtuing
出处：http://www.cnblogs.com/ATtuing
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计的更多相关文章
- 开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门
1.简介 mapbox是一家非常牛的公司,比如像特斯拉.DJI大疆创新.孤独星球.Airbnb.GitHub.Cisco.Snap.飞猪.Keep.Bosch这些在国内外各自领域中响当当的企业都是它的 ...
- 开源方案搭建可离线的精美矢量切片地图服务-8.mapbox 之sprite大图图标文件生成（附源码）
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
- 开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
- 开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
- 开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用
1.前言 上篇讲.pbf字体库的时候说到我们使用的字体通过Arcgis Pro 生成,Arcgis Pro样式基于Mapbox做的矢量切片地图渲染.这篇主要讲一下Arcgis Pro矢量切片生成的的具 ...
- 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
- 矢量切片应用中geoserver与geowebcache分布式部署方案
在进行GIS项目开发中,常使用Geoserver作为开源的地图服务器,Geoserver是一个JavaEE项目,常通过Tomcat进行部署.而GeoWebCache是一个采用Java实现用于缓存WMS ...
- 使用tippecanoe把GeoJSON制作成供mapbox展示的矢量切片vectortile
本文记录一下把geojson格式的数据制作成本地的矢量切片,并在mapbox中展示的过程. 1.切片 1.1 矢量数据需要先转换为geojson,如果是shp格式可以使用QGIS或者下载shp2gwo ...
- 【转】10.4新特性-ArcGIS 10.4矢量切片介绍
原文地址:http://zhihu.esrichina.com.cn/article/567 1.矢量切片简介GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像.但是切图 ...
随机推荐
- 使用nexus来搭建Nuget私服
近期在搭建nuget私服.选择nexus这个产品.nexus支持npm,.nuget等,功能比较强大. 前言 博主使用centos7.5来搭建nexus,遇到了不少的问题.最后还是搞定了. 1:下载n ...
- RDLC报表学习
RDLC报表由以下三部分构成: 1.制作自己的DateSet集合(就是报表的数据集): 2.制作自己的报表文件.rdlc文件,用于画做报表样式,里面有微软自带的导出和打印功能,其实就为了少做这2个功能 ...
- day 104 luffy项目第二天
一.前端配置 二.后端配置 一.前端配置 app.vue 二 . 后端配置 model模型配置 迁移数据 序列化 views.py文件配置 url路由 配置中间件解决跨域问题 重新设计下 model模 ...
- Day 46 视图、存储过程、触发器、函数、事物、锁
一 .存储过程 create view stu_view as select * from ren 视图:是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据 视图有如下 ...
- java中线程池的几种实现方式
1.线程池简介: 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力. 假设一个服务器完成一项任务所需时间为:T1 创建 ...
- Swinject 源码框架(二）：循环依赖的解决
可能存在循环依赖,比如 Parent 强制有 Child, Child 弱持有 Parent. 具体实现如下.Parent 初始化时,必须传入 Child,而 Child 初始化不必传入 Parent ...
- Xcode10 libstdc++.6.0.9.tbd移除引起的错误
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/u ...
- js之作用域
1.什么是作用域 作用域是用于收集存储维护变量,以及当前执行代码声明的变量所拥有的权限, 例如 : function foo(a){ console.log(a); -------- 1 ...
- 【bzoj3684】 大朋友和多叉树 生成函数+多项式快速幂+拉格朗日反演
这题一看就觉得是生成函数的题... 我们不妨去推下此题的生成函数,设生成函数为$F(x)$,则$[x^s]F(x)$即为答案. 根据题意,我们得到 $F(x)=x+\sum_{i∈D} F^i(x)$ ...
- 【learning】 单调队列与单调栈用法详解
1.单调栈 单调栈是指一个栈内部的元素具有严格单调性的一种数据结构,分为单调递增栈和单调递减栈. 其具有以下两个性质: 1,满足栈底到栈顶的元素具有严格单调性. 2,满足栈的先进后出特性,越靠近栈顶的 ...