Quick Start CesiumJS

3dtilesnederland.nl

Laatst bijgewerkt: 13 juni 2024
Voorbeelden zijn getest in Cesium versie 1.118

  • Voorbeeld enkele tileset
  • Bezoek Hello World – Cesium Sandcastle
  • Kopieer onderstaande code in de javascript sectie
  • Kies met behulp van onderstaand zoekveld de gemeente waarvan je tileset wilt inladen. Kopieer de URL met het icoontje.
    Vervang in het onderstaande voorbeeld de url “https://www.3dtilesnederland.nl/tiles/1.0/implicit/nederland/758.json” door jouw gekozen url.
Zoek je gemeente
Gemeente
Code
URL
Aantal objecten
Appingedam
3
8055
Bedum
5
6500
Bellingwedde
7
8372
Ten Boer
9
3816
Delfzijl
10
18887
Groningen
14
82187
Grootegast
15
9488
Haren
17
13330
Hoogezand-Sappemeer
18
20427
Leek
22
12731
Loppersum
24
7991
Marum
25
8382
Almere
34
105567
Stadskanaal
37
27082
Slochteren
40
12217
Veendam
47
17795
Vlagtwedde
48
12419
Zeewolde
50
13930
Skarsterlân
51
17596
Winsum
53
9590
Boarnsterhim
55
13513
Zuidhorn
56
12480
Dongeradeel
58
16589
Achtkarspelen
59
19700
Ameland
60
4461
het Bildt
63
7309
Bolsward
64
6319
Franekeradeel
70
14836
Harlingen
72
10771
Heerenveen
74
24886
Kollumerland en Nieuwkruisland
79
9068
Leeuwarden
80
48067
Leeuwarderadeel
81
6347
Lemsterland
82
9277
Menaldumadeel
83
8132
Ooststellingwerf
85
20860
Opsterland
86
21722
Schiermonnikoog
88
1525
Smallingerland
90
33482
Sneek
91
16340
Terschelling
93
1238
Vlieland
96
1243
Weststellingwerf
98
20104
Nijefurd
104
8595
Assen
106
41619
Coevorden
109
25929
Emmen
114
71311
Hoogeveen
118
33620
Meppel
119
18071
Littenseradiel
140
7723
Almelo
141
43518
Borne
147
14864
Dalfsen
148
21100
Deventer
150
58740
Enschede
153
90320
Haaksbergen
158
17616
Hardenberg
160
41977
Hellendoorn
163
24506
Hengelo (O)
164
51946
Kampen
166
28844
Losser
168
15904
Noordoostpolder
171
30912
Oldenzaal
173
20159
Ommen
175
14589
Raalte
177
24569
Staphorst
180
9944
Tubbergen
183
14990
Urk
184
8691
Wierden
189
15956
Zwolle
193
65636
Rijnwaarden
196
5657
Aalten
197
19333
Apeldoorn
200
103007
Arnhem
202
78160
Barneveld
203
39629
Beuningen
209
15293
Brummen
213
18567
Buren
214
18572
Culemborg
216
16169
Doesburg
221
6954
Doetinchem
222
38240
Druten
225
10852
Duiven
226
15711
Ede
228
68932
Elburg
230
16652
Epe
232
21303
Ermelo
233
21969
Geldermalsen
236
17510
Groesbeek
241
13495
Harderwijk
243
26794
Hattem
244
8132
Heerde
246
13631
Heumen
252
11718
Lochem
262
30071
Maasdriel
263
17432
Millingen aan de Rijn
265
4142
Nijkerk
267
28353
Nijmegen
268
88538
Oldebroek
269
17554
Putten
273
20114
Renkum
274
16754
Rheden
275
30822
Rozendaal
277
1024
Scherpenzeel
279
6565
Tiel
281
24291
Ubbergen
282
6040
Voorst
285
20982
Wageningen
289
16423
Westervoort
293
10090
Winterswijk
294
21174
Wijchen
296
27878
Zaltbommel
297
17606
Zevenaar
299
22353
Zutphen
301
27914
Nunspeet
302
20640
Dronten
303
23493
Neerijnen
304
6517
Abcoude
305
5418
Amersfoort
307
80445
Baarn
308
16452
De Bilt
310
25720
Breukelen
311
9111
Bunnik
312
9790
Bunschoten
313
13405
Eemnes
317
7351
Houten
321
28296
Leusden
327
19270
Loenen
329
5707
Lopik
331
9709
Maarssen
333
20211
Montfoort
335
9197
Renswoude
339
3648
Rhenen
340
12305
Soest
342
28129
Utrecht
344
130707
Veenendaal
345
33073
Woudenberg
351
8986
Wijk bij Duurstede
352
14921
IJsselstein
353
17196
Zeist
355
30771
Nieuwegein
356
31728
Aalsmeer
358
18863
Alkmaar
361
48785
Amstelveen
362
41168
Amsterdam
363
170561
Andijk
364
5117
Graft-De Rijp
365
4722
Anna Paulowna
366
8985
Beemster
370
6931
Bergen (NH)
373
24254
Beverwijk
375
23131
Blaricum
376
6893
Bloemendaal
377
12671
Bussum
381
19598
Castricum
383
23369
Diemen
384
10093
Edam-Volendam
385
15899
Enkhuizen
388
11159
Haarlem
392
75997
Haarlemmerliede en Spaarnwoude
393
3402
Haarlemmermeer
394
80559
Harenkarspel
395
10921
Heemskerk
396
22167
Heemstede
397
14677
Heerhugowaard
398
35503
Heiloo
399
14477
Den Helder
400
40082
Hilversum
402
51677
Hoorn
405
39411
Huizen
406
22541
Niedorp
412
7813
Landsmeer
415
7421
Langedijk
416
14414
Laren
417
8520
Medemblik
420
16826
Muiden
424
4726
Naarden
425
11529
Oostzaan
431
5886
Opmeer
432
7361
Ouder-Amstel
437
7389
Purmerend
439
43959
Schagen
441
12919
Texel
448
15628
Uitgeest
450
8530
Uithoorn
451
15138
Velsen
453
41964
Weesp
457
9232
Schermer
458
3776
Wervershoof
459
5678
Wieringen
462
5995
Wieringermeer
463
9776
Zandvoort
473
8257
Zijpe
476
10000
Zeevang
478
4169
Zaanstad
479
80738
Alblasserdam
482
10499
Alphen aan den Rijn
484
38393
Barendrecht
489
27214
Bergambacht
491
6602
Bodegraven
497
11186
Drechterland
498
12423
Boskoop
499
8755
Brielle
501
11076
Capelle aan den IJssel
502
24583
Delft
503
32912
Dirksland
504
5634
Dordrecht
505
60397
Goedereede
511
10975
Gorinchem
512
17556
Gouda
513
32849
‘s-Gravenhage
518
152077
Hardinxveld-Giessendam
523
9945
Hellevoetsluis
530
21694
Hendrik-Ido-Ambacht
531
16083
Stede Broec
532
13311
Hillegom
534
12972
Katwijk
537
28473
Krimpen aan den IJssel
542
15924
Leerdam
545
11480
Leiden
546
50670
Leiderdorp
547
13416
Lisse
553
14155
Maassluis
556
14045
Middelharnis
559
12453
Bernisse
568
10022
Nieuwkoop
569
17787
Nieuw-Lekkerland
571
5732
Noordwijk
575
15431
Noordwijkerhout
576
10386
Oegstgeest
579
11680
Oostflakkee
580
8069
Oud-Beijerland
584
14254
Binnenmaas
585
17711
Korendijk
588
7366
Oudewater
589
6836
Papendrecht
590
17605
Reeuwijk
595
8945
Ridderkerk
597
23284
Rotterdam
599
193820
Rijswijk
603
17685
Schiedam
606
21593
Schoonhoven
608
7205
Sliedrecht
610
11478
Cromstrijen
611
8675
Spijkenisse
612
38491
Albrandswaard
613
16190
Westvoorne
614
11298
Strijen
617
5861
Vianen
620
12177
Vlaardingen
622
23979
Vlist
623
6987
Voorschoten
626
13802
Waddinxveen
627
14778
Wassenaar
629
18135
Woerden
632
29359
Zoetermeer
637
54037
Zoeterwoude
638
5334
Zwijndrecht
642
22853
Nederlek
643
9457
Ouderkerk
644
5547
Gaasterlân-Sleat
653
8097
Borsele
654
15909
Goes
664
23745
West Maas en Waal
668
14688
Hulst
677
21300
Kapelle
678
8816
Wymbritseradiel
683
10014
Middelburg
687
30017
Giessenlanden
689
9687
Graafstroom
693
6539
Liesveld
694
6164
Reimerswaal
703
15162
Zederik
707
9467
Wûnseradiel
710
9089
Terneuzen
715
40092
Tholen
716
17558
Veere
717
17787
Vlissingen
718
27883
Lingewaal
733
7515
De Ronde Venen
736
20159
Tytsjerksteradiel
737
24865
Aalburg
738
8855
Asten
743
11501
Baarle-Nassau
744
8006
Bergen op Zoom
748
40535
Best
753
18418
Boekel
755
7268
Boxmeer
756
21956
Boxtel
757
19888
Breda
758
100499
Deurne
762
26345
Pekela
765
9726
Dongen
766
16692
Eersel
770
13456
Eindhoven
772
128249
Etten-Leur
777
28908
Geertruidenberg
779
14868
Gilze en Rijen
784
20279
Goirle
785
15276
Grave
786
8254
Haaren
788
10952
Helmond
794
56982
‘s-Hertogenbosch
796
81097
Heusden
797
30515
Hilvarenbeek
798
11605
Loon op Zand
809
15591
Mill en Sint Hubert
815
8543
Nuenen, Gerwen en Nederwetten
820
15605
Oirschot
823
13815
Oisterwijk
824
18784
Oosterhout
826
35266
Oss
828
58953
Rucphen
840
16944
Schijndel
844
16548
Sint-Michielsgestel
845
19964
Sint-Oedenrode
846
13973
Someren
847
12969
Son en Breugel
848
11333
Steenbergen
851
17535
Waterland
852
11950
Tilburg
855
123749
Uden
856
27001
Valkenswaard
858
21215
Veghel
860
25123
Veldhoven
861
28749
Vught
865
16489
Waalre
866
12406
Waalwijk
867
31350
Werkendam
870
18678
Woensdrecht
873
20627
Woudrichem
874
10641
Zundert
879
16816
Wormerland
880
9119
Onderbanken
881
5277
Landgraaf
882
26757
Beek
888
9800
Beesel
889
11304
Bergen (L)
893
11519
Brunssum
899
17710
Eijsden
905
6491
Gennep
907
15132
Heerlen
917
55658
Kerkrade
928
31278
Maastricht
935
59332
Margraten
936
7534
Meerssen
938
11857
Mook en Middelaar
944
5346
Nederweert
946
12509
Nuth
951
9046
Roermond
957
32072
Schinnen
962
8128
Simpelveld
965
7751
Stein
971
12846
Vaals
981
6602
Venlo
983
62733
Venray
984
27546
Voerendaal
986
9713
Weert
988
31166
Valkenburg aan de Geul
994
10641
Lelystad
995
41268
Horst aan de Maas
1507
31067
Oude IJsselstreek
1509
27431
Teylingen
1525
21210
Utrechtse Heuvelrug
1581
35223
Oost Gelre
1586
20734
Koggenland
1598
13885
Lansingerland
1621
33431
Leudal
1640
24010
Maasgouw
1641
15435
Eemsmond
1651
12161
Gemert-Bakel
1652
22503
Halderberge
1655
21926
Heeze-Leende
1658
11431
Laarbeek
1659
16518
De Marne
1663
8377
Reusel-De Mierden
1667
9979
Roerdalen
1669
14937
Maasdonk
1671
7884
Rijnwoude
1672
12925
Roosendaal
1674
49189
Schouwen-Duiveland
1676
30863
Aa en Hunze
1680
20093
Borger-Odoorn
1681
20999
Cuijk
1684
13829
Landerd
1685
12363
De Wolden
1690
17880
Noord-Beveland
1695
9392
Wijdemeren
1696
18410
Noordenveld
1699
24041
Twenterand
1700
22945
Westerveld
1701
16019
Sint Anthonis
1702
9451
Lingewaard
1705
27588
Cranendonck
1706
16267
Steenwijkerland
1708
30925
Moerdijk
1709
27629
Echt-Susteren
1711
19949
Sluis
1714
26149
Drimmelen
1719
20229
Bernheze
1721
21334
Ferwerderadiel
1722
6029
Alphen-Chaam
1723
9178
Bergeijk
1724
15018
Bladel
1728
14972
Gulpen-Wittem
1729
9466
Tynaarlo
1730
25051
Midden-Drenthe
1731
26389
Overbetuwe
1734
32083
Hof van Twente
1735
28347
Neder-Betuwe
1740
15894
Rijssen-Holten
1742
22709
Geldrop-Mierlo
1771
26602
Olst-Wijhe
1773
12860
Dinkelland
1774
18417
Westland
1783
62315
Midden-Delfland
1842
11506
Berkelland
1859
34262
Bronckhorst
1876
31882
Sittard-Geleen
1883
64233
Kaag en Braassem
1884
18485
Dantumadiel
1891
13810
Zuidplas
1892
24095
Peel en Maas
1894
28059
Oldambt
1895
29098
Zwartewaterland
1896
13274
Súdwest-Fryslân
1900
1724
Bodegraven-Reeuwijk
1901
1697
Eijsden-Margraten
1903
4153
Stichtse Vecht
1904
2555
Menameradiel
1908
1421
Hollands Kroon
1911
1694
Leidschendam-Voorburg
1916
28051
De Friese Meren
1921
490
Goeree-Overflakkee
1924
2836
Pijnacker-Nootdorp
1926
28870
Molenwaard
1927
197
Nissewaard
1930
487
Krimpenerwaard
1931
32
De Fryske Marren
1940
493
Gooise Meren
1942
240
Berg en Dal
1945
2415
Meierijstad
1948
629
Waadhoeke
1949
435
Westerwolde
1950
168
Midden-Groningen
1952
1120
Beekdaelen
1954
5684
Montferland
1955
23210
Altena
1959
28
West Betuwe
1960
27
Vijfheerenlanden
1961
4151
Hoeksche Waard
1963
50
Het Hogeland
1966
29
Westerkwartier
1969
1112
Noardeast-Fryslân
1970
1172
Molenlanden
1978
3222
Eemsdelta
1979
2
Menterwolde
1987
8726
Onbekend
5600
40
Onbekend
9999
4
const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: true,
    vrButton: false,
    geocoder: true,
    homeButton: false,
    infoBox: false,
    selectionIndicator: true,
    timeline: false,
    shadows: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: true,
    scene3DOnly: true,
    shouldAnimate: false,
    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        maximumLevel: 19,
    })),
    terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
        "https://www.nederlandin3d.nl/viewer/datasource-data/882a9596-4d32-479a-a130-33cfbc713696", {
            requestVertexNormals: true
        }),
});

viewer.scene.globe.depthTestAgainstTerrain = true;

viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
const inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

try {
   const tileset = await Cesium.Cesium3DTileset.fromUrl(
     "https://www.3dtilesnederland.nl/tiles/1.0/implicit/nederland/758.json"
  );
  viewer.scene.primitives.add(tileset);
  viewer.flyTo(tileset);  
} catch (error) {
  console.log('Error loading tileset: ${error}');
}
  • Voorbeeld meerdere tilesets
  • Bezoek Hello World – Cesium Sandcastle
  • Kopieer onderstaande code in de javascript sectie
  • Vervang de camera start-coördinaten.
    Kies een centraal coördinaat in de door jou gekozen tileset.
    Start coördinaten kun je achterhalen met behulp van Google Maps.
    Vervang in het onderstaande voorbeeld de start-coördinaten 4.774394325, 51.581682074 door jouw start-coördinaten.
const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: true,
    vrButton: false,
    geocoder: true,
    homeButton: false,
    infoBox: false,
    selectionIndicator: true,
    timeline: false,
    shadows: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: true,
    scene3DOnly: true,
    shouldAnimate: false,
    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        maximumLevel: 19,
    })),
    terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
        "https://www.nederlandin3d.nl/viewer/datasource-data/882a9596-4d32-479a-a130-33cfbc713696", {
            requestVertexNormals: true
        }),
});

var ts;
viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
const inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

// haal alle tilesets
let response = await fetch("https://3dtilesnederland.nl/tiles/1.0/implicit/nederland/tilesetNL.json");
let tilesetNL = await response.json();

const go = async(tilesetNL) => {
    // voeg alle individuele tilesets toe
    Object.entries(tilesetNL).forEach(async([key, value]) => {
        value.forEach(async(val) => {
            const tileset = await Cesium.Cesium3DTileset.fromUrl(
                    val.url);
            viewer.scene.primitives.add(tileset);
        });
    });
};

try {
    // laad de tilesets
    go(tilesetNL);
    // center Utrecht
    viewer.scene.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(
            5.12222,
            52.09083,
            100000 ),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-90.0),
            roll: 0.0,
        },
    });

} catch (error) {
    console.log('Error loading tileset: ${error}');
}

Changelog

  • 17-10-2023: Baselayers uitgeschakeld. Terrein en Openstreetmap kaartlaag toegevoegd ter voorkoming van zwevende gebouwen.
  • 13-06-2024: directe navigatie naar gekozen tileset inclusief automatisch juiste zoomniveau
  • 13-06-2024: depthTestAgainstTerrain = true Hiermee voorkom je dat je door het terrein kunt navigeren/kijken