Mapbox 教程: 改变地图样式

2024-11-27 来源：个人技术集锦

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

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

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

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

*-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';
    // 初始化地图，初始化参数中可以不含style
    const map = new mapboxgl.Map({
        container: 'map', // 地图容器 ID
        center: [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>

界面效果如下。

教程完毕，快来试试吧。

显示全文

全部栏目

Mapbox 教程: 改变地图样式