总结
1. mapbox GL JS 应用场景
- 可视化，动态展示地理数据！
- 查询，过滤地图中的要素（Featrue）!
- 将数据放置在 Mapbox 风格的图层之间！
- 可以动态展示、定义样式客户端 map 上的数据！
- #D 数据的 可视化与动态展示！
- 在程序中给 map 添加 maeker\popup !
2. 关键概念
-
mapbox GL
‘GL’ 意为 Mapbox 是一个图形库（graphic library）, 它可以在任何浏览器端使用 OPENGL 来独立地动态可视化二维和三维的 Mapbox map! -
Client-side rendering
Mapbox GL JS依赖于客户端渲染。Mapbox GL JS-地图是通过在浏览器中而不是在服务器上将矢量瓦片与样式规则相结合来动态渲染的，这使得可以根据用户交互来更改地图的样式和显示数据。 -
Map Class
mapboxgl.Map 类是每个Mapbox GL JS项目的基础。下方示例代码演示了向页面添加地图所需的最低要求：mapboxgl.accessToken = '<your access token here>'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v12', // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom });style:: 地图样式的样式URL，用于确定地图包括哪些平铺集以及它们的样式。上面的示例使用Mapbox Streets v12样式。当没有向Map构造函数提供样式选项时，默认情况下会启用Mapbox标准样式。
-
Layers
- Layer 提供了 renderer 渲染数据到浏览器上的规则！
-
异步函数
由于Mapbox GL JS中的层是远程的，所以它们是异步的。因此，连接到Mapbox GL JS的代码通常使用事件绑定来在正确的时间更改映射。例如map.on('load', () => { map.addLayer({ id: 'terrain-data', type: 'line', source: { type: 'vector', url: 'mapbox://mapbox.mapbox-terrain-v2' }, 'source-layer': 'contour' }); });此示例代码使用map.on（‘load’，function（）｛仅在加载映射的资源（包括样式）后调用map.addLayer。如果立即运行map.addLayer，则会触发错误，因为要添加图层的样式还不存在。
-
Layer source
mapbox GL 共有六种 layer source 类型，分别为 vector tile,、geojson、raster tile、raster dem、image、video。
TileSet 可以包含多个名为 source layers 的子集。比如， Mapbox Streets tileset 包含 roads (source-layer)、parks (source-layer)等等。为了确保图层引用正确的源图层，图层对象还需要包括一个源图层（通常是原始文件的名称）。请参见此示例：map.on('load', () => { map.addLayer({ id: 'rpd_parks', type: 'fill', source: { type: 'vector', url: 'mapbox://mapbox.3o7ubwm8' }, 'source-layer': 'RPD_Parks' }); }); -
Layout and paint properties
paint 与 Layout 用于定义 rendered 如何渲染数据到 map上，Layout 属性控制 位置 与 可见性 等其他高等级的属性，并在渲染的早期发生作用！ paint 属性控制 不透明度、颜色和平移 等细粒度的属性。 在渲染过程的后一阶段发挥作用！
示例代码map.on('load', () => { map.addLayer({ id: 'rpd_parks', type: 'fill', source: { type: 'vector', url: 'mapbox://mapbox.3o7ubwm8' }, 'source-layer': 'RPD_Parks', layout: { visibility: 'visible' }, paint: { 'fill-color': 'rgba(61,153,80,0.55)' } }); });
-
- Camera
Camera 是地图的视野。Mapbox GL JS提供了以下参数来调整相机的视角：center、zoom、bearing（地图的视觉旋转）和 pitch（地图的可视倾斜）。贴图的初始透视图、jumpTo、easeTo和flyTo都使用常用的 Camera 选项。
3. Use Mapbox GL JS with other tools
Mapbox GL JS可以很好地与许多其他Mapbox工具配合使用。您可以在地图中使用自己的数据，创建自己的自定义地图样式，添加交互性等等。
-
use your own data
使用Mapbox GL JS，您可以访问提供大量地理数据的 Mapbox tilesets。您也可以使用 Mapbox Studio、Mapbox TilingService 或 Uploads API上传自己的数据，然后访问并在Mapbox GL JS地图中显示。 -
style your map
您可以使用任何 Mapbox owned style 拥有的样式（如 Mapbox Streets）来设置地图的样式。也可以使用在Mapbox Studio中创建的自定义样式。有关Mapbox GL JS地图中使用的Mapbox设计和自定义地图样式的更多示例，请参阅我们的示例页面。 -
Interactivity
第三方工具允许您为Mapbox GL JS地图添加额外的交互性。例如，您可以使用Turf.JS在Mapbox GL JS地图中进行空间分析，使用three.JS在地图中添加3D模型，或者使用Web Audio API创建响应用户环境中声音的动画。有关将Mapbox GL JS与各种第三方工具一起使用的更多方法，请参阅我们的示例页面。 -
Mapbox web services APIs
Mapbox GL JS是使用一个或多个Mapbox web service API的应用程序的绝佳起点。例如，可以使用Director API在地图上显示逐转弯方向，也可以使用Isochrone API显示估计的行程时间。有关将Mapbox web service API 与 Mapbox GL JS 一起使用的更多示例，请参阅我们的教程页面和Mapbox GL JS-示例页面。cs.mapbox.com/api/overview/ -
JavaScript frameworks
Mapbox GL JS可以与包括React在内的各种JavaScript框架一起使用。要了解有关将Mapbox GL JS与React一起使用的更多信息，请参阅React应用程序教程中的使用Mapbox GL JS。
4. Attribution
当您使用Mapbox GL JS创建地图时，它会自动在地图的右下角包含属性。有关其他显示选项，请参阅 AttributionControl 的API文档。有关Mapbox需要什么类型的归因以及原因的更多详细信息，请参阅归因指南。
5. 安装使用 Mapbox GL
在开始使用Mapbox GL JS之前，您需要有一个Mapbox访问令牌，并使用 CDN 或 Mapbox GL-npmpackage 将 Mapbox GL JS.添加到您的项目中。
- 获取 Token
- CDN
<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZ2lzZXJqaWFuZyIsImEiOiJjbHJ3Ym1nZzYwdTI2Mml1b3FzN3RlZmRrIn0.Sy_jGFu4prk99Udfa6AgkQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
</script>
- Module bundler
npm install --save mapbox-gl
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
mapboxgl.accessToken = 'pk.eyJ1IjoiZ2lzZXJqaWFuZyIsImEiOiJjbHJ3Ym1nZzYwdTI2Mml1b3FzN3RlZmRrIn0.Sy_jGFu4prk99Udfa6AgkQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
6. Map Style
你可以使用 Mapbox GL JS 控制地图设计的很多方面，包括定义数据样式、微调地图样式、添加字体、创建 data-driven 的可视化。并且你可以直接使用 Mapbox’ 已经设计好的地图风格。比如，Mapbox Standard系列的 map style，或者你也可以通过调整地图杨色、图标、和字体来创建自己的 map style以适应你的应用 UI 或者公司品牌。
- 有两种方法定义 map 的外观：
- 使用 Mapbox GL JS API 在程序运行时动态更新 map 要素：根据一天中的时间调亮或调暗地图，根据用户的活动个性化图标和地图颜色，动态切换语言，或根据用户偏好增加标签的大小以提高易读性。
- 使用 Mapbox studio 创建 map style：上传数据，从头开始构建样式，并使用样式组件将图层的样式组组合在一起。发布您的自定义样式并将其加载到您的应用程序中。如果在Mapbox Studio中更新基础数据或编辑和发布样式更新，这些更改将反映在您的应用程序中。
这些方法并不相互排斥。您可以加载自定义样式，并在运行时在应用程序中从该自定义样式更新地图要素。
6.1. Set a Style
在Mapbox生态系统中，地图的外观由 map style 决定。Mapbox style 是一个JSON对象，它精确地定义了如何绘制地图。它几乎定义了与地图外观相关的所有内容。在Mapbox GL JS中，您可以在创建地图实例时或之后的任何时候设置地图的样式。
6.1.1. Choose a Style
您为应用程序选择的样式应该反映您的用户将如何与地图交互，以及他们将使用您的应用程序做什么。如果您不确定哪种样式适合您，我们建议您从精心设计的通用Mapbox Standard style开始。
6.1.2. Load a Style
Mapbox GL JS的Map类提供了一个可嵌入的映射接口。您可以将地图嵌入到网页上，允许用户使用标准手势进行操作，等等。
- 如果在初始化 map 对象时，您没有设置 style 属性，那么 Mapbox GL JS 会使用 Default style作为默认的 style。
- 您可以依赖默认的Mapbox标准样式，在首次初始化地图时通过将其包含在map选项的style属性中来加载样式，或者在使用map setStyle方法初始化地图后的任何时候通过提供相应的样式URL来加载样式。
6.1.3. Mapbox Standard
Mapbox Standard 就是 Default style。作为默认的 style。，在不指定任何样式的情况下实例化地图意味着您的地图将使用Mapbox Standard。
const map = new mapboxgl.Map({
container: 'map',
center: [-74.5, 40],
zoom: 9
});
6.1.4. Classic style templates and custom styles
如果您不适用 Mapbox Standard， 您可以将 map 的 style 的属性设置为您需要的 style URL
const map = new mapboxgl.Map({
container: 'map',
style: '<STYLE_URL>',
center: [-74.5, 40],
zoom: 9
});
-
要使用Mapbox拥有的样式之一，请使用以下值之一：
- mapbox://styles/mapbox/standard
- mapbox://styles/mapbox/standard-satellite
- mapbox://styles/mapbox/streets-v12
- mapbox://styles/mapbox/outdoors-v12
- mapbox://styles/mapbox/light-v11
- mapbox://styles/mapbox/dark-v11
- mapbox://styles/mapbox/satellite-v9
- mapbox://styles/mapbox/satellite-streets-v12
- mapbox://styles/mapbox/navigation-day-v1
- mapbox://styles/mapbox/navigation-night-v1
-
虽然不太常见，但如果您手动编写了样式JSON，您也可以使用JSON值而不是URL来加载样式。
-
您还可以在使用map setStyle方法初始化贴图后随时更改样式。如果在运行时添加了任何图层，则需要在加载新样式后重新添加图层。
6.2. Configure a style
根据您选择的地图样式，您有不同的配置选项可用于自定义样式的各个方面，如字体、颜色等。
6.2.1. Mapbox Standard
Mapbox Standard的底层设计范式与您从经典样式模板中了解到的不同。我们正在建立 basemap 的概念；Mapbox Standard是第一个遵循这种范式的样式。您可以将Mapbox维护的所有内容（自然特征、道路、建筑等）视为嵌入自定义图层的 basemap。底图和自定义图层之间的区别很重要，因为它们适用不同的样式规则。
- 你需要使用 setConfigProperty 方法改变标准 basemap 的可见外观。Mapbox Standard 提供了8个属性，您可使用setConfigProperty 方法改变这些属性以控制basemap的外观。
- 下面是一个示例，说明如何将底图中的3D灯光从默认预设的白天切换到另一个预设的黄昏。
map.on('style.load', () => {
map.setConfigProperty('basemap', 'lightPreset', 'dusk');
});
map.on('style.load', () => {
map.setConfigProperty('basemap', 'showPointOfInterestLabels', false);
});
-
使用 Mapbox Standard 自定义地图的其他选项包括配置root property或在custom layer 中设置custom data 的样式，使其反映您的个人偏好。请注意，Mapbox Studio中也提供了所有配置。
-
添加到 Mapbox Standard 的 basemap 中的 custom layer，其所有的配置选项定义在Mapbox Style Specification.中.
6.2.2. Style imports
为了使用Mapbox Standard等样式，我们引入了 Style APIs，允许您将其他样式import到向用户显示的main style中。这些样式将通过引用导入，因此对它们的更新将反映在您的main style中，而不需要您进行额外的工作。例如，假设您有样式A和样式B。 Style APIs将允许您将A导入B。导入后，您可以设置应用于A的配置，并在运行时对其进行调整。导入样式A的配置属性将取决于样式A的创建者选择可配置的内容。对于标准样式，有6个配置属性可用于设置包括lighting、fonts和label display选项。要导入样式，您需要将 import 属性添加到Style JSON中。
- 在下面的示例中，您将在 B 的 Style JSON 中添加“import”以导入样式A，并在模式根属性中设置样式A中定义的各种配置。
...
"imports": [
{
"id": "A",
"url": "STYLE_URL_FOR_A",
"config": {
"font": "Montserrat",
"lightPreset": "dusk",
"showPointOfInterestLabels": true,
"showTransitLabels": false,
"showPlaceLabels": true,
"showRoadLabels": false
}
}
],
...
6.2.3. Mapbox Standard Satellite
Standard Satellite Style （mapbox://styles/mapbox/standard-satellite） 结合不断更新的卫星影像与矢量图层的方式提供给用户更加简洁清晰的地图。和 Standard style 相似， Satellite Style 自动接收所有更新，还支持灯光预设。除此之外， Satellite Style相比Standard style的属性配置，新增了 showRoadsAndTransit 和 showPedestrianRoads。用户现在可以选择隐藏道路，简化地图样式，以便更好地关注特定区域或特征。
-
Standard Satellite Style 提供了8个配置属性，供开发人员在将其导入自己的样式时更改：
-
注意： Standard satellite style 不支持 theme 和 show3dObjects 配置。
6.2.4. Classic style templates and custom styles
Classic style templates 和 custom styles 的配置选项在 Mapbox Style Specification中定义。请注意，Mapbox Studio中也提供了所有配置。
6.3. Work with layers
- 你可以使用 Mapbox GL JS API 在程序运行时添加带有样式的数据. 在添加 Layer 到一个 style 时，需要了解两个重要的概念 Layer 与 Source … Source 包含地理数据，他们决定了你要添加要素的形状和地理位置。Layer包含了 style 信息，它决定了数据展示的样式风格。
- 一个Layer是一个配有样式的data（比如卖弄、线和点），他们组成一个 map 的 style。比如道路，河流和城市标注点他们是 map中三个独立的个体。有多种 layer 类型，比如fill、line 和 symbol。如果您想了解更多类型，请参考layers in the Mapbox Style Specification..
- 大多数 Layer 需要一个 Source，Source 提供了 Mapbox GL JS 可以与样式文档一起使用的地图数据，以呈现该数据的视觉表示。有几种源类型（例如tilesets、GeoJSON和raster data）。您可以在sources in the Mapbox Style Specification.中阅读有关源代码的更多信息。
- 在 Mapbox GL JS 中， Map类暴露了与 Style Object 的相关的所有方法的入口点，包括 source和 layer。
6.3.1. Add a layer at runtime
- 在运行时添加一个 Layer,从使用 Style’ addSource 方法加载一个 source 开始。在加载 map 后但在尝试添加 layers 之前，为新图层添加 source 非常重要，因为 source 是大多数图层类型的必需参数。
- 然后，你会使用 addLayer 方法添加 layer 到一个 style，添加样式图层时，您将指定：
+ 您赋值给 Layer 的唯一ID
+ Layer类型，比如fill、line和Symbol。
+ 通过引用一个 source，确定使用什么数据
+ 确定数据外观的属性，如color、opacity和language。
下方示例代码演示了添加了一个 GeoJSON 格式的 source 之后，添加一个 line 类型的 Layer.
map.on('style.load', () => {
map.addSource('route', {
type: 'geojson',
data: {
/* ... GeoJSON data ... */
}
});
map.addLayer({
id: 'route',
type: 'line',
source: 'route',
paint: {
'line-color': '#888',
'line-width': 8
}
});
});
- 根据 source 与 layer 类型的不同，再添加时 source 与 layer 可用属性也会有所不同。详细内容请参考 source type 与 layer type
6.3.2. Update a layer at runtime
你可以在程序运行时，使用 layer 的唯一ID 找到并更新 layer 的任何设属性。下方的示例代码演示了通过ID找到一个已存在的Layer 并更新 line-opacity 属性
map.setPaintProperty('route', 'line-opacity', 0.9);
- 更新图层时可用的确切属性因图层类型而异。阅读下面关于layer type的更多信息。
6.3.2. Specify order of a layer at runtime for Mapbox Standard
Mapbox Standard 和 Standard Satellite 使用 slot 来指定将定义了数据的 layer 添加哪里。slot是标准底图中可以插入图层的预定位置。为了在标准底图图层堆栈中的适当位置添加自定义图层，标准提供了3个精心设计的 slot，您可以利用这些slot来放置图层。这些插槽将保持稳定，您可以确保自己的地图不会随着 basemap 的更新而中断。
一下示例代码演示了怎样添加一个slot属性到layer上。
map.addLayer({ type: 'line', slot: 'middle' /* ... */ });
在将自定义 layer 插入标准 basemap 时，请确保使用 slot 而不是 layer id。可以使用可选的 beforeId 参数重新排列同一slot中的 layer。此参数style已有的layer 的 ID，表示新创i建的 Layer 在该ID之前插入，从而使新的 layer 在指定层下方可见。但是，如果层位于不同的 slot中，则忽略 beforeId 参数，并将新层添加到层数组的末尾。
- ps:Slots and performance-optimized layers reordering
6.3.3. Specify order of a layer at runtime for other styles
Map styles 包含许多独立的 layer， 比如 roads、buildings、label…在默认情况下，当你添加一个新的 layer 到style，他会出现在所有 layer 的顶部. 你可以指定在 addLyer 方法添加一个额外的参数（现有 Layer 的 ID）来指定新图层的添加位置。
map.addLayer({ type: 'line' /* ... */ }, 'state-labels');
6.3.4. Remove a layer at runtime
你可以使用 removeLAyer 方法从一个 style 上移除一个 Layer
map.removeLayer('route');
6.4. Source types
6.3.1. Vector
- VectorTileSource 是一个 vector 类型的 source，它符合 Mapbox Vector Tile 的格式。一个 vector 类型的 source 包含已经被切片化的地理要素（包括他们的数据属性），了解更多 vector tilesets的优点和工作原理， Mapbox 中的 vector tiles 应该遵循一下格式：
- mapbox://username.tilesetid.
map.addSource('terrain', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
});
6.3.2. GeoJSON
- GeoJSONSource 是一个 geojson 类型的 source，它符合 GeoJSON specification 的格式。一个 GeoJSON 类型的 source 是一个或多个地理要素的集合，比如points、line 和 polygon。数据可以通过以 GeoJSON 或者 URL 的形式提供给 data 属性。
map.addSource('polygon', {
type: 'geojson',
data: { type: 'Feature', geometry: { type: 'Polygon' /* ... */ } }
});
6.3.3. Raster
- RasterTileSource 是一个 raster 类型的切片集合，Mapbox 中的 raster tiles 应该是一下类型的 URL
- mapbox://tilesetid.
map.addSource('openstreetmap', {
type: 'raster',
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
6.3.4. Raster DEM
Raster DEM 是 RasterTileSource 类型的一个特例，其中包含 evaluation 数据，并引用Mapbox Terrain-DEM(mapbox://mapbox.mapbox-terrain-dem-v1), 他是唯一支持的 DEM 类型，在添加时要添加 type: "raster-dem.
map.addSource('dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
});
6.3.5. Image
ImageSource 是一个 image 类型的 source，他需要同提供的地理坐标信息一起使用。将“coordinates”数组中的地理坐标指定为[longitude，latitude]对，以便地图知道将图像放置在世界上的哪个位置。“coordinates”数组中的每个坐标对代表按顺时针顺序列出的图像角：左上、右上、右下、左下。
map.addSource('radar', {
type: 'image',
url: '/mapbox-gl-js/assets/radar.gif',
coordinates: [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
6.5. Layer types
6.5.1. Fill layer
一个 fill style layer 渲染一个或多个地图上的面要素，你可以使用 fill layer可视化面要素或多部份面要素。
添加一个 fill layer,你需要添加一个包含面要素的 vector 或者 GeoJSON 类型的 Source.，您可以使用 fill layer属性定义该 source 的外观。
map.addLayer({
id: 'maine',
type: 'fill',
source: 'maine',
paint: {
'fill-color': '#0080ff',
'fill-opacity': 0.5
}
});
6.5.2. Line layer
一个 line style layer 渲染一个或多个地图上的线要素，你可以使用 line layer可视化线要素或多部份线要素。
添加一个 line layer,你需要添加一个包含线要素的 vector 或者 GeoJSON 类型的 Source.，您可以使用 line layer属性定义该 source 的外观。比如颜色、宽度和线的图案。
map.addLayer({
id: 'route',
type: 'line',
source: 'route',
layout: {
'line-cap': 'round'
},
paint: {
'line-color': 'red',
'line-opacity': 0.8
}
});
6.5.3. Symbol layer
一个 symbol style layer 渲染 icon 或者 text 标签在一个点上或者沿着一条线，你可以使用一个 symbol layer 配置矢量切片上要素标签的外观。
添加一个 symbol layer,你需要添加一个包含点要素的 vector 或者 GeoJSON 类型的 Source.。如果要在此层中使用图标，还需要在添加层之前将 ”image" 添加到 style 中。然后，您可以使用符号层中的可用属性来自定义层的外观。
map.addLayer({
id: 'city-label',
type: 'symbol',
source: 'labels',
layout: {
'text-field': ['get', 'city_name'],
'text-size': 12
}
});
6.5.4. Circle layer
一个 circle style layer 渲染一个或多个地图上的 filled circles ，您可以使用Circle layer来配置 vector tiles 中 poitns 或 poitns collection 特征的视觉外观。圆层渲染半径以屏幕单位测量的圆。
添加一个 circle layer,你需要添加一个包含点要素的 vector 或者 GeoJSON 类型的 Source.，您可以使用 circle layer属性定义该 source 的外观。比如半径、颜色和偏移。
map.addLayer({
id: 'park-volcanoes',
type: 'circle',
source: 'national-park',
paint: {
'circle-radius': 6,
'circle-color': '#B42222'
}
});
6.5.5. Fill extrusion layer
一个 fill-extrusion style layer 在地图上渲染一个或多个填充（和可选的描边）的挤出（3D）多边形。可以使用填充拉伸层来配置多边形或多边形特征的拉伸和视觉外观。
要添加一个 Fill extrusion layer ，您需要首先添加一个包含面要素的 vector或 GeoJSON 类型的 Source。通常，您会希望数据包含一个数据属性，用于确定 Fill extrusion layer中每个 Featrue 的高度。这可能是以米为单位的物理高度，也可能是说明该地区非物理属性的一种方式，如普查区的人口。添加适当的 source 后，可以使用properties in fill-extrusion layer 来自定义图层的外观（例如，高度、不透明度或颜色）。
map.addLayer({
id: '3d-buildings',
source: 'composite',
'source-layer': 'building',
filter: ['==', 'extrude', 'true'],
type: 'fill-extrusion',
paint: {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'min_height'],
'fill-extrusion-opacity': 0.6
}
});
6.5.6. Hillshade layer
hillshade 样式图层在客户端渲染数字高程模型（DEM）数据。
该实现仅支持由Mapbox Terrain RGB或Mapzen Terrarium图块组成的源。添加适当的源后，可以使用hillshade层中的可用特性自定义层的外观。
map.addSource('dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
});
map.addLayer({
id: 'hillshading',
source: 'dem',
type: 'hillshade'
});
6.5.7. Heatmap layer
热图样式图层渲染一系列颜色，以表示区域中点的密度。
要添加热图图层，您需要首先添加一个包含点数据的 vector 或 GeoJSON 类型的 Source。然后，您可以使用热图图层中的可用特性来自定义图层的外观。
map.addLayer({
id: 'earthquakes-heat',
type: 'heatmap',
source: 'earthquakes',
paint: {
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(33,102,172,0)',
0.2,
'rgb(103,169,207)',
0.4,
'rgb(209,229,240)',
0.6,
'rgb(253,219,199)',
0.8,
'rgb(239,138,98)',
1,
'rgb(178,24,43)'
],
'heatmap-radius': 20
}
});
6.5.8. Raster layer
raster layer，在地图上渲染光栅图块。您可以使用光栅图层来配置光栅图块的颜色参数。
添加一个 Raster Layer。你首先需要添加一个 raster 类型的 Source 。 然后你可以使用 raster layer属性图层的外观。
map.addLayer({
id: 'radar-layer',
type: 'raster',
source: 'radar',
paint: {
'raster-fade-duration': 0
}
});
6.5.9. Background Layer
Background Layer 覆盖整个地图。使用 Background Layer 配置颜色或图案，以在所有其他地图内容下方显示。如果背景图层是透明的或从样式中省略，则地图视图中未显示其他样式图层的任何部分都是透明的。
Background Layer 相关属性
map.addLayer({
type: 'background',
paint: {
'background-color': 'blue',
'background-opacity': 0.3
}
});
6.6. Styling your layers
6.6.1. Work with expressions
在Mapbox GL JS中，您可以将任何布局属性、绘制属性或过滤器的值指定为表达式。表达式定义了如何使用逻辑、数学、字符串或颜色操作组合一个或多个特征属性值或当前缩放级别，以产生适当的样式属性值或过滤器决策。
扫一扫
1330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
