![](/img/trans.png)
[英]How to change center Latitude and Longitude of a mapbox-gl in react js?
[英]react mapbox-gl custom layer with three js unexpected ordering
我正在研究 mapbox gl 以使用自定义图层显示 gltf 建筑物,并且我正在显示 mapbox 提供的默认 3d 建筑物,如下所示:
export default {
id: '3d-buildings',
source: 'composite',
'source-layer': 'building',
filter: [
'all',
['!=', ['id'], 59],
['!=', ['id'], 88],
['!=', ['id'], 79],
['!=', ['id'], 78],
['!=', ['id'], 80],
['!=', ['id'], 32],
['!=', ['id'], 8],
['!=', ['id'], 2],
['!=', ['id'], 4],
['!=', ['id'], 22],
['!=', ['id'], 3],
['!=', ['id'], 5],
['!=', ['id'], 60]
],
type: 'fill-extrusion',
minzoom: 1,
paint: {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
'fill-extrusion-opacity': 1
}
};
我正在使用过滤器从 map 中删除一些建筑物。 这里我如何使用threebox显示自定义层:
import Threebox from '../../../../../threebox/Threebox';
export default (buildings) => {
return {
id: '3d-layer',
type: 'custom',
renderingMode: '3d',
onAdd: function(map, gl) {
map.moveLayer('3d-buildings', '3d-layer');
this.tb = new Threebox(map, gl);
let allBuildings = buildings;
this.tb.defaultLights();
for (let i = 0; i < allBuildings.length; i++) {
this.tb.loadObj({obj: allBuildings[i].url, scale: 0.08, rotation: allBuildings[i].rotation, building: allBuildings[i].id}, obj => {
obj.setCoords(allBuildings[i].coordinates);
this.tb.add(obj);
});
}
},
render: function(map, gl) {
map.clear(map.DEPTH_BUFFER_BIT);
this.tb.update();
}
};
};
如您所见,自定义图层建筑物显示在3d-buildings
图层的顶部。 我已经搜索了 web 来解决问题没有结果。 如果有人可以帮助我解决它,我很感激。 谢谢
我已经在我的[Threebox fork]微调 CameraSync object 中解决了这个问题,改变了最近和最远的计算。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.