添加点线面图层

产品介绍

您可以借助【添加点线面图层】功能，您将会在已加载地图上进行点线面数据的添加与移除，并进行图层的简单样式设置。

• 点线面的添加与移除；
• 点的简单样式设置，包括：半径、颜色、不透明度、边线颜色等；
• 线的简单样式设置，包括：颜色、线宽、不透明度等；
• 面的简单样式设置。包括：颜色、纹理、边线颜色、不透明度等；

场景描述

通过【添加点线面图层】功能，您可以进行Geojson格式的数据加载，在地图中分别添加点、线、面的Geojson格式的数据，进行图层的简单样式的设置与图层移除。

如：

1、商场，12-22级别展示，商场图标展示商场位置，商场图标上方同时显示商场名称。

2、道路数据，0-22级别展示，线宽10px颜色#999999

3、公园用地面数据，10-22级别展示，颜色#088展示；

4、添加学校点数据，移除该数据。

约束限制

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

涉及API

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

• 加载图片：loadImage(url,callback)。
• 添加图层：addLayer(layer,beforeId)。
• 获取图层：getLayer(id)。
• 移除图层：removeLayer(id)。

添加点图层

添加点图层

加载自定义图标，通过配置点图层的样式属性，显示自定义点图标图层，

map.on("load",function () {
    map.loadImage('../../images/mall.png', function(error, image) { //加载自定义图片
        if (error) throw error;
        map.addImage('mall', image);  //将图片加载到地图中
        map.addLayer({      //添加点图层
            "id": "points",  //图层ID
            "type": "symbol",  //图层类型
            "source": {      //数据源
                "type": "geojson",  //数据源类型
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [116.37294243562775,39.90924601715042]
                        }
                    }]
                },
            },
            "maxzoom":22,   //最大缩放等级显示
            "minzoom":12,   //最小缩放等级显示
            "layout": {     //布局样式
                "icon-image": "mall",  //图标图片
                "icon-size": 1, //图标大小
            }
        });
    });
})

添加线图层

通过添加图层addLayer方法，将线图层添加到地图中

map.on('load', function () {
    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [

                        [ 116.35666527738937,39.90701755657048],
                        [ 116.4358922421016,39.90877400635193]

                    ]
                }
            }
        },
        "layout": {   //布局样式
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {    //绘制样式
            "line-color": "#999999",
            "line-width": 10
        }
    });
});

添加面图层

通过添加图层addLayer方法，将面图层添加到地图中

map.on("load",function () {
    map.addLayer({
        'id': 'maine',
        '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':12,
        'minzoom':22,
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
        }
    });
})

移除点线面图层

通过map对象的removeLayer方法，传入图层的ID，进行指定图层的删除

function removeLayer() {
    if(map.getLayer("circle")){
        map.removeLayer("circle")
    }
}