@treasuryspatial/map-kit 0.1.1 → 0.1.3

package/dist/mapLayers.d.ts

@@ -2,6 +2,7 @@ import type { Feature, Polygon } from 'geojson';
 export type FootprintLayerController = {
     setHover: (feature: Feature<Polygon> | null) => void;
     setSelected: (feature: Feature<Polygon> | null) => void;
+    setBuildingsVisible: (visible: boolean) => void;
     destroy: () => void;
 };
 export declare function ensureFootprintLayers(map: mapboxgl.Map): FootprintLayerController;

package/dist/mapLayers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapLayers.d.ts","sourceRoot":"","sources":["../src/mapLayers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiBF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,wBAAwB,CAkFjF"}
+{"version":3,"file":"mapLayers.d.ts","sourceRoot":"","sources":["../src/mapLayers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiBF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,wBAAwB,CA6FjF"}

package/dist/mapLayers.js

@@ -80,6 +80,19 @@ export function ensureFootprintLayers(map) {
     return {
         setHover: (feature) => setSource('footprint-hover', feature),
         setSelected: (feature) => setSource('footprint-selected', feature),
+        setBuildingsVisible: (visible) => {
+            const layers = map.getStyle()?.layers ?? [];
+            layers.forEach((layer) => {
+                if (layer.type !== 'fill-extrusion')
+                    return;
+                try {
+                    map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none');
+                }
+                catch {
+                    // ignore
+                }
+            });
+        },
         destroy: () => {
             const layers = ['footprint-selected-line', 'footprint-hover-line', 'building-footprints-outline', 'building-footprints-fill'];
             layers.forEach((id) => {

package/dist/mapThreeLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;CAC5F,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CA0FhF"}
+{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;CAC5F,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAoJhF"}

package/dist/mapThreeLayer.js

@@ -6,15 +6,22 @@ export function createMapThreeLayer(options) {
     let scene = null;
     let camera = null;
     let renderer = null;
+    let screenScene = null;
+    let screenCamera = null;
+    let screenMaterial = null;
+    let screenQuad = null;
+    let renderTarget = null;
     let rootGroup = null;
     let meshGroup = null;
     let mercatorOrigin = null;
     let meterScale = 1;
     let zOffset = zOffsetMeters;
+    let targetWidth = 0;
+    let targetHeight = 0;
     const layer = {
         id,
         type: 'custom',
-        renderingMode: '3d',
+        renderingMode: '2d',
         onAdd: (map, gl) => {
             mapRef = map;
             scene = new THREE.Scene();
@@ -23,11 +30,33 @@ export function createMapThreeLayer(options) {
                 canvas: map.getCanvas(),
                 context: gl,
                 antialias: true,
+                logarithmicDepthBuffer: true,
             });
             renderer.autoClear = false;
             renderer.outputColorSpace = THREE.SRGBColorSpace;
             renderer.toneMapping = THREE.NeutralToneMapping;
             renderer.toneMappingExposure = 1.05;
+            renderer.setClearColor(0x000000, 0);
+            const canvas = map.getCanvas();
+            targetWidth = canvas.width;
+            targetHeight = canvas.height;
+            renderTarget = new THREE.WebGLRenderTarget(targetWidth, targetHeight, {
+                depthBuffer: true,
+                stencilBuffer: false,
+            });
+            renderTarget.texture.colorSpace = THREE.SRGBColorSpace;
+            renderTarget.texture.premultiplyAlpha = true;
+            screenScene = new THREE.Scene();
+            screenCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+            screenMaterial = new THREE.MeshBasicMaterial({
+                map: renderTarget.texture,
+                transparent: true,
+                depthTest: false,
+                depthWrite: false,
+            });
+            screenMaterial.premultipliedAlpha = true;
+            screenQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), screenMaterial);
+            screenScene.add(screenQuad);
             rootGroup = new THREE.Group();
             rootGroup.matrixAutoUpdate = false;
             scene.add(rootGroup);
@@ -36,8 +65,8 @@ export function createMapThreeLayer(options) {
             if (onInit && renderer && camera)
                 onInit(scene, renderer, camera);
         },
-        render: (_gl, matrix) => {
-            if (!renderer || !scene || !camera || !rootGroup)
+        prerender: (_gl, matrix) => {
+            if (!renderer || !scene || !camera || !rootGroup || !renderTarget)
                 return;
             camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
             if (mercatorOrigin) {
@@ -46,8 +75,25 @@ export function createMapThreeLayer(options) {
                 rootGroup.matrix = new THREE.Matrix4().multiplyMatrices(translate, scale);
                 rootGroup.matrixWorldNeedsUpdate = true;
             }
-            renderer.resetState();
+            const canvas = mapRef?.getCanvas();
+            if (canvas && (canvas.width !== targetWidth || canvas.height !== targetHeight)) {
+                targetWidth = canvas.width;
+                targetHeight = canvas.height;
+                renderTarget.setSize(targetWidth, targetHeight);
+            }
+            renderer.setRenderTarget(renderTarget);
+            renderer.clear(true, true, true);
             renderer.render(scene, camera);
+            renderer.setRenderTarget(null);
+        },
+        render: (gl) => {
+            if (!renderer || !screenScene || !screenCamera)
+                return;
+            renderer.resetState();
+            gl.disable(gl.DEPTH_TEST);
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            renderer.render(screenScene, screenCamera);
             mapRef?.triggerRepaint();
         },
     };
@@ -76,9 +122,19 @@ export function createMapThreeLayer(options) {
             if (rootGroup) {
                 rootGroup.clear();
             }
+            if (screenQuad) {
+                screenQuad.geometry.dispose();
+            }
+            screenMaterial?.dispose();
+            renderTarget?.dispose();
             meshGroup = null;
             scene = null;
             camera = null;
+            screenScene = null;
+            screenCamera = null;
+            screenMaterial = null;
+            screenQuad = null;
+            renderTarget = null;
             renderer = null;
             mapRef = null;
             mercatorOrigin = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treasuryspatial/map-kit",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",