Merge pull request #185 from gisat-panther/dev

Dev

.nvmrc

@@ -1 +1 @@
-16
+18

package.json

@@ -32,22 +32,21 @@
 		"react-dom": "^16.13.1 || ^17.0.2 || ^18.1.0 "
 	},
 	"dependencies": {
-		"@deck.gl/core": "^9.0.4",
-		"@deck.gl/extensions": "^9.0.4",
-		"@deck.gl/geo-layers": "^9.0.4",
-		"@deck.gl/layers": "^9.0.4",
-		"@deck.gl/mesh-layers": "^9.0.4",
-		"@deck.gl/react": "^9.0.4",
+		"@deck.gl/core": "^9.0.6",
+		"@deck.gl/extensions": "^9.0.6",
+		"@deck.gl/geo-layers": "^9.0.6",
+		"@deck.gl/layers": "^9.0.6",
+		"@deck.gl/mesh-layers": "^9.0.6",
+		"@deck.gl/react": "^9.0.6",
 		"@gisatcz/cross-package-react-context": "^0.2.0",
-		"@gisatcz/deckgl-geolib": "^1.10.0",
+		"@gisatcz/deckgl-geolib": "^1.10.2-dev.2",
 		"@gisatcz/ptr-atoms": "^1.9.0",
 		"@gisatcz/ptr-core": "^1.8.0",
 		"@gisatcz/ptr-tile-grid": "^0.2.0",
 		"@gisatcz/ptr-utils": "^1.6.0",
 		"@loaders.gl/core": "^4.1.4",
 		"@luma.gl/constants": "^9.0.9",
 		"@luma.gl/core": "^9.0.9",
-		"@luma.gl/webgl-legacy": "^9.0.0-alpha.12",
 		"@mapbox/sphericalmercator": "^1.2.0",
 		"@math.gl/core": "^4.0.1",
 		"@react-leaflet/core": "^2.1.0",

rollup.config.mjs

@@ -94,6 +94,7 @@ export default {
 		'@luma.gl/constants',
 		'@luma.gl/core',
 		'@loaders.gl/core',
+		'@math.gl/core',
 		'@mapbox/sphericalmercator',
 		'georaster',
 		'georaster-layer-for-leaflet',

src/DeckGlMap/index.js

@@ -1,5 +1,4 @@
 import {useCallback, useRef, useState} from 'react';
-import {readPixelsToArray} from '@luma.gl/webgl-legacy';
 import PropTypes from 'prop-types';
 import {isArray as _isArray, isEmpty as _isEmpty} from 'lodash';
 import ReactResizeDetector from 'react-resize-detector';
@@ -73,10 +72,10 @@ const DeckGlMap = ({
 						vectorHoveredItems.push(item);
 					} else if (item.layer instanceof WmsLayer) {
 						//add to raster items
-						//this is path fot tile layer
+						const {device} = item.layer.context;
 						const image =
 							item?.tile?.layers?.[0]?.props?.tile?.layers?.[0]?.props?.image;
-						item.pixelColor = readPixelsToArray(image, {
+						item.pixelColor = device.readPixelsToArrayWebGL(image, {
 							sourceX: event?.bitmap?.pixel?.[0],
 							sourceY: event?.bitmap?.pixel?.[1],
 							sourceWidth: 1,
@@ -365,12 +364,19 @@ const DeckGlMap = ({
 	const getCogTerrainLayer = layer => {
 		const {key, options} = layer;
 
-		const {url, ...restOptions} = options;
+		const {url, terrainOptions, ...restOptions} = options;
 
-		return new CogTerrainLayer(key, url, {
-			...restOptions,
-			onClick: onRasterLayerClick, //TODO add support for click in library
-		});
+		return new CogTerrainLayer(
+			{
+				id: key,
+				elevationData: url,
+				onClick: onRasterLayerClick,
+				...restOptions,
+			},
+			{
+				...terrainOptions,
+			}
+		);
 	};
 
 	/**

src/DeckGlMap/layers/VectorLayer.js

@@ -2,7 +2,7 @@ import {CompositeLayer} from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {_TerrainExtension as TerrainExtension} from '@deck.gl/extensions';
 import TiledVectorLayer from './TiledVectorLayer';
-import {getGlobalFeatureId, GEOM_TYPES} from './utils/find-index-binary';
+import {GEOM_TYPES} from './utils/find-index-binary';
 
 import {
 	forIn as _forIn,
@@ -16,27 +16,34 @@ import constants from '../../constants';
 import {binaryToFeatureForAccessor} from './utils/geojson-binary';
 import {distinctColours} from '@gisatcz/ptr-core';
 
-/**
- *
- * @param {Object} data - The data in binary format
- * @param {*} index of the feature in data
- * @returns
- */
-const findFeatureIDBinary = (data, index) => {
+const findFeatureIndexBinary = (data, index, indices) => {
+	let featureIndex;
+	if ('startIndices' in data) {
+		featureIndex = data.startIndices[index];
+	} else {
+		featureIndex = indices.value[index];
+	}
+	return featureIndex;
+};
+
+const addIdsToProperties = features => {
 	for (const gt of GEOM_TYPES) {
-		const globalFeatureId = data[gt] && getGlobalFeatureId(data[gt], index);
-		if (globalFeatureId >= 0) {
-			if (
-				data[gt].fields[globalFeatureId] &&
-				Object.hasOwn(data[gt].fields[globalFeatureId], 'id')
-			) {
-				return data[gt].fields[globalFeatureId].id;
-			} else {
-				return -1;
-			}
-		}
+		features[gt].properties.forEach((prop, i) => {
+			prop.ID = features[gt].fields[i].id;
+		});
+	}
+};
+
+const findFeatureIDBinary = (data, index, indices) => {
+	let featureIndex;
+	if ('startIndices' in data) {
+		featureIndex = findFeatureIndexBinary(data, index, indices);
+		return data.featureIds.value[featureIndex];
+	} else {
+		featureIndex = findFeatureIndexBinary(data, index, indices);
+		const globalFeatureId = data.globalFeatureIds.value[featureIndex];
+		return data.fields[globalFeatureId].id;
 	}
-	return -1;
 };
 
 // TODO handle different selections
@@ -111,17 +118,24 @@ class VectorLayer extends CompositeLayer {
 					features?.[type]?.positions.value.length /
 					features?.[type]?.positions.size;
 			}
-			let keys = [];
-			let properties = [];
+			const keys = [];
+			const properties = [];
+			const featureIndexes = [];
+
 			for (let index = 0; index < length; index++) {
 				// Get feature id which is defined on feature level in MVT tile
 				// TODO - check if getting ID this way is correct if MVT tile contains points, lines and polygons
-				const key = findFeatureIDBinary(features, index);
-
+				const key = findFeatureIDBinary(features?.[type], index, indices);
+				const featureIndex = findFeatureIndexBinary(
+					features?.[type],
+					index,
+					indices
+				);
+				featureIndexes.push(featureIndex);
 				keys.push(key);
 
 				properties.push(
-					binaryToFeatureForAccessor(features?.[type], index, indices)
+					binaryToFeatureForAccessor(features?.[type], featureIndex)
 				);
 			}
 
@@ -216,21 +230,14 @@ class VectorLayer extends CompositeLayer {
 	 * @param info {Object}
 	 * @returns {Object} DeckGl-ready style object
 	 */
-	getDefaultFeatureStyle(fidColumnName, feature, info) {
-		let extendedFeature;
+	getDefaultFeatureStyle(fidColumnName, feature) {
 		if (this.isBinary()) {
-			const id = findFeatureIDBinary(this.props.options.features, info.index);
-			extendedFeature = {
-				id,
-				...feature,
-			};
+			const id = feature.properties[fidColumnName || 'ID'];
+			return this.state?.styleByFeatureKey?.[id] || null;
+		} else if (fidColumnName) {
+			const featureKey = featureHelpers.getKey(fidColumnName, feature);
+			return this.state?.styleByFeatureKey?.[featureKey] || null;
 		}
-
-		const featureKey = featureHelpers.getKey(
-			fidColumnName,
-			extendedFeature || feature
-		);
-		return this.state?.styleByFeatureKey?.[featureKey] || null;
 	}
 
 	/**
@@ -239,12 +246,8 @@ class VectorLayer extends CompositeLayer {
 	 * @param feature {GeoJSONFeature}
 	 * @returns {Array} Array representing RGBA channels
 	 */
-	getFeatureFill(style, fidColumnName, feature, info) {
-		const defaultStyle = this.getDefaultFeatureStyle(
-			fidColumnName,
-			feature,
-			info
-		);
+	getFeatureFill(style, fidColumnName, feature) {
+		const defaultStyle = this.getDefaultFeatureStyle(fidColumnName, feature);
 		// if no fill defined, make fill transparent
 		if (defaultStyle?.fill) {
 			return styleHelpers.getRgbaColorArray(
@@ -262,12 +265,8 @@ class VectorLayer extends CompositeLayer {
 	 * @param feature {GeoJSONFeature}
 	 * @returns {Array} Array representing RGBA channels
 	 */
-	getFeatureOutlineColor(style, fidColumnName, feature, info) {
-		const defaultStyle = this.getDefaultFeatureStyle(
-			fidColumnName,
-			feature,
-			info
-		);
+	getFeatureOutlineColor(style, fidColumnName, feature) {
+		const defaultStyle = this.getDefaultFeatureStyle(fidColumnName, feature);
 		return styleHelpers.getRgbaColorArray(
 			defaultStyle?.outlineColor,
 			defaultStyle?.outlineOpacity
@@ -280,12 +279,8 @@ class VectorLayer extends CompositeLayer {
 	 * @param feature {GeoJSONFeature}
 	 * @returns {number}
 	 */
-	getPointRadius(style, fidColumnName, feature, info) {
-		const defaultStyle = this.getDefaultFeatureStyle(
-			fidColumnName,
-			feature,
-			info
-		);
+	getPointRadius(style, fidColumnName, feature) {
+		const defaultStyle = this.getDefaultFeatureStyle(fidColumnName, feature);
 		return defaultStyle?.size && defaultStyle.size / 2;
 	}
 
@@ -295,12 +290,8 @@ class VectorLayer extends CompositeLayer {
 	 * @param feature {GeoJSONFeature}
 	 * @returns {number}
 	 */
-	getFeatureOutlineWidth(style, fidColumnName, feature, info) {
-		const defaultStyle = this.getDefaultFeatureStyle(
-			fidColumnName,
-			feature,
-			info
-		);
+	getFeatureOutlineWidth(style, fidColumnName, feature) {
+		const defaultStyle = this.getDefaultFeatureStyle(fidColumnName, feature);
 		return defaultStyle?.outlineWidth;
 	}
 
@@ -401,6 +392,9 @@ class VectorLayer extends CompositeLayer {
 
 		let revizedFeatures = [];
 		if (this.isBinary()) {
+			if (!fidColumnName) {
+				addIdsToProperties(features);
+			}
 			revizedFeatures = features;
 		} else {
 			revizedFeatures = this.props.omittedFeatureKeys

src/DeckGlMap/layers/utils/geojson-binary.js

@@ -6,19 +6,17 @@
 /**
  * Return the feature for an accessor
  */
-export function binaryToFeatureForAccessor(data, index, indices) {
+export function binaryToFeatureForAccessor(data, index) {
 	if (!data) {
 		return null;
 	}
 
-	// const featureIndex =
-	// 	'startIndices' in data ? data.startIndices[index] : index;
-	const startIndex = indices.value[index];
-	const featureId = data.globalFeatureIds.value[startIndex];
-	// const geometryIndex = data.featureIds.value[startIndex];
+	const featureIndex =
+		'startIndices' in data ? data.startIndices[index] : index;
+	const geometryIndex = data.featureIds.value[featureIndex];
 
-	if (featureId !== -1) {
-		return getPropertiesForIndex(data, startIndex, startIndex);
+	if (featureIndex !== -1) {
+		return getPropertiesForIndex(data, geometryIndex, featureIndex);
 	}
 
 	return null;