itowns 2.44.3-next.2 → 2.44.3-next.21

package/examples/3dtiles_loader.html

@@ -11,7 +11,15 @@
         <style type="text/css">
             #description {
                 z-index: 2;
-                right: 10px;
+                left: 10px;
+            }
+
+            #featureInfoText {
+                font-size: small;
+            }
+
+            #description .marg {
+                margin: 10px;
             }
         </style>
 
@@ -21,12 +29,17 @@
         <div id="viewerDiv"></div>
         <div id="description">Specify the URL of a tileset to load:
             <input type="text" id="url" />
-            <button onclick="setURL(document.getElementById('url').value)">
-                Load
-            </button>
+            <button onclick="readURL()">Load</button>
+            <div class="marg">
+                <button onClick="loadLyon()">Load Lyon 1 (Mesh)</button>
+                <button onClick="loadSete()">Load Sete (Point Cloud)</button>
+                <button onClick="loadLille()">Load Lille (Mesh)</button>
+                <div id="share"></div>
+            </div>
             <hr />
+            <p id="featureInfoText" class="marg"><em>Display feature information by clicking on it</em></p>
             <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
+            <div id="featureInfo" class="marg"></div>
         </div>
 
         <script src="js/GUI/GuiTools.js"></script>
@@ -52,28 +65,17 @@
 
             const {
                 TMSSource, WMTSSource, OGC3DTilesSource,
-                ColorLayer, ElevationLayer, OGC3DTilesLayer,
+                ColorLayer, ElevationLayer, OGC3DTilesLayer, PNTS_SIZE_MODE,
                 GlobeView, Coordinates, Fetcher,
             } = itowns;
 
-            const uri = new URL(location);
-            const state = {
-                // URL to tileset JSON
-                tileset: uri.searchParams.get('tileset'),
-                // Cesium ION /
-                assetId: uri.searchParams.get('assetId'),
-            };
-
-            function setURL(url) {
-                if (!url) return;
+            window.layer = null; // 3D Tiles layer
 
-                uri.searchParams.set('tileset', url);
-                history.pushState(null, '', `?${uri.searchParams.toString()}`);
+            const uri = new URL(location);
 
-                location.reload();
-            }
+            window.gui = new dat.GUI();
 
-            // ---- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION ----
+            // ---- Create a GlobeView ----
 
             // Define camera initial position
             const placement = {
@@ -85,45 +87,87 @@
             const viewerDiv = document.getElementById('viewerDiv');
 
             // Create a GlobeView
-            const view = new GlobeView(viewerDiv, placement, {});
+            const view = new GlobeView(viewerDiv, placement, {
+                controls: {
+                    minDistance: 100,
+                }
+            });
+
+            // Enable various compression support for 3D Tiles tileset:
+            // - `KHR_draco_mesh_compression` mesh compression extension
+            // - `KHR_texture_basisu` texture compresion extension
+            itowns.enableDracoLoader('./libs/draco/');
+            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
 
             // Add ambient light to globally illuminates all objects
-            const light = new AmbientLight(0x404040, 15);
+            const light = new AmbientLight(0x404040, 40);
             view.scene.add(light);
 
             // Setup loading screen
             setupLoadingScreen(viewerDiv, view);
 
-            // Setup debug menu
-            const menuGlobe = new GuiTools('menuDiv', view, 300);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer);
-
-
-            // ---- ADD A BASEMAP ----
+            // ---- Add a basemap ----
 
             // Add one imagery layer to the scene. This layer's properties are
             // defined in a json file, but it cou   ld be defined as a plain js
             // object. See `Layer` documentation for more info.
             Fetcher.json('./layers/JSONLayers/OPENSM.json').then((config) => {
-                const layer = new ColorLayer('Ortho', {
+                const colorLayer = new ColorLayer('Ortho', {
                     ...config,
                     source: new TMSSource(config.source),
                 });
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+                view.addLayer(colorLayer);
             });
 
-            // ---- ADD 3D TILES TILESET ----
+            // ---- Add 3D terrain ----
 
-            // Enable various compression support for 3D Tiles tileset:
-            // - `KHR_draco_mesh_compression` mesh compression extension
-            // - `KHR_texture_basisu` texture compresion extension
-            itowns.enableDracoLoader('./libs/draco/');
-            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
+            // Add two elevation layers: world terrain and a more precise terrain for france
+            // These will deform iTowns globe geometry to represent terrain elevation.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var elevationLayer = new itowns.ElevationLayer(config.id, config);
+                view.addLayer(elevationLayer);
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+
+            // ---------- 3D Tiles loading
+
+            function readURL() {
+                const url = document.getElementById('url').value;
+
+                if (url) {
+                    setUrl(url);
+                }
+            }
+
+            function setUrl(url) {
+                if (!url) return;
+
+                const input_url = document.getElementById('url');
+                if (!input_url) return;
+
+                uri.searchParams.set('copc', url);
+                history.replaceState(null, null, `?${uri.searchParams.toString()}`);
+
+                input_url.value = url;
+                load(url);
+            }
+
+
+            function load(url) {
+                const source = new OGC3DTilesSource({ url });
 
-            if (state.tileset) {
-                const source = new OGC3DTilesSource({ url: state.tileset });
-                const layer = new OGC3DTilesLayer('3DTiles', {
+                if (window.layer) {
+                    gui.removeFolder('Layer 3DTiles');
+                    view.removeLayer('3DTiles');
+                    view.notifyChange();
+                    window.layer.delete();
+                }
+
+                window.layer = new OGC3DTilesLayer('3DTiles', {
                     source,
+                    pntsSizeMode: PNTS_SIZE_MODE.ATTENUATED,
                 });
 
                 // Add an event for picking the 3D Tiles layer and displaying
@@ -131,20 +175,37 @@
                 const pickingArgs = {
                     htmlDiv: document.getElementById('featureInfo'),
                     view,
-                    layer,
+                    layer: window.layer,
                 };
 
                 // Add the layer to our view
-                view.addLayer(layer).then((layer) => {
+                view.addLayer(window.layer).then((layer) => {
                     zoomToLayer(view, layer);
                     window.addEventListener('click',
                         (event) => fillHTMLWithPickingInfo(event, pickingArgs), false);
                 });
 
-                debug.createOGC3DTilesDebugUI(menuGlobe.gui, view, layer);
+                window.layer.whenReady
+                    .then(() => debug.createOGC3DTilesDebugUI(gui, view, window.layer));
+            }
+
+            function loadLyon() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/refs/heads/master/3DTiles/lyon1-4978/tileset.json");
+            }
+
+            function loadSete() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json");
             }
 
-            window.setURL = setURL;
+            function loadLille() {
+                setUrl("https://webimaging.lillemetropole.fr/externe/maillage/2020_mel_5cm/tileset.json");
+            }
+
+            window.readURL = readURL;
+            window.loadLyon = loadLyon;
+            window.loadSete = loadSete;
+            window.loadLille = loadLille;
+
         </script>
     </body>
 </html>

package/examples/config.json

@@ -14,16 +14,8 @@
         "geoid_geoidLayer": "Display geoid heights"
     },
 
-    "3d Tiles": {
-        "3dtiles_basic": "on 3D map",
-        "3dtiles_25d": "On 2.5D map",
-        "3dtiles_batch_table": "Batch table Hierarchy extension",
-        "3dtiles_ion": "From Cesium ion",
-        "3dtiles_pointcloud": "Pointcloud classification"
-    },
-
-    "3D Tiles (new)": {
-        "3dtiles_loader": "3D Tiles tileset loader"
+    "3D Tiles": {
+        "3dtiles_loader": "3D Tiles loader"
     },
 
     "Pointcloud": {

package/examples/images/itowns_logo.svg

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="2123.8423"
+   height="504"
+   viewBox="0 0 2123.8423 504"
+   version="1.1"
+   id="svg91"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   inkscape:label="layer_i"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview93"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.21100549"
+     inkscape:cx="1390.9591"
+     inkscape:cy="1049.7357"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="70"
+     inkscape:window-y="1107"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg91"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="303,12"
+       orientation="0,-1"
+       id="guide149742" />
+    <sodipodi:guide
+       position="922.7708,353.293"
+       orientation="0,-1"
+       id="guide161704" />
+    <sodipodi:guide
+       position="1076.0872,118.0449"
+       orientation="0,-1"
+       id="guide161710" />
+    <sodipodi:guide
+       position="1172.7675,246.6387"
+       orientation="0,-1"
+       id="guide161712" />
+  </sodipodi:namedview>
+  <defs
+     id="defs85">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient124706">
+      <stop
+         style="stop-color:#7ea8c5;stop-opacity:1"
+         offset="0"
+         id="stop124702" />
+      <stop
+         style="stop-color:#404e73;stop-opacity:1"
+         offset="1"
+         id="stop124704" />
+    </linearGradient>
+    <style
+       id="style83">
+      .cls-1 {
+        opacity: 0.4;
+      }
+    </style>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient124706"
+       id="linearGradient124708"
+       x1="1129.2401"
+       y1="606.47083"
+       x2="1401.899"
+       y2="774.6546"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     id="g149219"
+     inkscape:label="Globe"
+     transform="translate(-523,-390)">
+    <ellipse
+       style="display:inline;fill:#c8d3da;fill-opacity:1;fill-rule:evenodd"
+       id="path1259"
+       cx="1227.5"
+       cy="692"
+       rx="202.5"
+       ry="202"
+       inkscape:label="Circle" />
+    <g
+       id="g124715"
+       style="display:inline;stroke:#355c77;stroke-opacity:1"
+       inkscape:label="Arrows">
+      <g
+         id="g124711"
+         style="stroke:#355c77;stroke-opacity:1"
+         inkscape:label="g124711">
+        <path
+           style="fill:url(#linearGradient124708);fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 1330,681 61,-12 c 3.02,7.842 4.076,15.87 6.019,24 0.623,2.608 1.725,6.621 4.931,7.079 3.39,0.484 5.145,-4.756 6.294,-7.079 4.368,-8.837 7.681,-18.455 10.126,-28 6.613,-25.808 -5.85,-43.846 -20.997,-64 -5.472,-7.282 -12.303,-17.758 -20.354,-22.338 -4.273,-2.4306 -5.13,2.0092 -4.714,5.3388 0.586,4.6919 7.851,20.6632 3.171,23.9322 -2.895,2.022 -10.95,0.067 -14.476,0.067 -10.657,-10e-4 -21.347,-0.246 -32,0.015 -4.325,0.106 -9.726,2.094 -13.892,0.382 -5.397,-2.219 -7.556,-13.418 -9.687,-18.397 -7.301,-17.0598 -16.733,-32.6765 -25.421,-49 5.562,-1.763 24.398,-1.5626 26.824,-7.2245 2.682,-6.2591 -15.778,-11.6544 -19.824,-13.3511 -16.725,-7.013 -34.232,-12.7414 -52,-16.4213 -6.905,-1.4301 -15.602,-3.9163 -21.535,1.4267 -9.584,8.6288 -15.545,24.2163 -21.218,35.5702 -1.756,3.5154 -6.626,10.6646 -1.928,13.821 8.653,5.8139 20.931,-6.3429 29.576,-1.7786 4.537,2.3953 6.205,9.4776 7.761,13.9576 4.228,12.1783 8.181,24.53 11.46,37 1.02,3.88 4.614,11.885 2.683,15.697 -2.377,4.69 -15.124,5.832 -19.799,7.163 -16.494,4.695 -32.732,10.384 -49,15.807 -4.374,1.458 -13.407,6.621 -17.891,4.977 -7.289,-2.674 -4.547,-35.284 -17.019,-27.036 -5.418,3.583 -8.841,11.197 -12.514,16.392 -10.2548,14.501 -20.0164,29.506 -28.7149,45 -3.9849,7.098 -10.3602,15.972 -4.2083,23.815 3.6295,4.627 10.3443,6.941 15.3472,9.761 13.8979,7.833 28.591,14.399 43,21.205 4.886,2.308 14.588,9.972 19.566,4.897 7.959,-8.114 -7.807,-22.054 -1.784,-30.399 3.34,-4.629 13.088,-4.493 18.218,-5.476 17.25,-3.306 34.664,-5.608 52,-8.393 4.543,-0.729 16.572,-4.766 20.411,-1.637 3.876,3.159 4.049,14.529 4.989,19.227 3.19,15.949 5.824,31.89 8.024,48 0.723,5.296 3.474,14.919 0.548,19.775 -5.411,8.981 -25.656,0.601 -29.171,11.33 -1.841,5.617 6.874,11.422 10.109,14.895 8.451,9.072 17.016,17.641 26.09,26.09 4.394,4.091 8.431,9.791 15,9.823 7.581,0.036 13.971,-7.022 19,-11.928 12.818,-12.503 24.842,-25.974 35.996,-39.985 3.543,-4.45 12.487,-12.805 12.176,-18.891 -0.593,-11.601 -26.368,5.893 -29.399,-4.168 -2.107,-6.995 0.227,-18.497 0.227,-25.941 0,-21.005 0.853,-42.26 -3,-63"
+           id="path1080"
+           sodipodi:nodetypes="ccsscccssscscccscsccsscsccscscsscsscccscscccscccscsc"
+           inkscape:label="path1080" />
+      </g>
+    </g>
+  </g>
+  <path
+     id="path952"
+     style="display:inline;fill:#404e73;fill-opacity:1"
+     inkscape:label="T wns"
+     d="M 177.03906,0 176.91602,93.58398 303,94 V 492 H 409.99414 L 410.5,94.5 538.5,93.5 539.0195,0 Z M 2011.0176,134.28125 c -13.0632,0.12998 -25.5667,1.33054 -36.8633,3.63281 -29.4349,5.99891 -57.9681,21.05292 -73.8867,38.98047 -12.3465,13.90461 -21.0569,31.08151 -24.6992,48.71485 -2.306,11.16435 -2.1202,33.20565 0.3613,42.9082 3.8861,15.19442 12.6728,29.33206 26.4336,42.5332 17.1315,16.43468 37.8519,27.767 72.9277,39.88477 26.8743,9.28436 38.5632,16.26831 43.2481,25.84375 2.4031,4.91179 2.6657,6.40755 2.2519,12.78711 -0.5206,8.02613 -2.1474,11.92677 -6.998,16.77734 -7.1349,7.1349 -19.3393,10.38075 -38.793,10.31445 -24.4588,-0.0833 -56.8353,-8.26242 -81.3359,-20.54687 -4.31,-2.161 -8.34,-3.76166 -8.9551,-3.55664 -1.2952,0.43175 -19.849,73.70135 -19.0078,75.0625 0.3086,0.4992 3.8636,2.41232 7.9004,4.25195 21.9315,9.99451 50.5827,16.99204 79.4902,19.41406 12.4848,1.04603 43.0849,0.48063 54.9082,-1.01367 38.4999,-4.86586 68.3037,-18.04186 88.5781,-39.16015 14.0553,-14.64031 22.6133,-31.44619 26.0528,-51.16797 2.1158,-12.13186 1.3753,-33.68965 -1.5606,-45.46875 -5.6685,-22.74204 -19.5206,-41.66585 -41.0273,-56.04688 -15.1873,-10.15539 -26.2884,-15.30705 -58.543,-27.16992 -36.0413,-13.25557 -46.6692,-22.13625 -45.248,-37.80859 0.83,-9.1535 5.475,-15.93482 13.8339,-20.19922 17.7737,-9.06744 56.359,-5.47043 87.0977,8.11914 11.915,5.26763 13.4655,5.6248 14.1797,3.27148 2.9956,-9.87087 17.6841,-68.85641 17.4472,-70.06445 -0.4198,-2.14067 -16.4538,-8.45661 -30.8222,-12.14063 -21.8739,-5.60839 -45.1988,-8.36897 -66.9707,-8.15234 z m -328.5235,8.21094 c -20.9646,0 -40.1175,4.76669 -57.4609,14.30078 -17.3434,9.33124 -33.7343,23.93681 -49.1719,43.81641 V 150.70703 H 1473.5156 V 491.5 h 102.3457 V 323.8418 c 0,-31.03651 6.0974,-55.27731 18.2949,-72.72266 12.1976,-17.64821 28.9707,-26.47266 50.3165,-26.47266 8.767,0 16.5802,2.02888 23.4414,6.08594 6.8612,3.85422 12.2926,9.3318 16.2949,16.43164 3.0494,5.27419 5.1455,13.48958 6.289,24.64649 1.3341,11.15691 2.002,31.44178 2.002,60.85547 V 457.72461 491.5 h 102.916 V 283.98047 c 0,-46.04763 -9.6238,-81.13979 -28.873,-105.2793 -19.0587,-24.1395 -47.0751,-36.20898 -84.0489,-36.20898 z M 922.7715,150.70703 1007.1504,492 h 111.8398 L 1172.7676,257.36133 1226.8262,492 h 111.8418 l 84.3808,-341.29297 h -99.541 l -54.0605,232.81055 -53.7735,-232.81055 h -85.5273 l -54.0586,235.24805 -53.7774,-235.24805 z" />
+  <path
+     id="path41630"
+     style="display:inline;fill:#7ea8c5;fill-opacity:1"
+     d="M 56.2207,0 C 25.17087,2e-5 2e-5,25.17087 0,56.2207 c 1e-5,31.04983 25.17087,56.22069 56.2207,56.22071 31.04984,-1e-5 56.2207,-25.17087 56.22071,-56.22071 C 112.44139,25.17087 87.27053,10e-6 56.2207,0 Z M 4.20703,151.33203 C 3.98701,264.88792 3.91235,378.44395 3.82849,492 c 34.67057,0 69.34114,0 104.01172,0 -0.29968,-113.55583 -0.46282,-227.11189 -0.63318,-340.66797 -34.33333,0 -68.66667,0 -103,0 z"
+     inkscape:label="i"
+     sodipodi:nodetypes="sssssccccc" />
+</svg>

package/examples/js/plugins/COGParser.js

@@ -235,7 +235,7 @@ const COGParser = (function _() {
          */
         parse: async function _(data, options) {
             const source = options.in;
-            const tileExtent = options.extent.as(source.crs);
+            const tileExtent = options.extent.isExtent ? options.extent.as(source.crs) : options.extent.toExtent(source.crs);
 
             const level = selectLevel(source, tileExtent, source.tileWidth, source.tileHeight);
             const viewport = makeWindowFromExtent(source, tileExtent, level.resolution);

package/lib/Controls/GlobeControls.js

@@ -149,7 +149,7 @@ let previous;
  * @param      {object}  [options] An object with one or more configuration properties. Any property of GlobeControls
  * can be passed in this object.
  * @property      {number}  zoomFactor The factor the scale is multiplied by when dollying (zooming) in or
- * divided by when dollying out. Default is 2.
+ * divided by when dollying out. Default is 1.1.
  * @property      {number}  rotateSpeed Speed camera rotation in orbit and panoramic mode. Default is 0.25.
  * @property      {number}  minDistance Minimum distance between ground and camera in meters (Perspective Camera only).
  * Default is 250.
@@ -199,7 +199,7 @@ class GlobeControls extends THREE.EventDispatcher {
       console.warn('Controls zoomSpeed parameter is deprecated. Use zoomFactor instead.');
       options.zoomFactor = options.zoomFactor || options.zoomSpeed;
     }
-    this.zoomFactor = options.zoomFactor || 1.25;
+    this.zoomFactor = options.zoomFactor || 1.1;
 
     // Limits to how far you can dolly in and out ( PerspectiveCamera only )
     this.minDistance = options.minDistance || 250;
@@ -293,10 +293,10 @@ class GlobeControls extends THREE.EventDispatcher {
     this.lookAtCoordinate(placement, false);
     coordCameraTarget.crs = this.view.referenceCrs;
   }
-  get dollyInScale() {
+  get zoomInScale() {
     return this.zoomFactor;
   }
-  get dollyOutScale() {
+  get zoomOutScale() {
     return 1 / this.zoomFactor;
   }
   get isPaused() {
@@ -355,11 +355,13 @@ class GlobeControls extends THREE.EventDispatcher {
       this.panUp(deltaY * (this.camera.top - this.camera.bottom) / gfx.height);
     }
   }
+
+  // For Mobile
   dolly(delta) {
     if (delta === 0) {
       return;
     }
-    dollyScale = delta > 0 ? this.dollyInScale : this.dollyOutScale;
+    dollyScale = delta > 0 ? this.zoomInScale : this.zoomOutScale;
     if (this.camera.isPerspectiveCamera) {
       orbitScale /= dollyScale;
     } else if (this.camera.isOrthographicCamera) {
@@ -556,6 +558,7 @@ class GlobeControls extends THREE.EventDispatcher {
 
     // Initialize dolly movement.
     dollyStart.copy(event.viewCoords);
+    this.view.getPickingPositionFromDepth(event.viewCoords, pickedPosition); // mouse position
 
     // Initialize pan movement.
     panStart.copy(event.viewCoords);
@@ -587,9 +590,11 @@ class GlobeControls extends THREE.EventDispatcher {
   handleDolly(event) {
     dollyEnd.copy(event.viewCoords);
     dollyDelta.subVectors(dollyEnd, dollyStart);
-    this.dolly(-dollyDelta.y);
     dollyStart.copy(dollyEnd);
-    this.update();
+    event.delta = dollyDelta.y;
+    if (event.delta != 0) {
+      this.handleZoom(event);
+    }
   }
   handlePan(event) {
     if (event.viewCoords) {
@@ -714,21 +719,33 @@ class GlobeControls extends THREE.EventDispatcher {
   handleZoom(event) {
     this.player.stop();
     CameraUtils.stop(this.view, this.camera);
-    this.updateTarget();
-    const delta = -event.delta;
-    this.dolly(delta);
-    const previousRange = this.getRange(pickedPosition);
-    this.update();
-    const newRange = this.getRange(pickedPosition);
-    if (Math.abs(newRange - previousRange) / previousRange > 0.001) {
-      this.dispatchEvent({
-        type: CONTROL_EVENTS.RANGE_CHANGED,
-        previous: previousRange,
-        new: newRange
-      });
+    const zoomScale = event.delta > 0 ? this.zoomInScale : this.zoomOutScale;
+    let point = event.type === 'dolly' ? pickedPosition : this.view.getPickingPositionFromDepth(event.viewCoords); // get cursor position
+    let range = this.getRange();
+    range *= zoomScale;
+    if (point && range > this.minDistance && range < this.maxDistance) {
+      // check if the zoom is in the allowed interval
+      const camPos = xyz.setFromVector3(cameraTarget.position).as('EPSG:4326', c).toVector3();
+      point = xyz.setFromVector3(point).as('EPSG:4326', c).toVector3();
+      if (camPos.x * point.x < 0) {
+        // Correct rotation at 180th meridian by using 0 <= longitude <=360 for interpolation purpose
+        if (camPos.x - point.x > 180) {
+          point.x += 360;
+        } else if (point.x - camPos.x > 180) {
+          camPos.x += 360;
+        }
+      }
+      point.lerp(
+      // point interpol between mouse cursor and cam pos
+      camPos, zoomScale // interpol factor
+      );
+      point = c.setFromVector3(point).as('EPSG:4978', xyz);
+      return this.lookAtCoordinate({
+        // update view to the interpolate point
+        coord: point,
+        range
+      }, false);
     }
-    this.dispatchEvent(this.startEvent);
-    this.dispatchEvent(this.endEvent);
   }
   onTouchStart(event) {
     // CameraUtils.stop(view);

package/lib/Controls/StateControl.js

@@ -257,7 +257,7 @@ class StateControl extends THREE.EventDispatcher {
   touchToState(finger) {
     for (const key of Object.keys(DEFAULT_STATES)) {
       const state = this[key];
-      if (state.enable && finger == state.finger) {
+      if (state.enable && finger === state.finger) {
         return state;
       }
     }
@@ -376,9 +376,12 @@ class StateControl extends THREE.EventDispatcher {
   onMouseWheel(event) {
     event.preventDefault();
     if (this.enabled && this.ZOOM.enable) {
+      viewCoords.copy(this._view.eventToViewCoords(event));
+      this.currentState = this.ZOOM;
       this.dispatchEvent({
         type: this.ZOOM._event,
-        delta: event.deltaY
+        delta: event.deltaY,
+        viewCoords
       });
     }
   }

package/lib/Converter/Feature2Mesh.js

@@ -55,8 +55,15 @@ class FeatureMesh extends THREE.Group {
         // calculate the scale transformation to transform the feature.extent
         // to feature.extent.as(crs)
         coord.crs = Crs.formatToEPSG(this.#originalCrs);
-        extent.copy(this.extent).applyMatrix4(this.#collection.matrix);
-        extent.as(coord.crs, extent);
+        // TODO: An extent here could be either a geographic extent (for
+        // features from WFS) or a tiled extent (for features from MVT).
+        // Unify both behavior.
+        if (this.extent.isExtent) {
+          extent.copy(this.extent).applyMatrix4(this.#collection.matrix);
+          extent.as(coord.crs, extent);
+        } else {
+          this.extent.toExtent(coord.crs, extent);
+        }
         extent.spatialEuclideanDimensions(dim_ref);
         extent.planarDimensions(dim);
         if (dim.x && dim.y) {

package/lib/Converter/textureConverter.js

@@ -15,15 +15,15 @@ function textureColorLayer(texture, layer) {
   return textureLayer(texture, layer);
 }
 export default {
-  convert(data, extentDestination, layer) {
+  convert(data, destinationTile, layer) {
     let texture;
     if (data.isFeatureCollection) {
       const backgroundLayer = layer.source.backgroundLayer;
       const backgroundColor = backgroundLayer && backgroundLayer.paint ? new THREE.Color(backgroundLayer.paint['background-color']) : undefined;
-      extentDestination.as(CRS.formatToEPSG(layer.crs), extentTexture);
+      destinationTile.toExtent(CRS.formatToEPSG(layer.crs), extentTexture);
       texture = Feature2Texture.createTextureFromFeature(data, extentTexture, layer.subdivisionThreshold, layer.style, backgroundColor);
       texture.features = data;
-      texture.extent = extentDestination;
+      texture.extent = destinationTile;
     } else if (data.isTexture) {
       texture = data;
     } else {