mapbox gl 3d模型贴图的贴图实现方式

最新推荐文章于 2025-07-13 19:45:33 发布

原创最新推荐文章于 2025-07-13 19:45:33 发布 · 6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#mapbox #js #mapbox gl

mapbox 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Mapbox API实现3D建筑渲染，包括设置图层样式、高度及颜色，以及添加纹理贴图的方法。特别注意贴图的大小和平铺效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.map.on(‘load’, function() {
that.map.addLayer({
‘id’: ‘3d-buildings’,
‘source’: ‘composite’,
‘source-layer’: ‘building’,
‘filter’: [’==’, ‘extrude’, ‘true’],
‘type’: ‘fill-extrusion’,
‘minzoom’: 5,
‘paint’: {
‘fill-extrusion-color’: ‘#0166b6’,
‘fill-extrusion-height’: [“interpolate”,[“linear”],[“zoom”],5, 0,5.05,[“get”, “height”]],
‘fill-extrusion-base’: [“interpolate”,[“linear”],[“zoom”],5, 0,5.05,[“get”, “min_height”]],
‘fill-extrusion-pattern’:“catcat”,
‘fill-extrusion-opacity’: 1
},
})
//楼顶
that.map.addLayer({
“id”: “buildingtop”,
‘type’: ‘fill-extrusion’,
“source”: “composite”,
“minzoom”: 5,
“source-layer”: “building”,
‘paint’: {
‘fill-extrusion-color’: “#32373b”,
‘fill-extrusion-height’: [“interpolate”,[“linear”],[“zoom”],5, 0,5.05,[“get”, “height”]],
‘fill-extrusion-base’: [“interpolate”,[“linear”],[“zoom”],5, 0,5.05,[“get”, “height”]],
‘fill-extrusion-opacity’: 1
}
})
that.map.loadImage(“http://127.0.0.1:8081/img/texture.png”, function (error, image) {
if (error) throw error;
that.map.addImage(“catcat”, image);
})
});
在这里插入图片描述
亲测可用：但是要注意的是，这个贴图会被平铺，所以你的图片要尽量做的小一点