SuperMap iClient 9D for MapboxGL地图风格浅析

作者：dominating

前言

随着SuperMap iServer 9D的发布，iServer增加了许多的新功能，其中之一就是地图服务模块，矢量切片（tileFeature）资源增加了支持 mvt的表述。mvt矢量切片格式是mapbox标准的矢量切片，而我们的SuperMap iClient 9D 加入了MapboxGL框架，所以我们就可以通过SuperMap iClient 9D来对接SuperMap iServer 9D发布的矢量切片服务，制作出精美的矢量地图。

今天就简单为大家介绍下如何使用SuperMap iClient 9D for MapboxGL来修改地图风格。

定义MapboxGL的map对象

var map = new mapboxgl.Map({        container: 'map', // container id        style: {            "version": 8,            "sources": {                "vector-tiles": {                    "attribution": attribution,                    "type": "vector",                    "tiles": [host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature.mvt?returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}&expands=0:0_2,132_128,138_64,141_32,143_16,145_8,147_4"]                },            },            "sprite": "http://iclient.supermapol.com/web/styles/osm/sprite",            "glyphs": host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf",            "layers": []        },        center: [116.4, 39.9],        minZoom: 10,        zoom: 11    });

tiles，矢量切片的服务地址
sprite，用于渲染背景图案，填充图片，线条图案，点图标的图片url地址（由两个文件组成，索引文件和图片文件，可以使用iClient官网的资源，具体可以参考mapboxGL官方说明）

glyphs，字体库，字体样式资源url地址。 如果任意图层使用了text-field布局属性，此属性不能为空。（下面的symbol图层文字样式将会用到）
layers，需要绘制的图层，将按照顺序进行绘制

"layers": [  {            "id": " 四级道路L@北京",  //唯一的图层名称            "type": "line",   //图层类型            "source": "vector-tiles",            "source-layer": "四级道路L@北京",            "layout": {   //布局样式                "line-cap": "round",                "line-join": "round",                "visibility": "visible"            },            "paint": {  //绘制样式                "line-color": "hsl(224, 22%, 45%)",                "line-width": {                    "base": 1.55,                    "stops": [                        [13,1.8],                        [20,20]                    ]                },                "line-opacity": 0.9            }        }]

咱们主要围绕layers来介绍。layers属性列出了可用的所有图层，图层的类型由type属性指定，并且必须是background, fill, line, symbol, raster, circle, fill-extrusion中的一种。
除了背景类型的图层，每个图层都需要引用source。 图层将从source中获取数据，可选地过滤要素，然后定义这些要素的样式。
图层拥有两个子属性，用于确定如何渲染该图层的数据：layout和paint属性。
本篇文章主要介绍我们常用的几种图层类型

图层类型

background 背景图层

顾名思义也就是作为地图背景的图层，不需要指定source

map.addLayer({            "id": "background",            "type": "background",            "layout": {                "visibility":"visible"            },            "paint": {                "background-color": "hsl(55, 1%, 20%)"  //背景颜色            }        });

可以设置不同颜色的背景图层。注意，MapboxGL中颜色以各种允许的格式写成JSON字符串，HTML格式的十六进制，rgb，rgba，hsl和hsla，也可以使用预定义的HTML颜色名称，如”blue”,”yellow

{  "line-color": "#ff0",  "line-color": "#ffff00",  "line-color": "rgb(255, 255, 0)",  "line-color": "rgba(255, 255, 0, 1)",  "line-color": "hsl(100, 50%, 50%)",  "line-color": "hsla(100, 50%, 50%, 1)",  "line-color": "yellow"}

fill 填充图层

可以理解为面图层

        map.addLayer({  //绿地            "id": "绿地R@北京",            "type": "fill",            "source": "vector-tiles",            "source-layer": "绿地R@北京",            "paint": {                "fill-color": "hsl(100, 58%, 76%)",  //填充色                "fill-opacity": {  //填充透明度                    "base": 1,                    "stops": [  //线性变化                        [                            5,                            0                        ],                        [                            7,                            0.5                        ]                    ]                }            },        });        //湖泊、水库        map.addLayer({            "id": "湖泊、水库R@北京",            "type": "fill",            "source": "vector-tiles",            "source-layer": "湖泊、水库R@北京",            "paint": {                "fill-color": "hsl(196, 80%, 70%)"            }        });

可以对面的填充色，透明度，轮廓线颜色进行修改
fill-outline-color ，填充的轮廓颜色。默认为填充颜色

stop属性

可以注意到代码中我们使用到了一个“stop”属性，这个值被指定为一个函数，该函数是根据输入和输出值进行定义，一组输入值和输出值被称为”stop”。该函数允许你通过使用缩放地图级别来改变地图要素的外观。

"fill-color": "hsl(100, 58%, 76%)",                  "fill-opacity": {                      "base": 1,                    "stops": [                          [5,0],                        [7,0.5]                    ]                }

每个stop是由两个元素组成的数组，第一个是缩放级，第二个是函数输出值。以上例子中，当缩放级为5时，fill-opacity为0，当缩放级为7时，fill-opacity为0.5。fill-opacity的值将从第5级的0线性过渡到第七7级的0.5。”base”参数为内插曲线指数基数，将会影响到两个stop之间的线性变化。我们可以通过两张图来增加理解

当前我的缩放级为5.2，可以看出不同base值的曲线的值是不一样的。

line 线图层

map.addLayer({            "id": " 三级道路L@北京",            "type": "line",            "source": "vector-tiles",            "source-layer": "三级道路L@北京",            "paint": {                "line-width": {   //线宽                    "base": 1.5,                    "stops": [                        [11,1],                        [18,10]                    ]                },                "line-color": "hsl(0, 0%, 100%)",  //线颜色            }        });        map.addLayer({            "id": " 二级道路L@北京",            "type": "line",            "source": "vector-tiles",            "source-layer": "二级道路L@北京",            "paint": {                "line-width": 4,                "line-color": "hsl(230, 24%, 87%)",            }        });        map.addLayer({            "id": "一级道路L@北京1",            "type": "line",            "source": "vector-tiles",            "source-layer": "一级道路L@北京",            "layout":{                "line-cap":"butt",    //线段末端样式                "line-join":"miter"   //线段交汇处样式            },            "paint": {                "line-width": {                    "base": 1.5,                    "stops": [                        [11,6],                        [18,26]                    ]                },                "line-color": "hsl(230, 24%, 87%)",                "line-opacity": {   //线透明度                    "base": 1,                    "stops": [                        [10.99,0],                        [11,1]                    ]                },            }        });

以上例子的line图层，有三种不同样式的道路。我们可以对线的颜色，宽度，透明度，光晕效果进行修改，以及对线头，线交汇处等这样的细节作出调整
其他常用的线样式属性：
line-blur：线的模糊度，默认为0
line-gap-width：在一条线实际路径外画一条线壳。值表示内部间隙的宽度。

symbol 符号图层

包括文字，图标。

        //道路名称        map.addLayer({            "id": " 一级道路Name",            "type": "symbol",   //类型为symbol            "source": "vector-tiles",            "source-layer": "一级道路L@北京",            "layout": {                "text-line-height": 1.1,   //行高                "text-size": {      //字体大小                    "base": 1.5,                    "stops": [                        [13.99,12],                        [20,24                    ]                },                "text-font": [    //字体类型                    "DIN Offc Pro Italic",                    "Arial Unicode MS Regular"                ],                "symbol-placement": "line",   //符号位置，默认为point，由于是道路名称所以设置为line                "text-field": "{道路名称}",    //需要显示的字段名称                "text-letter-spacing": 0.1,   //字间距                "text-max-width": 5    //文本换行最大行宽            },            "paint": {                "text-color": "hsl(0, 0%, 0%)",   //字体颜色                "text-halo-color": "hsl(0, 0%, 100%)",  //字体光晕颜色                "text-halo-width": 1.25,  //光晕宽度                "text-opacity": {  //文字透明度                    "base": 1,                    "stops": [                        [13.99,0],                        [14,1]                    ]                },            },        });        map.addLayer({            "id": "医疗卫生@北京",            "type": "symbol",            "source": "vector-tiles",            "source-layer": "医疗卫生@北京",            "layout": {                "icon-image": "hospital-11",  //图标id                "text-offset": [0, -0.5],  //文字偏移量                "text-anchor": "bottom",  //文字锚点，支持center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right，默认center                "text-field": "{NAME}",                "text-size": 12            },            "paint": {                "text-color": "hsl(0, 0%, 78%)",                "text-halo-color": "#212121",                "text-halo-width": 1,                "text-halo-blur": 0            }        });        map.addLayer({            "id": "其它@北京2",            "type": "symbol",            "source": "vector-tiles",            "source-layer": "其它@北京",            "layout": {                "icon-image": "car-11",                "text-offset": [0, -0.5],                "text-anchor": "bottom",                "text-field": "{NAME}",                "text-size": 12            },            "filter": [   //过滤条件                "==",                "NAME",                "停车场"            ],            "paint": {                "text-color": "hsl(0, 0%, 0%)",                "text-opacity": 1,                "text-halo-color": "hsl(0, 0%, 100%)",                "text-halo-width": 1,                "text-halo-blur": 1            }        });

以上例子可以看出来，我们可以通过symbol图层对点，线的标签以及点符号进行绘制。我们几乎可以对它们进行任意的操作。以下是我们在symbol图层中需要注意的地方：
layout中的symbol-placement，默认为point，如果要显示线标注，需要修改为line，这样就沿线标注了
text-field的值为需要显示的字段名称，用{fieldname}格式填写
text-anchor ，文字的锚点，包括有center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right，默认center
text-offset，文字偏移量，正值表示右和下，负值表示左和上
icon-image，用于绘制的图片在sprite中的图像名称，所以配文字图层的时候，我们需要知道sprite中有哪些图片和对应的名称

filter过滤器

可以看出我们最后添加的图层上使用了过滤器filter，MapboxGL的过滤器可以说是非常强大的。过滤器支持以下形式的数组：
存在过滤（Existential Filters）

["has", key] feature[key] exists["!has", key] feature[key] does not exist

比较过滤器（Comparison Filters）

["==", key, value] equality: feature[key] = value["!=", key, value] inequality: feature[key] ≠ value[">", key, value] greater than: feature[key] > value[">=", key, value] greater than or equal: feature[key] ≥ value["<", key, value] less than: feature[key] < value["<=", key, value] less than or equal: feature[key] ≤ value

设置成员资格过滤器（Set Membership Filters）

["in", key, v0, ..., vn] set inclusion: feature[key] ∈ {v0, ..., vn}["!in", key, v0, ..., vn] set exclusion: feature[key] ∉ {v0, ..., vn}

组合过滤（Combining Filters）

["all", f0, ..., fn] logical AND: f0 ∧ ... ∧ fn["any", f0, ..., fn] logical OR: f0 ∨ ... ∨ fn["none", f0, ..., fn] logical NOR: ¬f0 ∧ ... ∧ ¬fn

key必须是一个字符串，用来标识要素属性或者是下面的特殊键：

• “$type”:要素类型，该key可以和”==”, “!=”, “in”,与”!in”一起使用。值可能为”Point”, “LineString”, 和”Polygon”
• “$id”:要素标识符，该key可以与”==”, “!=”, “has”, “!has”, “in”, 和”!in” 一起使用

value必须是一个字符，数字或者布尔值才能用来比较属性值,如

["==", "NAME", "停车场"]

设置成员资格过滤器可以用来测试字段是否匹配多个值。这个过滤就是要求要素的class必须是”street_major”, “street_minor”, “street_limited”中的一个。

["in", "class", "street_major", "street_minor", "street_limited"]

“all”,”any”,和”none”操作符用于创建复合过滤。值f0,…,fn必须是过滤表达式，比如以下的例子

[  "all",  ["==", "class", "street_limited"],  [">=", "admin_level", 3],  ["!in", "$type", "Polygon"]]

这个组合过滤器由三个过滤表达式组成，要求此要素必须满足这三个条件，class需要是”street_limited”，admin_level必须大于等于3，类型type不能是多边形。当然你也可以换成any，满足其中之一或者多个条件，或者使用none来取反。

结语

以上的话就是MapboxGL地图风格中常用的几种图层类型以及相关函数的简单介绍。可以看出如果要配出一幅精美的地图的话是非常需要耐心和时间的。其实我们也可以借助Mapbox的mapbox studio可视化编辑工具来制作地图。我们可以在工具中将地图的风格配置好，然后导出风格文件，做相关修改后使用在我们自己的地图中。

Mapbox studio地址：https://www.mapbox.com/mapbox-studio/

更多详细请参考：https://www.mapbox.com/mapbox-gl-js/style-spec