@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
100 lines (99 loc) • 2.9 kB
JavaScript
"use strict";
import mapboxgl from "mapbox-gl";
import { ThreejsLayer } from "./layers/MapboxThreejsLayer";
import { BuildingsLayer } from "./layers/Buildings";
export class MapboxLayersController {
constructor(_options) {
this._options = _options;
}
addLayers() {
const current_style = this._options.map.getStyle();
const layers = current_style.layers;
if (!layers) {
console.warn("no layers found");
return;
}
let label_layer_id = null;
for (const layer of layers) {
if (layer.type == "symbol" && layer.layout["text-field"]) {
label_layer_id = layer.id;
}
}
if (label_layer_id != null) {
this._addLayerBuildings(label_layer_id);
this._addLayerThreejs(label_layer_id);
}
this._addLayer3D();
this._addLayerSky();
this._addZoomControls();
}
// resize(size: Vector2) {
// this._threejsLayer?.resize(size);
// }
_addZoomControls() {
if (!this._options.zoomControls) {
return;
}
const navControl = new mapboxgl.NavigationControl();
this._options.map.addControl(navControl, "bottom-right");
}
_addLayer3D() {
if (!this._options.layer3D) {
return;
}
if (this._options.displayScene.background != null) {
console.warn(
"the scene has the background set, which may prevent the layers from displaying correctly. Make sure to remove the background."
);
}
this._options.map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14
});
this._options.map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
}
_addLayerSky() {
if (!this._options.layerSky) {
return;
}
this._options.map.addLayer({
id: "sky",
type: "sky",
paint: {
"sky-type": "atmosphere",
"sky-atmosphere-sun": [0, 0],
"sky-atmosphere-sun-intensity": 15
}
});
}
_addLayerBuildings(label_layer_id) {
if (!this._options.layerBuildings) {
return;
}
if (this._hasLayerId(BuildingsLayer.id)) {
return;
}
this._options.map.addLayer(BuildingsLayer, label_layer_id);
}
_addLayerThreejs(label_layer_id) {
const options = {
map: this._options.map,
scene: this._options.scene,
camera: this._options.camera,
canvas: this._options.map.getCanvas(),
lngLat: this._options.lngLat,
renderFunc: this._options.renderFunc,
viewer: this._options.viewer
};
this._threejsLayer = new ThreejsLayer(options);
this._options.map.addLayer(this._threejsLayer, label_layer_id);
}
_hasLayerId(layer_id) {
var _a;
const current_style = this._options.map.getStyle();
const layer_ids = ((_a = current_style.layers) == null ? void 0 : _a.map((l) => l.id)) || [];
return layer_ids.includes(layer_id);
}
}