Mapbox 教程: 改变地图样式

注：相关功能在Mapbox GL JS v3中可用。在新版本中，默认使用标准样式，在创建地图时，可以在构造函数中明确指定style option 设置指定样式，也可以不设置style option 从而使用默认样式。

本示例通过Mapbox加载了一份带三维白膜的地图。可以看到埃菲尔铁塔等建筑模型。可以看到Mapbox二三维展示效果还是非常赞的，也非常流畅。

本示例在地图上添加了一个点击交互界面，可以修改Mapbox地图标准样式的一些参数。另外这个示例也增加了一个自定义图层。对于GIS是什么的问题，其中一个答案是GIS就是数据库。我觉得Mapbox的架构师大概是这种说法的拥趸。在Mapbox中，要添加一个图层，需要首先addSource添加数据源，然后再addLayer添加图层，就像是数据库里面，先指定数据源，再指定表名和查询条件，来获取数据。

点击交互组件上与属性关联的按钮，调用setConfigPropety方法来修改属性关联的样式，basemap关键字指代标准样式。

*-emissive-strength样式的新属性，例如 line-emissive-strength,可以控制照射到模型上的光照强度。调整 line-emissive-strength属性，可以提高线的亮度，尤其是在更暗的光照设置下，会更加明显。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change a map's style configuration property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>.map-overlay {font:12px/20px 'Helvetica Neue',Arial,Helvetica,sans-serif;position: absolute;width: 200px;top: 0;left: 0;padding: 10px;}.map-overlay .map-overlay-inner {background-color: #fff;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);border-radius: 3px;padding: 10px;margin-bottom: 10px;}.map-overlay-inner fieldset {display: flex;justify-content: space-between;border: none;}.map-overlay-inner label {font-weight: bold;margin-right: 10px;}.map-overlay-inner .select-fieldset {display: block;}.map-overlay-inner .select-fieldset label {display: block;margin-bottom: 5px;}.map-overlay-inner .select-fieldset select {width: 100%;}
</style><div id="map"></div><div class="map-overlay top"><div class="map-overlay-inner"><fieldset class="select-fieldset"><label>Select light preset</label><select id="lightPreset" name="lightPreset"><!-- Each value matches a light preset --><option value="dawn">Dawn</option><option value="day" selected="">Day</option><option value="dusk">Dusk</option><option value="night">Night</option></select></fieldset><fieldset><label for="showPlaceLabels">Show place labels</label><input type="checkbox" id="showPlaceLabels" checked=""></fieldset><fieldset><label for="showPointOfInterestLabels">Show POI labels</label><input type="checkbox" id="showPointOfInterestLabels" checked=""></fieldset><fieldset><label for="showRoadLabels">Show road labels</label><input type="checkbox" id="showRoadLabels" checked=""></fieldset><fieldset><label for="showTransitLabels">Show transit labels</label><input type="checkbox" id="showTransitLabels" checked=""></fieldset></div>
</div><script>// 请通过https://account.mapbox.com申请自己的mapboxgl.accessToken = 'pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w';// 初始化地图，初始化参数中可以不含styleconst map = new mapboxgl.Map({container: 'map', // 地图容器 IDcenter: [2.2932, 48.86069], // 初始位置 [lng, lat]zoom: 15.1, // 初始缩放级别pitch: 62, // 初始倾斜角度bearing: -20 // 初始渲染角度});// 样式加载完成后，在地图上添加一条线map.on('style.load', () => {map.addSource('line', {type: 'geojson',lineMetrics: true,data: {type: 'LineString',coordinates: [[2.293389857555951, 48.85896319631851],[2.2890810326441624, 48.86174223718291]]}});map.addLayer({id: 'line',source: 'line',type: 'line',paint: {'line-width': 12,//  `*-emissive-strength` 属性控制照射到物体上的光照强度。// 加大 `line-emissive-strength`的数值，可以提升线在暗色光照下的亮度。 'line-emissive-strength': 0.8,'line-gradient': ['interpolate',['linear'],['line-progress'],0,'red',1,'blue']}});});// 设置交互界面document.getElementById('lightPreset').addEventListener('change', function () {//为下拉框添加change事件响应函数map.setConfigProperty('basemap', 'lightPreset', this.value);});document.querySelectorAll('.map-overlay-inner input[type="checkbox"]')// 获取交互组件中的checkbox.forEach((checkbox) => {checkbox.addEventListener('change', function () {// 为checkbox添加change事件响应函数map.setConfigProperty('basemap', this.id, this.checked);});});
</script></body>
</html>

界面效果如下。修改代码调整line-emissive-strength的值，在光照调整为夜晚的情况下，line-emissive-strength0.8和0.1的区别如下，图中埃菲尔铁塔到特洛卡代罗花园的连线亮度变化明显。