简述
上一节简单讲了初始化地图，接下来讲一下加载图层的两种方式。
代码逻辑
数据源（Source）--->图层（Layer)--->地图（Map)这个逻辑在上节已经提过了，这里重申一下，需要看官自己去记忆，如果上面的结构图不够理解，没关系，在接下来的实践中，便会渐渐明白这个过程。
完成加载图层后，地图开发便完成了一半，只剩下交互和扩展效果了。
在 MapConfig 中配置图层
// 地图基本配置
var map = new new mapboxgl.Map({
container: "map", // 对应上一步创建的id名称
style: "mapbox://styles/mapbox/streets-v11", // 地图样式，也可以写自己的地图样式
center: [116.39104843139647, 39.912287369097186], //地图初始化时，定位的位置
zoom: 15, // 缩放级别
})();
在上一节初始化时，我们给 Map 传入一个对象，初始化的地图拥有一个底图，底图由 style 设置，style所设置的地址是一个json文件的地址，下载以后，便发现他的结构和我所说的代码逻辑十分符合，通过这种方式，可以将图层在初始化地图时将图层加载进去。
需要注意的是，这种方法实际目的是配置底图，虽然也能将业务相关的图层放进去，但并不推荐这么做，因为这会使你的底图样式文件十分混乱。
底图，是除了业务图层以外的图层，举个例子来说，我们要展示某厂区的地图，那么他周围的道路、建筑物、POI点位、水系、绿地等都属于底图，即与你实际业务并不相关，但为了增加地图的可读性和美观性而存在的图层。
// style文件
const style = {
sources: {
// 数据源Source
composite: {
url: "mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2",
type: "vector",
},
},
sprite: "xxxx",
glyphs: "xxxx",
// 图层layer
layers: [
{
id: "landuse",
type: "fill",
// 通过source属性将layer和source关联起来
source: "composite",
// 指定数据源下哪一类数据
"source-layer": "landuse",
layout: {},
paint: {
"fill-color": "rgb(222, 222, 222)",
"fill-opacity": 0.8,
},
},
],
};
var map = new new mapboxgl.Map({
container: "map", // 对应上一步创建的id名称
style, // 将style传入
center: [116.39104843139647, 39.912287369097186], //地图初始化时，定位的位置
zoom: 15, // 缩放级别
})();
开篇所说的源到图层，用代码便是这样体现的， 通过source字段指向源，图层不需要管数据的变化，只需要做好样式的设置。
addLayer 添加图层
这是我们常用的一个方法，这个方法看似简单，但是最复杂的莫过于此了，因为我们需要在这里面配置图层样式，图层样式配置也是整个图层加载中最复杂的一部分，这里不会详细展开，在熟悉 mapbox 的使用后，再详细讲解这一部分，当然，如果你想提前了解的话，请参考官方样式配置的样式文档。
接下来我们以加载Geojson类型的图层为例。
加载GeoJson图层
function addBase(map) {
// geojson格式数据
// 点
const pointData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [116.39104843139647, 39.912287369097186]
}
}
]
};
// 线
const lineData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[116.38540506362915, 39.91115171447854],
[116.3856840133667, 39.90613156632883],
[116.3971424102783, 39.906510147702974],
[116.39682054519652, 39.9116290208874]
]
}
}
]
};
// 面
const polygonData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[116.38752937316895, 39.907859855577165],
[116.39570474624634, 39.907859855577165],
[116.39570474624634, 39.91083076519556],
[116.38752937316895, 39.91083076519556],
[116.38752937316895, 39.907859855577165]
]
]
}
}
]
};
// 添加数据源
map.addSource("point", {
type: "geojson",
data: pointData
});
map.addSource("line", {
type: "geojson",
data: lineData
});
map.addSource("polygon", {
type: "geojson",
data: polygonData
});
// 添加图层
map.addLayer({
id: "point",
type: "symbol",
source: "point",
layout: {
"icon-size": 3, //图标大小
"icon-image": "museum-15" //图片名称
},
paint: {}
});
map.addLayer({
id: "line",
type: "line",
source: "line",
layout: {},
paint: {
"line-color": "#fbb03b", //线颜色
"line-width": 2.5 // 线宽
}
});
map.addLayer({
id: "polygon",
type: "fill",
source: "polygon",
layout: {},
paint: {
"fill-color": "#fbb03b", //面颜色
"fill-opacity": 0.7 // 面透明度
}
});
}
无论是哪种方式添加，我们都需要记住一个顺序：先添加数据源（Source),然后添加图层，并指定数据源，设置图层样式。这样便完成一个完整逻辑，在这个过程中，我们先定义数据，再通过addSource将数据添加到数据源，最后addLayer添加图层至地图上，addLayer已经讲完了，在其中用到的addSource，下节将展开讲述。
