设置地图样式

产品介绍

进入本章之前，您已经学习了如何进行图层的简单样式设置，详见添加点线面图层。您可以借助【设置地图样式】功能，通过结合一些高级的地图样式设置方法来制作来渲染制作一幅精美的地图。

设置的高级样式主要包括：

• 设置符号样式及其标注样式；
• 线的高级样式设置；
• 面的高级样式设置；
• 结合过滤条件的样式设置；
• 三维填充的样式设置；

场景描述

通过【设置地图样式】功能，您可以对加载到地图中的基础点线面数据进行符号设置与地图样式渲染，按照商场、道路、土地利用的顺序进行叠加展示，其中：

1、符号样式和标注设置：商场，0-22级别展示，商场图标展示商场位置，商场图标上方同时显示商场名称。

2、线样式设置：道路数据，0-22级别展示，道路纹理、平直线帽、虚线展示、间距、偏移、平移等样式设置。

3、条件过滤显示设置：土地利用数据，透明度50%显示，设置条件，Fclass值为公园的数据，0-22级别展示，边框颜色#088，图标小树图标填充。

4、三维填充样式设置：数据中Fclass值为房屋的数据，高度统一设置为25米，填充颜色#ff0000。

5、综合叠加展示。

如：设置的地图样式示例图下：


约束限制

该接口创建出来的是XXXXXXXX限制条件说明。

涉及API

地图的加载与显示，需要主要包括加载图片，添加图层，添加图片等操作，涉及的API如下：

• 加载图片：loadImage(url,callback)。
• 添加图层：addLayer(layer,beforeId)。
• 添加图片：addImage(id,image,options)。

商场点数据样式展示

自定义商场图标，添加到地图上，通过样式设置，改变商场点数据的样式展示

"layout": {
    "icon-image": "mall",
    "icon-size": 1,
    "text-field":"{name}",
},
"paint": {
    "text-translate":[0,-20],
    "text-color": "red",
}

道路线数据样式展示

添加道路图层到地图上，通过设置图层样式，改变道路的展示样式。

"maxzoom":22,
    "minzoom":0,

    "layout": {
        "line-join": "round",
        "line-cap": "butt"
    },
    "paint": {
        "line-color": "#999999",
        "line-width": 5,
        "line-translate":[0,-5],
        "line-offset":8,
        "line-blur":2,
        "line-dasharray":[1,1],
    }

土地利用面数据样式展示

添加土地图层到地图上，通过设置图层样式，改变土地的展示样式。

map.on("load",function () {
    map.loadImage('../../images/tree.png', function(error, image) {
        if (error) throw error;
        map.addImage('tree', image);
        map.addLayer({
            'id': 'main',
            'type': 'fill',
            'source': {
                'type': 'geojson',
                'data': '../../json/Cell_Function.geojson'
            },
            'maxzoom':22,
            'minzoom':12,
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8,
                "fill-pattern":'tree',
            },
            'filter':['==','Name','公园'], //过滤条件，只展示Name为公园的数据
        });
    });
})

三维填充样式设置

添加三维图层到地图上，通过设置图层样式，改变建筑的展示样式。

map.on("load",function () {
    map.addLayer({
        "id":'3d-building',
        "source":"composite",
        "source-layer":"china_building",
        "type":"fill-extrusion",
        "minZoom":15,
        "paint":{
            'fill-extrusion-color': '#ff0000',
            'fill-extrusion-height': 25,
            'fill-extrusion-opacity': .6,
        }
    })
})

综合叠加展示

将多个图层叠加在一起显示

map.on("load",function () {
    map.loadImage('../../images/tree.png', function(error, image) {
        if (error) throw error;
        map.addImage('tree', image);
        map.addLayer({
            'id': 'main',
            'type': 'fill',
            'source': {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [[
                            [116.31079544985226,39.894802004868836],
                            [116.31074317619613,39.89093170955451],
                            [116.31114829687385,39.89073117015903],
                            [116.31152728075847,39.890009223491006],
                            [116.31738192814828,39.889628193017074],
                            [116.31889786365184,39.89036017074085],
                            [116.31979958388808,39.892536003556955],
                            [116.31939446321036,39.892646297389575],
                            [116.31930298432957,39.893047364374524],
                            [116.31866263226914,39.89373919942088],
                            [116.31416709944949,39.89510279587037],
                            [116.31245513782278,39.89510279587037],
                            [116.31236365897706,39.89447113324519],
                            [116.3119716066958,39.89442100103676],
                            [116.31118750213346,39.89477192569879],
                        ]]
                    }
                }
            },
            'maxzoom':22,
            'minzoom':12,
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8,
                "fill-pattern":'tree',
            }
        });
        map.addLayer({
            "id":'3d-building',
            "source":"composite",
            "source-layer":"china_building",
            "type":"fill-extrusion",
            "minZoom":15,
            "paint":{
                'fill-extrusion-color': '#ff0000',
                'fill-extrusion-height': 25,
                'fill-extrusion-opacity': .6,
            }
        })
    });
})