GIS Demo - 3D Tiles Nederland

download van BGT de objecten als GML bestand.
https://app.pdok.nl/lv/bgt/download-viewer/

– markeer een gebied
– bij de features schakelen we alles uit behalve ‘straatmeubilair’

Klik om de afbeelding in een nieuw tabblad te bekijken

maak nieuwe database (naam demo)
installeer Postgis extensie

Toelichting
– omdat we werken met spatial data moet je in Postgres
de Postgis extensie installeren

laad het GML bestand in een Postgres database met ogr2ogr.
Navigeer naar het ogr2ogr programma

– open OSGeo4W-shell (vanuit het start menu)

ogr2ogr -update -append -f "PostgreSQL" PG:"host=localhost port=5432 dbname=demo user=postgres password=**** active_schema=public" "C:\Users\afdmu\Downloads\extract\bgt_straatmeubilair.gml" -progress -t_srs EPSG:28992

Opmerkingen
ogr2ogr is een opensource tool waarmee data geconverteerd kan worden tussen verschillende bronnen.
ogr2ogr maakt onderdeel uit van GDAL en kan zelfstandig gedownload en geïnstalleerd worden.
De GDAL library wordt ook automatisch meegeleverd met QGIS. De srid is (mogelijk) verloren gegaan tijdens de import

Controleer het import resultaat als volgt:

select gml_id
,      plus_type
,      geometrie2dstraatmeubilair
,      st_srid (geometrie2dstraatmeubilair)
,      st_astext (geometrie2dstraatmeubilair) 
from straatmeubilair 
;

Merk op dat we vanuit de BGT alleen een x en een
y coördinaat hebben en dat de z (hoogte) waarde
nog ontbreekt.

Klik om de afbeelding in een nieuw tabblad te bekijken

Bekijk alle typen objecten

select plus_type
,      count(1)
from straatmeubilair
group by plus_type
;

Verwijder objecten die geen waterpunten zijn

delete from straatmeubilair
where plus_type <> 'fontein'
;

Alle voorgaande bewerkingen zijn gebaseerd op het projectiestelsel EPSG:28992.
Immers; de BGT- en het AHN bestand die aangeboden worden door PDOK zijn gebaseerd op EPSG:28992

Cesium (de 3D viewer) verwacht echter EPSG:4326.
Daarom moeten we nog een transformatie uitvoeren.
We doen dit wederom in een nieuwe tabel.
De ST_transform functie zorgt ervoor dat EPSG:28992 geconverteerd wordt naar EPSG:4326

We voeren een update uit om een random ufo te gebruiken (ufo1.glb, ufo2.glb of ufo3.glb).

create table tiling_table
as
select gml_id
,      lokaalid
,      plus_type
,      10                                                                   scale
,      null                                                                 scale_non_uniform
,      0                                                                    rotation
,      'ufo' || FLOOR(RANDOM() * 2 + 1)::int || '.glb'                      model
,      st_transform(geometrie2dstraatmeubilair, 4326)                       geom
,      '[{"gml_id" : "' || gml_id || '"}, {"lokaalid" : "' || lokaalid || '"}]' tags
from straatmeubilair sm
;

Random Z-waarden en ufo bepalen
Bovendien geven we de records een random hoogte tussen 70 en 150 meter hoog.

update tiling_table
set geom = 
 ST_MakePoint(
    ST_X(geom),
    ST_Y(geom),
    FLOOR(RANDOM() * (150 - 70 + 1) + 70)::int
  )::geometry(POINTZ, 4326)
;

Controleer het resultaat

select gml_id
,      plus_type
,      st_srid (geom)
,      st_astext (geom)
,      model 
from tiling_table 
;

Voorzie deze tabel van een index. Dit verbetert de performance enorm.

CREATE INDEX geom_idx
ON tiling_table
USING GIST (geom);

De tabel ’tiling_table’ vormt de input voor het programma i3dm.export

download i3dm vanaf https://github.com/Geodan/i3dm.export

– download ZIP

– Prerequisite: .NET 8.0 SDK

Controleer dit als volgt in een cmd windows van Windows:
dotnet –list-runtimes

– installeer
$ dotnet tool install -g i3dm.export

Klik om de afbeelding in een nieuw tabblad te bekijken

plaats het 3D model dat je hebt benoemd in de
tiling_table (in dit voorbeeld ufo1.glb, ufo2.glb, ufo3.glb)
in de i3dm.export-main folder.
Download de ufo 3dmodellen hier

voer het i3dm programma uit

vanuit de geinstalleerde executable:

$ i3dm.export -c "Host=localhost;Username=postgres;Password=postgres;Database=test;Port=5432" -t public.tiling_table -g 1000 -o "C:\Users\afdmu\Downloads\tiles\"

het resultaat

Klik om de afbeelding in een nieuw tabblad te bekijken

in de output folder vinden we 2 folders en een json file

Klik om de afbeelding in een nieuw tabblad te bekijken

- indien je op je computer een webserver hebt geïnstalleerd zoals IIS (Windows van Microsoft), Apache, nodejs of nginx dan kun je de output plaatsen in de www folder van je webserver.
Je kunt de tileset.json bekijken door in je webbrowser de localhost url te bevragen:
http://localhost:poort/…/…/tileset.json

Een eenvoudige Cesium viewer die je zelf kunt hosten vanuit jouw webserver kun je hier downloaden.

Toelichting:
Hoewel je zelf de tileset kunt hosten, kun je deze niet zonder meer gebruiken in de Cesium Sandcastle viewer. De Sandcastle viewer dwingt namelijk het gebruik van https (SSL) af.
Bij een basis webserver setup zul je standaard over http hosten.
Als je echter zelf de viewer host dan kun je wel weer gebruik maken van http. Om deze reden kun je vanaf onze website een eenvoudige Cesium Viewer downloaden.

Zorg ervoor dat de door jou gekozen webbrowser de volgende mime types
ondersteunt:
– .json application/json
– .terrain application/octet-stream
– .b3dm application/octet-stream
– .cmpt application/octet-stream
– .i3dm application/octet-stream

Klik om de afbeelding in een nieuw tabblad te bekijken

indien je de tileset op het world wide web wilt delen dan heb je een aantal opties.

– je kunt je eigen laptop zo configueren dat de tilesets bereikbaar zijn vanaf het www.
Je computer moet dan altijd aan staan. Deze optie is niet aan te raden. Ook met het oog op beveiliging.

– je kunt ook gebruik maken van een hosting firma zoals hostinger.com, strava, hosting.nl e.d.
Deze firma’s voorzien – afhankelijk van het hosting pakket – vaak in SSL beveiliging, backups, upgrades e.d.
Van deze optie maakt 3dtilesnederland.nl gebruik

Plaats in dit geval de bestanden via ftp of soortgelijk middel op de server van de hosting firma en vervolgens zijn de bestanden zijn beschikbaar vanaf het www.

Klik om de afbeelding in een nieuw tabblad te bekijken

om het uiteindelijke resultaat te bekijken kun je naar de ‘quick start guide > Cesium’ gaan.

volg daar de korte stappen en plak de url van jouw nieuwe tileset in de constante tileset


const tileset = await Cesium.Cesium3DTileset.fromUrl(
     "... jouw tileset... .tileset.json"
  );

Klik om de afbeelding in een nieuw tabblad te bekijken

CORS (Cross-Origin Resource Sharing)

Wanneer de tilesets niet getoond worden (geldt voor zowel lokale hosting als externe webhosting) controleer dan ook de CORS instelling

Apache

<Files "*">
  Header set Access-Control-Allow-Origin "*"
</Files>

IIS (Microsoft Internet Information Services)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
      </customHeaders>
    </httpProtocol>
        <staticContent>
            <mimeMap fileExtension=".terrain" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".b3dm" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".subtree" mimeType="application/octet-stream" />
        </staticContent>
  </system.webServer>
    <system.web>
        <customErrors>
            <error redirect="Bestaat niet" statusCode="404" />
        </customErrors>
    </system.web>
</configuration>