简述
本章将提供更多的示例，包括点线面的加载（前文已有，这里做一次总结),其中也有一些之前没有提过的内容，我也不打算细讲，其实这章我只想教会一件事————会看官网API，如果学会了，那就完成了本章的教学意义。
本节的例子建议自己写一遍，或者尝试注释一遍
本章结束后，将进入第二章，主要聚焦图层的样式。
案例
点线面
通过加载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, // 面透明度
},
});
}
体
一般用过三维建筑物
function addFillExtrusion(map) {
// geojson格式数据
// 面
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("polygon", {
type: "geojson",
data: polygonData,
});
// 添加图层
map.addLayer({
id: "polygon",
type: "fill-extrusion",
source: "polygon",
layout: {},
paint: {
"fill-extrusion-color": "#aaa", // 体块颜色
"fill-extrusion-height": 100, // 体块高度
"fill-extrusion-base": 0, // 体块基础高度
"fill-extrusion-opacity": 0.6, // 透明度
},
});
// 缩放至
map.flyTo({ pitch: 70, bearing: 30 });
}
圆
面朝屏幕的圆，通过点坐标生成
function addCircle(map) {
const pointData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [116.39104843139647, 39.912287369097186],
},
},
],
};
// 添加数据源
map.addSource("point", {
type: "geojson",
data: pointData,
});
// 添加圆图层
map.addLayer({
id: "point",
type: "circle",
source: "point",
paint: {
"circle-radius": 15, //圆半径
"circle-color": "purple", //圆颜色
},
});
}
天空盒
为了让地图更加3D化，以及美观化，需要给地图加载一个天空盒
function addSky(map) {
map.addLayer({
id: "sky",
type: "sky",
paint: {
// 渐进天空
"sky-type": "gradient",
// 中间白，向外逐渐扩散
// 模拟了地平线以下太阳的外观
"sky-gradient": [
"interpolate",
["linear"],
["sky-radial-progress"],
0.8,
"rgba(135, 206, 235, 1.0)",
1,
"rgba(0,0,0,0.1)",
],
"sky-gradient-center": [0, 0],
"sky-gradient-radius": 90,
"sky-opacity": [
"interpolate",
["exponential", 0.1],
["zoom"],
5,
0,
22,
1,
],
},
});
map.flyTo({
pitch: 80,
});
}
Marker
与点类似，但是是以DOM元素显示的
function addMarker(map) {
new mapboxgl.Marker()
.setLngLat([116.39104843139647, 39.912287369097186])
.addTo(map);
}
雾
模拟雾，在球模式中，又是大气层的效果
function addFog(map) {
map.addLayer({
id: "sky",
type: "sky",
paint: {
// 渐进天空
"sky-type": "gradient",
// 中间白，向外逐渐扩散
// 模拟了地平线以下太阳的外观
"sky-gradient": [
"interpolate",
["linear"],
["sky-radial-progress"],
0.8,
"rgba(135, 206, 235, 1.0)",
1,
"rgba(0,0,0,0.1)",
],
"sky-gradient-center": [0, 0],
"sky-gradient-radius": 90,
"sky-opacity": [
"interpolate",
["exponential", 0.1],
["zoom"],
5,
0,
22,
1,
],
},
});
map.flyTo({
pitch: 80,
});
map.setFog({
range: [4.0, 8.0],
color: "white",
"horizon-blend": 0.1,
});
}
地形
function addTerrain(map) {
// 增加地形源
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14,
});
// 设置地形源，并设置地形夸张系数
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
// 添加天空
map.addLayer({
id: "sky",
type: "sky",
paint: {
"sky-type": "atmosphere",
"sky-atmosphere-sun": [0.0, 0.0],
"sky-atmosphere-sun-intensity": 15,
},
});
map.flyTo({
center: [-114.34411, 32.6141],
zoom: 13,
pitch: 80,
});
}
WMTS
function addWMTS(map) {
map.addSource("天地图影像", {
tileSize: 256,
tiles: [
"http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
"http://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b8b36f528ccc550525c7cada64303bc4",
],
type: "raster",
});
map.addLayer({
id: "tdt",
source: "天地图影像",
type: "raster",
minzoom: 0,
});
}
