Mapbox 教程第二章数据展示

KoProject

2024-03-12 帮助3人

数据展示

本文相关全部代码在mapbox/ch03目录。

展示地理数据是地图应用程序中至关重要的一部分。无论是呈现地表特征、显示遥感图像，还是展示点、线、面等地理要素，都需要一种有效的方式将数据以可视化的形式呈现给用户。

在Mapbox中，可以借助丰富的控件和功能，以及各种数据格式和服务，实现地理数据的展示。本文将介绍如何在Mapbox中展示栅格数据、矢量数据图层的方法。无论是展示栅格数据的图像、展示矢量数据的地理要素，还是从外部服务获取地图图层，本文将提供详细的指导和示例代码。

通过本文的内容，将学习如何准备地理数据、创建数据源，以及如何将数据与图层关联起来，以呈现令人印象深刻的地图展示效果。

数据源

在Mapbox中，有多种数据源类型可用于加载地理数据。下面是一些常见的数据源类型的详细介绍：

Vector（矢量）：矢量瓦片是一种较新的技术，它将地理数据存储在金字塔结构中，并以瓦片的形式加载。矢量瓦片具备矢量数据的能力，因此地图引擎可以识别瓦片中包含的图形信息。这种数据源类型适用于展示点、线、面等矢量要素，并具有较快的加载速度。
Raster（栅格）：栅格瓦片是一种常见的瓦片格式，主要用于展示栅格数据，如卫星影像。地图数据被切分为瓦片，并以金字塔结构进行存储和加载。栅格瓦片在底图展示中起着重要的作用。
Raster DEM（栅格高程）：栅格高程瓦片将高程数据以RGB形式存储在图像上，用于在地图上展示地形数据。尽管市面上有类似的数据格式（如Terrain RGB），但在高程值存储方面可能存在差异。
GeoJSON（地理JSON）：GeoJSON是一种标准的矢量数据格式，以清晰、易读的方式存储地理要素的几何信息和属性数据。GeoJSON适用于展示点、线、面等矢量数据，具有明确的结构。
Image（图片）：图片图层可用于在地图上叠加图片。尽管使用频率不高，但在某些场景下，它可以提供一种将自定义图片覆盖在地图上的方式。

通过选择适当的数据源类型，并根据需要加载和配置数据源，可以实现地图数据的加载和展示。在Mapbox中，可以使用以下代码来添加数据源：

map.addSource('source-id', {
    type: 'geojson',
    data: 'http://example.com/geojson-data.geojson'
});

上述代码通过map.addSource方法添加了一个名为source-id的数据源，数据源的类型为geojson，数据源的内容来源于指定的URL地址（http://example.com/geojson-data.geojson）。

图层

在Mapbox中，图层是地图上的可视化元素，用于展示地理数据和添加各种效果。图层可以包括栅格图层、矢量图层、标注图层等，每种图层类型都有其特定的作用和功能。不同类型的图层可用于呈现不同种类的地理数据。栅格图层适用于展示栅格数据，如地形图、卫星图像等。矢量图层用于显示矢量数据，例如点、线、面等地理要素。标注图层则用于添加标注和注释，使地图更具信息性。要在Mapbox中添加图层，可以使用map.addLayer方法。该方法允许指定图层的ID、类型以及与之关联的数据源。通过这种方式，可以将图层添加到地图上，并进行进一步的样式和属性设置。使用以下代码将一个矢量图层添加到地图中：

this.map.addLayer({
    id: 'points-layer',
    type: 'circle',
    source: 'source-id',
    paint: {
        'circle-radius': 6,
        'circle-color': '#ff0000'
    }
})

在上述代码中，id指定了图层的唯一标识符，type定义了图层的类型，source指定了与之关联的数据源，paint用于设置图层的样式属性。在Mapbox中，图层类型（type）是指定图层呈现方式的重要属性。下面是常见的图层类型以及它们的描述：

"fill"：填充多边形，可选择添加描边边框。
"line"：描边线条。
"symbol"：图标或文本标签。
"circle"：填充圆形。
"heatmap"：热力图。
"fill-extrusion"：拉伸（3D）多边形。
"raster"：栅格地图纹理，如卫星影像。
"hillshade"：基于DEM数据的客户端山体阴影可视化。目前，实现仅支持Mapbox Terrain RGB和Mapzen Terrarium瓦片。
"background"：地图的背景颜色或图案。
"sky"：地图周围的球形天空层，始终呈现在其他所有图层的后面。

图层显示控制

图层显示控制是在Mapbox中控制图层可见性的重要功能。通过适当的代码设置，可以在需要时显示或隐藏特定图层。以下是一个示例代码段，展示了如何控制图层的显示状态：

show() {
    this.map.setLayoutProperty("图层id", 'visibility', 'visible');
}, close() {
    this.map.setLayoutProperty("图层id", 'visibility', 'none');
},

上述代码中，show()函数用于显示指定的图层，通过设置图层的可见性属性为visible来实现。而close()函数用于隐藏指定的图层，通过将图层的可见性属性设置为none来实现。

通过调用map.setLayoutProperty方法，我们可以根据图层的ID来控制图层的显示状态。将visibility属性设置为visible时，图层将可见；将其设置为none时，图层将被隐藏。

图层顺序控制

在Mapbox中可以通过适当的代码来控制图层的顺序，从而影响它们在地图上的显示顺序。当多次执行map.addLayer方法时，图层的显示顺序将按照执行的顺序进行排列。然而，如果需要调整图层的显示顺序，可以使用map.moveLayer方法。

使用map.moveLayer('layerID', 'beforeID')方法，您可以将特定图层移动到目标图层的前面。这里，layerID是您要调整顺序的图层的ID，beforeID是目标图层的ID，表示将该图层放在目标图层的前面。

例如，假设您有两个图层，分别为layer1和layer2，希望将layer2移动到layer1的前面，则可以使用以下代码：

map.moveLayer('layer2', 'layer1');

如果希望将图层移动到最顶部，则可以将beforeID参数设置为null或undefined。例如，以下代码将layer1移动到最顶部：

map.moveLayer('layer1', null);
map.moveLayer('layer1', undefined);

需要注意的是，调整图层的层级关系可能会影响地图的可读性和交互性，因此在进行调整之前，应该仔细考虑和测试。

图层删除

图层删除是在Mapbox中删除指定图层的一项重要操作。通过适当的代码设置，可以实现对特定图层的删除。以下是一个示例代码段，展示了如何删除图层：

delLayer() {
    this.map.removeLayer("points-layer");
}

上述代码中，delLayer()函数用于删除名为points-layer的图层。通过调用map.removeLayer方法，并传入要删除的图层的ID，可以实现对图层的删除操作。这种图层删除功能非常有用，可以根据需要在地图中进行图层的动态增删，以满足特定的地图展示需求。通过删除不再需要的图层，可以优化地图的显示性能和可读性。

矢量数据展示

在Mapbox中展示矢量数据是一种常见且重要的功能。矢量数据通常以矢量图形的形式存储，可以包含点、线、面等地理要素。通过在Mapbox中加载和展示矢量数据，可以在地图上呈现具体的地理特征、行政区划、交通网络等信息。

为了展示矢量数据，需要将数据源添加到地图中。使用map.addSource方法可以添加数据源，并指定数据的类型和来源。对于矢量数据，可以使用GeoJSON格式作为数据源。

下面是一个基本的代码示例，展示了如何在Mapbox中加载矢量数据：

map.addSource('source-id', {
    type: 'geojson',
    data: 'http://example.com/geojson-data.geojson'
});

在上述代码中，使用map.addSource方法将一个名为source-id的数据源添加到地图中。指定数据源的类型geojson，并通过URL指定了数据的来源地址，注意除了指定URL地址以外还可以直接写入符合GeoJson规范的对象数据。加载数据源后，可以使用图层来呈现矢量数据。Mapbox提供了多种图层类型，包括点图层、线图层、面图层等，可以根据数据类型选择相应的图层进行展示。

例如可以使用map.addLayer方法添加一个点图层来展示矢量数据中的点要素：

map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'source-id',
    paint: {
        'circle-radius': 6,
        'circle-color': '#FF0000'
    }
});

在上述代码中，使用map.addLayer方法添加一个名为points的图层，并指定图层类型为circle，表示展示点要素。通过指定source参数为之前添加的数据源ID，将图层与数据源关联起来。还可以通过paint属性设置图层的样式，例如设置点的半径和颜色。通过以上的步骤就可以在Mapbox中加载和展示矢量数据。根据数据源的不同可以使用不同的图层类型和样式来呈现点、线、面等地理要素。

Mapbox 点图层

在Mapbox中，点图层是一种常用的图层类型，用于展示矢量数据中的点要素。点要素可以表示地理位置、兴趣点、传感器数据等信息。通过适当的样式设置，可以将点图层呈现为不同的形状、颜色和大小，以便更好地展示地理数据。

要在Mapbox中展示点图层，需要遵循以下基本步骤：

添加数据源：使用map.addSource方法将数据源添加到地图中。可以使用不同的数据源类型。例如，如果数据源是GeoJSON格式的文件，可以通过指定文件路径、GeoJson数据或URL来加载数据源。示例代码如下。

this.map.addSource('source-id', {
    type: 'geojson',
    data: {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [120, 30]
        },
        "properties": {}
    }
})

添加点图层：使用map.addLayer方法添加点图层，并将其与之前添加的数据源关联起来。可以根据需求设置点的样式，如颜色、大小、形状等。示例代码如下。

this.map.addLayer({
    id: 'points-layer',
    type: 'circle',
    source: 'source-id',
    paint: {
        'circle-radius': 6,
        'circle-color': '#ff0000'
    }
})

上述代码在执行后浏览器中显示内容如图所示。

学新通

需要注意：上述两个操作流程最佳执行时机是在load事件的回调函数中进行。这样可以确保在地图加载完成后再进行数据展示，避免出现未加载完成的数据或图层。如果需要修改点位数据，可以使用以下代码来更新地图上的点要素。

this.map.getSource("source-id").setData(
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [120.1, 30]
        },
        "properties": {}
    }

)

在上述代码中，通过this.map.getSource("source-id")获取到之前添加的数据源，并使用.setData()方法来更新数据。可以提供新的GeoJSON对象作为参数，该对象描述了要更新的点要素的几何信息和属性。在示例中将坐标更新为[120.1, 30]，并保持属性为空对象。执行上述代码后，地图中的点要素将被更新为新的位置。项目中可以根据需要使用相应的数据来更新点的坐标、属性等信息。

在Mapbox中，点图层的样式不仅仅局限于简单的形状和颜色，还支持以图片的形式展示。以下是一个示例代码，展示如何使用图片样式来呈现点图层：

this.map.addLayer({
    'id': 'points',
    'type': 'symbol',
    'source': 'source-id',
    'layout': {
        'icon-image': 'custom-marker', // 图片名称
        'text-field': ['get', 'title'], // 文本字段
        'text-font': [  // 字体
            'Open Sans Semibold',
            'Arial Unicode MS Bold'
        ],
        'text-offset': [0, 1.25], // 偏移量
        'text-anchor': 'top' // 位置
    }
});

在上述代码中，将图层的类型设置为symbol，表示使用符号来展示点要素。通过设置icon-image属性为自定义的图片名称，可以使用指定的图片作为点要素的样式。此外，还可以设置其他样式属性，如文本字段、文本字体、文本偏移量等，以进一步自定义点图层的样式。

在使用自定义图片样式之前，需要将图片资源加载到Mapbox实例中，并为其指定一个名称，例如custom-marker。下面是一个示例代码，展示了如何加载自定义图片并将其添加到Mapbox实例中：

this.map.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',(e,image)=>{
    if(e){
        throw e;
    }else {
        this.map.addImage("custom-marker",image)
    }
})

在上述代码中，使用map.loadImage方法加载了一个图片资源，该资源的URL为https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png。加载完成后将其命名为custom-marker并添加到Mapbox实例中，以便后续使用。

一旦图片资源加载并添加到Mapbox实例中，就可以在设置点图层的样式时，通过设置icon-image属性为custom-marker，使用自定义图片来呈现点要素的样式。

请确保图片资源的URL正确，并根据实际需求调整图片的名称和路径。这样就可以成功使用自定义的图片样式来展示地图中的点要素，为地图呈现增添更多的个性化效果。

最终使用自定义图片样式的效果如图所示。在该图中，点要素以自定义的图片样式呈现，使地图更具视觉吸引力和个性化特色。

学新通

Mapbox 线图层

在Mapbox中，线图层是一种常用的图层类型，用于展示矢量数据中的线要素。线要素可以表示道路、河流、轨迹等地理线性特征。通过适当的样式设置，可以将线图层呈现为不同的颜色、粗细和样式，以便更好地展示地理数据。

要在Mapbox中展示线图层，需要遵循以下基本步骤：

添加数据源：使用map.addSource方法将数据源添加到地图中。可以使用不同的数据源类型。例如，如果数据源是GeoJSON格式的文件，可以通过指定文件路径、GeoJSON数据或URL来加载数据源。示例代码如下：

this.map.addSource('source-id', {
    type: 'geojson',
    data: {
        "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [120, 30],
                [120, 30.1],

            ]
        },
        "properties": {}
    }
})

添加线图层：使用map.addLayer方法添加线图层，并将其与之前添加的数据源关联起来。可以根据需求设置线的样式，如颜色、粗细、虚线等。示例代码如下：

this.map.addLayer({
  id: 'lines-layer',
  type: 'line',
  source: 'source-id',
  paint: {
    'line-color': '#ff0000', // 线颜色
    'line-width': 4,         // 线粗细
  }
})

上述代码在浏览器中执行效果如图所示。

学新通

需要注意：上述两个操作流程最佳执行时机是在load事件的回调函数中进行。通过以上步骤，就可以在Mapbox中加载和展示线图层。根据数据源的不同，可以使用不同的线样式来呈现地理线性特征。可以根据需求设置线的颜色、粗细、虚线样式等，以满足特定的可视化需求。

下面来对Mapbox中几种常见的样式进行说明

实线（Solid Line）：使用单一颜色的实线来表示线要素。可以通过设置line-color属性来指定线的颜色，通过设置line-width属性来控制线的宽度。示例代码如下。

this.map.addLayer({
  id: 'lines-layer',
  type: 'line',
  source: 'source-id',
  paint: {
    'line-color': '#ff0000',
    'line-width': 4,
  }
})

虚线（Dashed Line）：使用间断的线段来表示线要素，形成虚线的效果。可以通过设置line-dasharray属性来定义虚线的样式。例如，line-dasharray: [4, 2]表示4个像素的实线段和2个像素的空白段交替排列，从而形成虚线的效果。示例代码如下。

this.map.addLayer({
    id: 'lines-layer2',
    type: 'line',
    source: 'source-id',
    paint: {
        'line-color': '#ff0000',
        'line-width': 4,
        "line-dasharray": [4, 2]
    }
})

箭头线（Arrow Line）：在线段中间按照一定间隔显示箭头图标。示例代码如下。

this.map.loadImage(require("./assets/arraw.png"), (e, image) => {
    if (e) {
        throw e;
    } else {
        this.map.addImage("arrow", image)
    }
})


this.map.addLayer({
    id: 'lines-layer',
    type: 'line',
    source: 'source-id',
    paint: {
        'line-color': '#ff0000',
        'line-width': 4,
    }
})


this.map.addLayer({
    'id': 'arrow-layer',
    'type': 'symbol',
    'source': 'source-id',
    'layout': {
        'symbol-placement': 'line',
        'symbol-spacing': 1,
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
        'icon-image': 'arrow',
        'icon-size': 0.06,
        'visibility': 'visible'
    }
}

上述代码展示了在Mapbox中创建一个箭头线图层的示例。通过使用map.addLayer方法添加一个名为arrow-layer的图层，并指定图层类型为symbol，表示使用符号来展示线要素。在图层的layout属性中，设置了一系列样式属性来定义箭头线的呈现方式，参数如下：

symbol-placement属性设置为line，表示符号沿线的位置排列。
symbol-spacing属性设置为1，表示符号之间的间距。
icon-allow-overlap属性设置为true，允许符号之间重叠显示。
icon-ignore-placement属性设置为true，表示忽略符号的位置限制。
icon-image属性设置为arrow，指定使用名为arrow的图片作为符号。
icon-size属性设置为0.045，控制箭头符号的大小。
visibility属性设置为visible，表示图层可见。

渐变线（Gradient Line）：使用渐变效果来呈现线要素，使线在颜色上产生平滑的过渡效果。可以通过设置line-gradient属性来定义渐变的颜色方案。示例代码如下。

this.map.addSource('source-id', {
    type: 'geojson',
    lineMetrics: true,
    data: {
        "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [120, 30],
                [120, 30.1],

            ]
        },
        "properties": {}
    }
});
this.map.addLayer({
    type: 'line',
    source: 'source-id',
    id: 'line',
    paint: {
        'line-color': 'red',
        'line-width': 14,
        'line-gradient': [
            'interpolate',
            ['linear'],
            ['line-progress'],
            0,
            'blue',
            0.1,
            'royalblue',
            0.3,
            'cyan',
            0.5,
            'lime',
            0.7,
            'yellow',
            1,
            'red'
        ]
    },
    layout: {
        'line-cap': 'round',
        'line-join': 'round'
    }
})

在上述代码中，展示了如何在Mapbox中创建一个渐变线图层的示例。使用map.addSource方法添加一个名为source-id的数据源，并指定其类型为GeoJSON。需要注意的是，为了使用渐变线效果，需要将lineMetrics属性设置为true，以启用线度量。

使用map.addLayer方法添加一个名为line的图层，并将其与之前添加的数据源关联起来。设置图层的类型为line，表示展示线要素。在图层的paint属性中，通过设置line-color属性为red，表示线的颜色为红色。同时，设置line-width属性为14，控制线的宽度为14个像素。

重点是设置了line-gradient属性，通过使用interpolate函数和line-progress属性，定义了线的渐变颜色方案。根据线的进度，线的颜色会从蓝色过渡到红色，中间包括了一系列过渡颜色。

在图层的layout属性中，设置了line-cap属性为round，表示线的端点为圆形，以及line-join属性为round，表示线的连接点为圆形。

Mapbox 面图层

在Mapbox中，面图层用于展示矢量数据中的面要素，如行政区划、地理区域等。面要素由多个点组成，形成封闭的多边形。通过适当的样式设置，可以将面图层呈现为不同的颜色、填充图案或纹理，以突出显示地理数据的特征。要在Mapbox中展示面图层，需要遵循以下基本步骤：

添加数据源：使用map.addSource方法将数据源添加到地图中。可以使用不同的数据源类型。例如，如果数据源是GeoJSON格式的文件，可以通过指定文件路径、GeoJSON数据或URL来加载数据源。示例代码如下：

this.map.addSource('source-id', {
    type: 'geojson',
    lineMetrics: true,
    data: {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [ [120, 30],
                 [120, 30.1],
                 [120.1, 30.1],
                 [120.1, 30],
                 [120, 30],]
            ]
        },
        "properties": {}
    }
})

添加面图层：使用map.addLayer方法添加面图层，并将其与之前添加的数据源关联起来。可以根据需求设置面的样式，如填充颜色、边界颜色、透明度等。示例代码如下：

this.map.addLayer({
    id: 'polygon-layer',
    type: 'fill',
    source: 'source-id',
    paint: {
        'fill-color': 'blue',         // 填充颜色
        'fill-opacity': 0.5,          // 透明度度
        'fill-outline-color': 'black' // 边框颜色
    }
});

上述代码在浏览器中执行效果如图所示。

学新通

需要注意：上述两个操作流程最佳执行时机是在load事件的回调函数中进行。

除了纯色填充，Mapbox还支持使用纹理来呈现面图层。通过加载纹理图片并将其添加到Mapbox实例中，可以在设置面图层的样式时，使用fill-pattern属性指定纹理的名称来实现纹理填充效果。纹理图片可以在www.toptal.com/designers/s… 网站进行下载。下面是一个实现纹理填充的示例代码：

// 纹理
this.map.loadImage(require("./assets/more-leaves-on-green.png"), (e, image) => {
    if (e) {
        throw e;
    } else {
        this.map.addImage("pattern", image)
    }
})
this.map.addLayer({
    'id': 'pattern-layer',
    'type': 'fill',
    'source': 'source-id',
    'paint': {
        'fill-pattern': 'pattern'
    }
});

最终在浏览器中显示效果如图所示。

学新通

栅格数据展示

在Mapbox中展示栅格数据是一种常见的功能，栅格数据通常用于显示地形、卫星图像、气象数据等。栅格图层是一种直接在地图上展示栅格数据的方式。可以使用栅格数据源或栅格切片作为栅格图层的数据源，并通过设置图层的样式来呈现栅格数据。要在Mapbox中展示栅格图层，需要遵循以下基本步骤：

添加数据源：我们可以使用map.addSource方法将数据源添加到地图中。示例代码如下：

this.map.addSource('source-id', {
    'type': 'raster',
    'tiles': [
        'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
    ],
    'tileSize': 256,
});

添加面图层：我使用map.addLayer方法添加栅格图层，并将其与之前添加的数据源关联起来。示例代码如下：

this.map.addLayer({
    "id": "cog-data",
    "type": "raster",
    "source": "source-id",
    "minzoom": 0,
    "maxzoom": 22,
    'layout': {
        'visibility': 'visible'
    },
});

上述代码运行后在浏览器中显示效果如图所示。

学新通

注意：这些瓦片会根据地图的缩放级别和位置进行动态加载和显示，从而提供流畅的地图浏览体验。如果需要展示自己的栅格数据，可以将tiles属性中的URL替换为自己的栅格数据源的URL。

加载天地图

在国内国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户。天地图提供的背景地图，国家背景、更新及时、地物详细、完全免费、值得信赖。下面将介绍如何将其加载到Mapbox实例中，具体操作流程如下。

需要创建一个Mapbox实例，并指定容器、样式和初始地图视图。注意样式必须按照实例代码编写，否则会加载其它底图服务。

this.map = new mapboxgl.Map({
    container: "map",
    style: {
        "version": 8,
        "sources": {},
        "layers": [],
    },
    center: [120, 30],
    zoom: 12,
});

将天地图的WMTS服务进行定义，并将其以栅格形式加入到Mapbox实例中。

const tiandituToken = 'af329b7c71730694d8ffadce86e45236';
// 矢量底图
const vecwUrl = 'https://t0.tianditu.gov.cn/vec_w/wmts?'  
      'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&'  
      'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk='   tiandituToken;
//矢量注记
const cvawUrl = 'https://t3.tianditu.gov.cn/cva_w/wmts?'  
      'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&'  
      'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk='   tiandituToken;


function addRasterTileLayer(map, url, sourceId, layerId) {
    map.addSource(sourceId, {
        type: 'raster',
        tiles: [url],
        tileSize: 256
    });
    map.addLayer({
        id: layerId,
        type: 'raster',
        source: sourceId
    });
}

this.map.on('load',  () =>{
    addRasterTileLayer(this.map,vecwUrl,'vecw','vecw')
    addRasterTileLayer(this.map,cvawUrl,'cvaw','cvaw')
})

通过上述代码可以将天地图的矢量底图和矢量注记加载到Mapbox实例中。

总结

本章将介绍在Mapbox中展示地理数据的方法和技巧，包括栅格数据和矢量数据的展示。操作流程包括以下三个核心步骤：

添加数据源。对于栅格数据，可使用栅格数据源或栅格切片，并通过指定数据源的类型和URL加载数据。对于矢量数据，可使用GeoJSON格式的数据源，并通过指定数据源的类型和数据来源加载数据。
添加图层来呈现数据。根据数据类型的不同，可选择适合的图层类型，如栅格图层、点图层、线图层或面图层。通过调用map.addLayer方法，指定图层的ID、类型和与之关联的数据源。
设置图层样式以展示地理数据。无论是栅格图层还是矢量图层，可通过设置不同的样式属性来定制数据的外观和显示效果。例如，对于点图层，可设置点的大小和颜色；对于线图层，可设置线的颜色和宽度；对于面图层，可设置填充色和边界样式等。

通过以上步骤，能够在Mapbox中展示各种地理数据，为地图应用程序带来丰富的内容和视觉效果。

这篇好文章是转载于：学新通技术网

Mapbox 教程第二章数据展示

数据展示

数据源

图层

图层显示控制

图层顺序控制

图层删除

矢量数据展示

Mapbox 点图层

Mapbox 线图层

Mapbox 面图层

栅格数据展示

加载天地图

总结

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

Mapbox 教程 第二章 数据展示

数据展示

数据源

图层

图层显示控制

图层顺序控制

图层删除

矢量数据展示

Mapbox 点图层

Mapbox 线图层

Mapbox 面图层

栅格数据展示

加载天地图

总结

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

Mapbox 教程第二章数据展示