iTowns / itowns

A Three.js-based framework written in Javascript/WebGL for visualizing 3D geospatial data
http://www.itowns-project.org
Other
1.11k stars 300 forks source link

Vector tiles problem #2150

Open vladimir-rybalko opened 1 year ago

vladimir-rybalko commented 1 year ago

Hello! I am trying to display my vector tiles in iTowns and am getting problems.

What am I trying to do? I have a service that provides vector tiles. For OpenLayers example working fine. For the same vector tiles, the iTowns example does not work. Maybe it has something to do with the error I see in the console. I'm not sure.

itowns.js:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'crs')
    at f.value (itowns.js:2:431002)
    at itowns.js:2:437245

In which direction should I move, I'm at a dead end.

AnthonyGlt commented 1 year ago

Hello, thank you for your feedback. The console error is from request returning empty data. Although, for the not empty data, it seems that we have some issues to display it. Your script seems good. If you zoom, you can see some data displayed. cf screenshot. Clipboard - 20 juillet 2023 09_56

It means that there must be an issue on the iTowns' part. Looks like the zoom is causing some trouble, and we can notice that the numbers aren't showing. @ftoromanoff do you think that some of you recent changes (style rework) could correct this ?

ftoromanoff commented 1 year ago

Hello, That's pretty hard to tell. It might indeed be an issue on the iTown's part. I'm currently working on a known issue about the zoom when using VectorTileLayer. It might be connected. @vladimir-rybalko Would it be possible to have look at your itlwns example code ?

vladimir-rybalko commented 1 year ago

Hello, That's pretty hard to tell. It might indeed be an issue on the iTown's part. I'm currently working on a known issue about the zoom when using VectorTileLayer. It might be connected. @vladimir-rybalko Would it be possible to have look at your itlwns example code ?

Yes of course, you can find the code here

const tmsSource = new itowns.TMSSource({
        format: "image/png",
        crs: "EPSG:3857",
        url: "https://tile.openstreetmap.org/${z}/${x}/${y}.png",
        tileMatrixSet: "PM"
      });
      const colorLayer = new itowns.ColorLayer("OPENSM", {
        source: tmsSource
      });
      view.addLayer(colorLayer);`

     fetch(
        "https://geo-proxy-api.tazmar-it.ru/getMbtilesStyle/ACADArsenalnyModel_1cc5f23b-1aff-49fb-8722-c5be271eff53"
      )
        .then((response) => response.json())
        .then((res) => {
          mvt_style = res;
          const sourcesName = Object.keys(res.sources)[0];
          const tileMatrixLimits =
            res.sources[sourcesName].tileMatrixSetLimits || undefined;

          const mvtSource = new itowns.VectorTilesSource({
            crs: "EPSG:3857",
            style: mvt_style,
            tileMatrixSetLimits: tileMatrixLimits,
            tileMatrixSet: "EPSG:3857"
          });

          const mvtLayer = new itowns.ColorLayer("test-vector-tiles", {
            source: mvtSource,
            effect_type: itowns.colorLayerEffects.removeLightColor,
            effect_parameter: 2.5,
            addLabelLayer: true,
            zoom: {
              min: 8,
              max: 18
            }
          });
          view.addLayer(mvtLayer);
        });
ftoromanoff commented 1 year ago

Hello, I found the probleme and it indeed an issue on itowns side.

The limits of a tileset are not perfectly handling in itowns because of some rounding effect during the convertion between from TMS to EPSG at the global extent border. Your data being only 1 tile we are exactly at that situation. The second probleme is that, because of this first problem itowns request some tile taht return empty data and this case is as well not well handled.

I can pretty quickly fix the second probleme, that will allow to visualised your data but won't solve the other probleme of the extra requests send to serveur. ( I you have acces to the code you can replace the 2 return; by return Promise.resolve(new FeatureCollection(options.out)); at line 101 and 124 in VectorTileParser.js).

vladimir-rybalko commented 1 year ago

@ftoromanoff, thanks for your work! With your changes the tiles are drawn. You can see it on the video. Now drawing partially disappears when zooming in, but captions are preserved.

Can the limit be set via bbox to not use tileMatrixLimits and get around the bug?