当前位置：首页 > news >正文

二、mapbox-gl实现白膜立体建筑

news 2025/7/14 22:26:47

有时候我们只有二维的面数据，怎么实现类似高德地图中的白膜立体建筑呢？在mapbox-gl中很容易实现，具体如下。
要在Vue中结合Mapbox显示自定义的GeoJSON数据，并实现建筑物的白膜效果，我们需要执行以下步骤：

安装Mapbox GL JS
创建Vue组件并加载Mapbox地图
添加自定义GeoJSON数据源
设置fill-extrusion图层来渲染建筑物
设置样式以实现白膜效果

1. 安装Mapbox GL JS

首先需要安装 mapbox-gl 包：

npm install mapbox-gl

2. 创建Vue组件

在Vue组件中，我们将配置并初始化Mapbox地图。

<template><div ref="mapContainer" class="map-container"></div>
</template><script>
import mapboxgl from 'mapbox-gl';
import "mapbox-gl/dist/mapbox-gl.css";export default {name: 'MapComponent',data() {return {map: null, // 地图实例geojsonData: {type: 'FeatureCollection',features: [{type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[118.997, 40.730],[118.996, 40.731],[118.995, 40.730],[118.996, 40.729],[118.997, 40.730]]]},properties: {height: 100, // 建筑物的高度min_height: 10, // 建筑物的最小高度}}]}};},mounted() {this.initMap();},methods: {initMap() {mapboxgl.accessToken = 'your_mapbox_access_token_here'; // 替换为您的Mapbox访问令牌// 初始化地图this.map = new mapboxgl.Map({container: this.$refs.mapContainer,style: 'mapbox://styles/mapbox/streets-v11', // 使用Mapbox默认样式center: [118.995, 40.730], // 初始视角zoom: 15, // 初始缩放级别});// 在地图加载完成后添加自定义的GeoJSON数据this.map.on('load', () => {// 添加GeoJSON数据源this.map.addSource('custom-buildings', {type: 'geojson',data: this.geojsonData, // 使用自定义的GeoJSON数据});// 添加建筑物层（白膜效果）this.map.addLayer({id: '3d-buildings',type: 'fill-extrusion',source: 'custom-buildings',paint: {'fill-extrusion-color': '#ffffff', // 设置白膜颜色'fill-extrusion-opacity': 0.6, // 设置透明度'fill-extrusion-height': ['get', 'height'], // 高度设置'fill-extrusion-base': ['get', 'min_height'], // 基础高度}});// 可选：设置光源，让建筑物更具立体感this.map.setLight({anchor: 'viewport',color: '#ffffff',intensity: 0.8,});});}},beforeDestroy() {if (this.map) {this.map.remove();}}
};
</script><style scoped>
.map-container {width: 100%;height: 100vh;
}
</style>

3. 代码解释

Mapbox初始化：
使用Mapbox GL JS在mounted钩子中初始化地图，并指定地图容器、样式、中心点和缩放级别。
自定义GeoJSON数据：
自定义的建筑物数据存储在geojsonData对象中，其中每个建筑物都有height和min_height属性，分别表示建筑物的高度和最小高度。
添加GeoJSON数据源：
在地图加载后，我们通过 map.addSource 添加自定义的GeoJSON数据源，并通过fill-extrusion类型的图层展示建筑物。
白膜效果：
- 使用fill-extrusion-color设置建筑物的颜色为白色。
- 使用fill-extrusion-opacity设置透明度。
- 使用fill-extrusion-height和fill-extrusion-base分别设置建筑物的实际高度和基础高度。
光照效果：
使用map.setLight调整光源，使建筑物呈现更具立体感的效果。

4. 运行效果

地图显示中心会在[ 118.996, 40.730 ]处，并加载自定义的GeoJSON数据。
该GeoJSON数据表示一个建筑物，其高度为100米，最小高度为10米。
建筑物会呈现白色的透明效果（即白膜效果），并根据设置的光照和透明度显示。

5. 可选的增强

动态添加和更新数据：
如果您需要动态更新GeoJSON数据，您可以通过 map.getSource('custom-buildings').setData(newGeojsonData) 来更新数据源。
交互：
可以在地图上添加交互功能，例如点击建筑物时高亮显示，或弹出详细信息框。
多建筑物支持：
GeoJSON数据中可以包含多个建筑物，只需在 geojsonData.features 中添加多个建筑物对象即可。