@polygonjs/plugin-mapbox
Version:
Mapbox plugin for the 3D engine https://polygonjs.com
106 lines (105 loc) • 2.96 kB
JavaScript
import { ThreejsLayer } from "../layers/Threejs";
import { BuildingsLayer } from "../layers/Buildings";
export class MapboxViewerLayersController {
constructor(_viewer) {
this._viewer = _viewer;
}
addLayers() {
if (!this._viewer.mapLoaded()) {
console.warn("map not loaded");
return;
}
const map = this._viewer.map();
if (!map) {
console.warn("no map found");
return;
}
const current_style = map.getStyle();
const layers = current_style.layers;
if (!layers) {
console.warn("no layers found");
return;
}
let label_layer_id = null;
for (let layer of layers) {
if (layer.type == "symbol" && layer.layout["text-field"]) {
label_layer_id = layer.id;
}
}
const cameraNode = this._viewer.cameraNode();
if (label_layer_id != null) {
this._addLayerBuildings(map, label_layer_id, cameraNode);
this._addLayerThreejs(map, label_layer_id);
}
this._addLayer3D(map, cameraNode);
this._addLayerSky(map, cameraNode);
}
resize(size) {
var _a;
(_a = this._threejsLayer) == null ? void 0 : _a.resize(size);
}
_addLayer3D(map, cameraNode) {
if (!cameraNode.pv.tlayer3D) {
return;
}
const scene = cameraNode.scene().threejsScene();
if (scene.background != null) {
console.warn("the scene has the background set, which may prevent the layers from displaying correctly. Make sure to remove the background.");
}
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
}
_addLayerSky(map, cameraNode) {
if (!cameraNode.pv.tlayerSky) {
return;
}
map.addLayer({
id: "sky",
type: "sky",
paint: {
"sky-type": "atmosphere",
"sky-atmosphere-sun": [0, 0],
"sky-atmosphere-sun-intensity": 15
}
});
}
_addLayerBuildings(map, label_layer_id, cameraNode) {
if (!map) {
return;
}
if (!cameraNode.pv.tlayerBuildings) {
return;
}
if (this._hasLayerId(BuildingsLayer.id)) {
return;
}
map.addLayer(BuildingsLayer, label_layer_id);
}
_addLayerThreejs(map, label_layer_id) {
if (!map) {
return;
}
const cameraNode = this._viewer.cameraNode();
if (!cameraNode) {
console.warn("no cameraNode found");
return;
}
this._threejsLayer = new ThreejsLayer(cameraNode, cameraNode.scene().threejsScene(), this._viewer);
map.addLayer(this._threejsLayer, label_layer_id);
}
_hasLayerId(layer_id) {
var _a;
const map = this._viewer.map();
if (map) {
const current_style = map.getStyle();
const layer_ids = ((_a = current_style.layers) == null ? void 0 : _a.map((l) => l.id)) || [];
return layer_ids.includes(layer_id);
}
return false;
}
}