qwc2 2025.10.9 → 2025.10.14

package/plugins/map3d/Identify3D.js

@@ -1,18 +1,289 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import axios from"axios";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{BufferGeometry,Float32BufferAttribute,Mesh,MeshStandardMaterial,Raycaster,Vector2}from"three";import ResizeableWindow from"../../components/ResizeableWindow";import{TileMeshHelper}from"../../components/map3d/utils/MiscUtils3D";import LocaleUtils from"../../utils/LocaleUtils";import"../../components/style/IdentifyViewer.css";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import axios from 'axios';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+import { BufferGeometry, Float32BufferAttribute, Mesh, MeshStandardMaterial, Raycaster, Vector2 } from 'three';
+import ResizeableWindow from '../../components/ResizeableWindow';
+import { TileMeshHelper } from '../../components/map3d/utils/MiscUtils3D';
+import LocaleUtils from '../../utils/LocaleUtils';
+import '../../components/style/IdentifyViewer.css';
+
+/**
  * Query attributes of objects in the 3D map.
- */var Identify3D=/*#__PURE__*/function(_React$Component){function Identify3D(){var _this;_classCallCheck(this,Identify3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Identify3D,[].concat(args));_defineProperty(_this,"state",{pickAttrs:null});_defineProperty(_this,"clear",function(){_this.setState({pickAttrs:null});_this.props.sceneContext.removeSceneObject("__identify3d_highlight")});_defineProperty(_this,"identifyOnRelease",function(ev){if(ev.button!==0){return}ev.view.addEventListener("pointerup",_this.identify,{once:true});ev.view.addEventListener("pointermove",function(){ev.view.removeEventListener("pointerup",_this.identify)},{once:true})});_defineProperty(_this,"identify",function(ev){if(_this.props.identifyEnabled!==true){return}_this.clear();// Setup raycaster
-var raycaster=new Raycaster;raycaster.firstHitOnly=true;var camera=_this.props.sceneContext.scene.view.camera;var rect=ev.target.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-((ev.clientY-rect.top)/rect.height)*2+1;raycaster.setFromCamera(new Vector2(x,y),camera);var picks=[];Object.entries(_this.props.sceneContext.sceneObjects).forEach(function(_ref){var _object$tiles;var _ref2=_slicedToArray(_ref,2),objId=_ref2[0],options=_ref2[1];if(!options.layertree||!options.visibility){return}var object=_this.props.sceneContext.getSceneObject(objId);if((_object$tiles=object.tiles)!==null&&_object$tiles!==void 0&&_object$tiles.raycast){var intersections=[];object.tiles.raycast(raycaster,intersections);intersections.forEach(function(entry){entry.isTilePick=true});picks.push.apply(picks,intersections)}else{picks.push.apply(picks,_toConsumableArray(raycaster.intersectObjects([object],true)))}});picks.sort(function(a,b){return a.distance-b.distance});if(isEmpty(picks)){return}else if(picks[0].isTilePick){_this.identifyTilePick(picks[0])}else{_this.identifyObjectPick(picks[0])}});_defineProperty(_this,"identifyTilePick",function(pick){var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var helper=new TileMeshHelper(pick.object);if(!helper.isValid()){return}var pickFeatureId=helper.getFeatureId(pick.face);var featureAttrs=helper.getFeatureProperties(pickFeatureId);// Extract feature geometry
-var pickPosition=[];var pickNormal=[];helper.forEachFeatureTriangle(pickFeatureId,function(i0,i1,i2){pickPosition.push(posAttr.getX(i0),posAttr.getY(i0),posAttr.getZ(i0));pickPosition.push(posAttr.getX(i1),posAttr.getY(i1),posAttr.getZ(i1));pickPosition.push(posAttr.getX(i2),posAttr.getY(i2),posAttr.getZ(i2));pickNormal.push(norAttr.getX(i0),norAttr.getY(i0),norAttr.getZ(i0));pickNormal.push(norAttr.getX(i1),norAttr.getY(i1),norAttr.getZ(i1));pickNormal.push(norAttr.getX(i2),norAttr.getY(i2),norAttr.getZ(i2))});// Add selection object
-_this.addHiglightGeometry(pick.object.matrixWorld,pickPosition,pickNormal);// Gather extra attributes
-if(_this.props.tileInfoServiceUrl){var _helper$getTileUserDa=helper.getTileUserData(),tilesetName=_helper$getTileUserDa.tilesetName,featureIdAttr=_helper$getTileUserDa.featureIdAttr;var url=_this.props.tileInfoServiceUrl.replace("{tileset}",tilesetName).replace("{objectid}",featureAttrs[featureIdAttr]);axios.get(url).then(function(response){response.data.forEach(function(attr){if(attr.name in featureAttrs&&featureAttrs[attr.name]===attr.value){// Use attribute alias
-delete featureAttrs[attr.name]}featureAttrs[attr.alias]=attr.value});_this.setState({pickAttrs:featureAttrs})})["catch"](function(){_this.setState({pickAttrs:featureAttrs})})}else{_this.setState({pickAttrs:featureAttrs})}});_defineProperty(_this,"identifyObjectPick",function(pick){var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var index=pick.object.geometry.getIndex();// Add selection object
-_this.addHiglightGeometry(pick.object.matrixWorld,posAttr.array,norAttr===null||norAttr===void 0?void 0:norAttr.array,index);// Set pick attrs
-_this.setState({pickAttrs:pick.object.userData})});_defineProperty(_this,"addHiglightGeometry",function(matrixWorld,position,normal){var index=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var material=new MeshStandardMaterial({color:16711680});var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute(position,3));if(normal){geometry.setAttribute("normal",new Float32BufferAttribute(normal,3))}geometry.setIndex(index);var mesh=new Mesh(geometry,material);mesh.applyMatrix4(matrixWorld);mesh.updateMatrixWorld();mesh.receiveShadow=true;_this.props.sceneContext.addSceneObject("__identify3d_highlight",mesh)});return _this}_inherits(Identify3D,_React$Component);return _createClass(Identify3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.sceneContext.scene.viewport.addEventListener("pointerdown",this.identifyOnRelease)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!this.props.identifyEnabled&&prevProps.identifyEnabled){this.clear()}}},{key:"render",value:function render(){if(this.state.pickAttrs===null){return null}return/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:this.props.geometry.side,icon:"info-sign",initialHeight:this.props.geometry.initialHeight,initialWidth:this.props.geometry.initialWidth,initialX:this.props.geometry.initialX,initialY:this.props.geometry.initialY,initiallyDocked:this.props.geometry.initiallyDocked,onClose:this.clear,title:LocaleUtils.tr("identify.title")},/*#__PURE__*/React.createElement("div",{className:"identify-body",role:"body"},isEmpty(this.state.pickAttrs)?/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement("i",null,LocaleUtils.tr("identify.noattributes"))):/*#__PURE__*/React.createElement("div",{className:"identify-result-box"},/*#__PURE__*/React.createElement("table",{className:"attribute-list"},/*#__PURE__*/React.createElement("tbody",null,Object.entries(this.state.pickAttrs).map(function(_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],value=_ref4[1];return/*#__PURE__*/React.createElement("tr",{key:key},/*#__PURE__*/React.createElement("td",{className:"identify-attr-title"},/*#__PURE__*/React.createElement("i",null,key)),/*#__PURE__*/React.createElement("td",{className:"identify-attr-value"},value.toString()))}))))))}}])}(React.Component);_defineProperty(Identify3D,"propTypes",{/** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool,side:PropTypes.string}),identifyEnabled:PropTypes.bool,sceneContext:PropTypes.object,/** URL to service for querying additional tile information.
-         * Can contain the `{tileset}` and `{objectid}` placeholders.
-         * Expected to return a JSON dict with attributes.*/tileInfoServiceUrl:PropTypes.string});_defineProperty(Identify3D,"defaultProps",{geometry:{initialWidth:240,initialHeight:320,initialX:0,initialY:0,initiallyDocked:false,side:"left"}});export default connect(function(state){return{identifyEnabled:state.task.identifyEnabled}},{})(Identify3D);
+ */
+var Identify3D = /*#__PURE__*/function (_React$Component) {
+  function Identify3D() {
+    var _this;
+    _classCallCheck(this, Identify3D);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Identify3D, [].concat(args));
+    _defineProperty(_this, "state", {
+      pickAttrs: null
+    });
+    _defineProperty(_this, "clear", function () {
+      _this.setState({
+        pickAttrs: null
+      });
+      _this.props.sceneContext.removeSceneObject("__identify3d_highlight");
+    });
+    _defineProperty(_this, "identifyOnRelease", function (ev) {
+      if (ev.button !== 0) {
+        return;
+      }
+      ev.view.addEventListener('pointerup', _this.identify, {
+        once: true
+      });
+      ev.view.addEventListener('pointermove', function () {
+        ev.view.removeEventListener('pointerup', _this.identify);
+      }, {
+        once: true
+      });
+    });
+    _defineProperty(_this, "identify", function (ev) {
+      if (_this.props.identifyEnabled !== true) {
+        return;
+      }
+      _this.clear();
+
+      // Setup raycaster
+      var raycaster = new Raycaster();
+      raycaster.firstHitOnly = true;
+      var camera = _this.props.sceneContext.scene.view.camera;
+      var rect = ev.target.getBoundingClientRect();
+      var x = (ev.clientX - rect.left) / rect.width * 2 - 1;
+      var y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
+      raycaster.setFromCamera(new Vector2(x, y), camera);
+      var picks = [];
+      Object.entries(_this.props.sceneContext.sceneObjects).forEach(function (_ref) {
+        var _object$tiles;
+        var _ref2 = _slicedToArray(_ref, 2),
+          objId = _ref2[0],
+          options = _ref2[1];
+        if (!options.layertree || !options.visibility) {
+          return;
+        }
+        var object = _this.props.sceneContext.getSceneObject(objId);
+        if ((_object$tiles = object.tiles) !== null && _object$tiles !== void 0 && _object$tiles.raycast) {
+          var intersections = [];
+          object.tiles.raycast(raycaster, intersections);
+          intersections.forEach(function (entry) {
+            entry.isTilePick = true;
+          });
+          picks.push.apply(picks, intersections);
+        } else {
+          picks.push.apply(picks, _toConsumableArray(raycaster.intersectObjects([object], true)));
+        }
+      });
+      picks.sort(function (a, b) {
+        return a.distance - b.distance;
+      });
+      if (isEmpty(picks)) {
+        return;
+      } else if (picks[0].isTilePick) {
+        _this.identifyTilePick(picks[0]);
+      } else {
+        _this.identifyObjectPick(picks[0]);
+      }
+    });
+    _defineProperty(_this, "identifyTilePick", function (pick) {
+      var posAttr = pick.object.geometry.getAttribute('position');
+      var norAttr = pick.object.geometry.getAttribute('normal');
+      var helper = new TileMeshHelper(pick.object);
+      if (!helper.isValid()) {
+        return;
+      }
+      var pickFeatureId = helper.getFeatureId(pick.face);
+      var featureAttrs = helper.getFeatureProperties(pickFeatureId);
+
+      // Extract feature geometry
+      var pickPosition = [];
+      var pickNormal = [];
+      helper.forEachFeatureTriangle(pickFeatureId, function (i0, i1, i2) {
+        pickPosition.push(posAttr.getX(i0), posAttr.getY(i0), posAttr.getZ(i0));
+        pickPosition.push(posAttr.getX(i1), posAttr.getY(i1), posAttr.getZ(i1));
+        pickPosition.push(posAttr.getX(i2), posAttr.getY(i2), posAttr.getZ(i2));
+        pickNormal.push(norAttr.getX(i0), norAttr.getY(i0), norAttr.getZ(i0));
+        pickNormal.push(norAttr.getX(i1), norAttr.getY(i1), norAttr.getZ(i1));
+        pickNormal.push(norAttr.getX(i2), norAttr.getY(i2), norAttr.getZ(i2));
+      });
+
+      // Add selection object
+      _this.addHiglightGeometry(pick.object.matrixWorld, pickPosition, pickNormal);
+
+      // Gather extra attributes
+      if (_this.props.tileInfoServiceUrl) {
+        var _helper$getTileUserDa = helper.getTileUserData(),
+          tilesetName = _helper$getTileUserDa.tilesetName,
+          featureIdAttr = _helper$getTileUserDa.featureIdAttr;
+        var url = _this.props.tileInfoServiceUrl.replace('{tileset}', tilesetName).replace('{objectid}', featureAttrs[featureIdAttr]);
+        axios.get(url).then(function (response) {
+          response.data.forEach(function (attr) {
+            if (attr.name in featureAttrs && featureAttrs[attr.name] === attr.value) {
+              // Use attribute alias
+              delete featureAttrs[attr.name];
+            }
+            featureAttrs[attr.alias] = attr.value;
+          });
+          _this.setState({
+            pickAttrs: featureAttrs
+          });
+        })["catch"](function () {
+          _this.setState({
+            pickAttrs: featureAttrs
+          });
+        });
+      } else {
+        _this.setState({
+          pickAttrs: featureAttrs
+        });
+      }
+    });
+    _defineProperty(_this, "identifyObjectPick", function (pick) {
+      var posAttr = pick.object.geometry.getAttribute('position');
+      var norAttr = pick.object.geometry.getAttribute('normal');
+      var index = pick.object.geometry.getIndex();
+      // Add selection object
+      _this.addHiglightGeometry(pick.object.matrixWorld, posAttr.array, norAttr === null || norAttr === void 0 ? void 0 : norAttr.array, index);
+
+      // Set pick attrs
+      _this.setState({
+        pickAttrs: pick.object.userData
+      });
+    });
+    _defineProperty(_this, "addHiglightGeometry", function (matrixWorld, position, normal) {
+      var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      var material = new MeshStandardMaterial({
+        color: 0xff0000
+      });
+      var geometry = new BufferGeometry();
+      geometry.setAttribute('position', new Float32BufferAttribute(position, 3));
+      if (normal) {
+        geometry.setAttribute('normal', new Float32BufferAttribute(normal, 3));
+      }
+      geometry.setIndex(index);
+      var mesh = new Mesh(geometry, material);
+      mesh.applyMatrix4(matrixWorld);
+      mesh.updateMatrixWorld();
+      mesh.receiveShadow = true;
+      _this.props.sceneContext.addSceneObject("__identify3d_highlight", mesh);
+    });
+    return _this;
+  }
+  _inherits(Identify3D, _React$Component);
+  return _createClass(Identify3D, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.sceneContext.scene.viewport.addEventListener('pointerdown', this.identifyOnRelease);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (!this.props.identifyEnabled && prevProps.identifyEnabled) {
+        this.clear();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.pickAttrs === null) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(ResizeableWindow, {
+        dockable: this.props.geometry.side,
+        icon: "info-sign",
+        initialHeight: this.props.geometry.initialHeight,
+        initialWidth: this.props.geometry.initialWidth,
+        initialX: this.props.geometry.initialX,
+        initialY: this.props.geometry.initialY,
+        initiallyDocked: this.props.geometry.initiallyDocked,
+        onClose: this.clear,
+        title: LocaleUtils.tr("identify.title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "identify-body",
+        role: "body"
+      }, isEmpty(this.state.pickAttrs) ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", null, LocaleUtils.tr("identify.noattributes"))) : /*#__PURE__*/React.createElement("div", {
+        className: "identify-result-box"
+      }, /*#__PURE__*/React.createElement("table", {
+        className: "attribute-list"
+      }, /*#__PURE__*/React.createElement("tbody", null, Object.entries(this.state.pickAttrs).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
+        return /*#__PURE__*/React.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React.createElement("td", {
+          className: "identify-attr-title"
+        }, /*#__PURE__*/React.createElement("i", null, key)), /*#__PURE__*/React.createElement("td", {
+          className: "identify-attr-value"
+        }, value.toString()));
+      }))))));
+    }
+  }]);
+}(React.Component);
+_defineProperty(Identify3D, "propTypes", {
+  /** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */
+  geometry: PropTypes.shape({
+    initialWidth: PropTypes.number,
+    initialHeight: PropTypes.number,
+    initialX: PropTypes.number,
+    initialY: PropTypes.number,
+    initiallyDocked: PropTypes.bool,
+    side: PropTypes.string
+  }),
+  identifyEnabled: PropTypes.bool,
+  sceneContext: PropTypes.object,
+  /** URL to service for querying additional tile information.
+   * Can contain the `{tileset}` and `{objectid}` placeholders.
+   * Expected to return a JSON dict with attributes.*/
+  tileInfoServiceUrl: PropTypes.string
+});
+_defineProperty(Identify3D, "defaultProps", {
+  geometry: {
+    initialWidth: 240,
+    initialHeight: 320,
+    initialX: 0,
+    initialY: 0,
+    initiallyDocked: false,
+    side: 'left'
+  }
+});
+export default connect(function (state) {
+  return {
+    identifyEnabled: state.task.identifyEnabled
+  };
+}, {})(Identify3D);