itowns/examples/entwine_3d_loader.html at f49e3f36991fe067e6965d3a6a5385d58b2c74c3 · iTowns/itowns · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
    <head>
        <title>iTowns - Entwine 3D loader</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "lil": "https://unpkg.com/lil-gui@0.20.0/dist/lil-gui.esm.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.182.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.182.0/examples/jsm/",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
            }
        }
        </script>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <style type="text/css">
            #description {
                z-index: 2;
                left: 10px;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="description">Specify the URL of a Entwine Point Tree to load:
            <input type="text" id="loadUrl" />
            <button id='loadUrlBtn'>Load</button>
            <button id="loadLyonBtn">Load "Grand Lyon" dataset</button>
            <div id="share"></div>
        </div>
        <div id="viewerDiv"></div>

        <script type="module">

            // TODO rempa click
            import lil from 'lil';
            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';
            import { zoomToLayerGlobe } from './jsm/PointCloudHelper.js';
            import {getShareableURL} from './jsm/ExampleUtils.js';

            var debugGui = new lil();
            var viewerDiv = document.getElementById('viewerDiv');

            var view = new itowns.GlobeView(viewerDiv);

            // Add one imagery layer to the scene and the miniView
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            const orthoConfig = await itowns.Fetcher.json('./layers/JSONLayers/Ortho.json');
            orthoConfig.source = new itowns.WMTSSource(orthoConfig.source);
            var orthoLayer = new itowns.ColorLayer('Ortho', orthoConfig);
            view.addLayer(orthoLayer);

            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer);
            }
            const ignMntHighResConfig = await itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json');
            addElevationLayerFromConfig(ignMntHighResConfig);
            const worldDtmConfig = await itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json');
            addElevationLayerFromConfig(worldDtmConfig);

            // Check if an url had been given as an argument
            // and parse to get url and options.
            const urlParams = new URL(location).searchParams;
            let url = urlParams.get('ept');
            urlParams.delete('ept');

            const options = {};
            for (const [k, v] of urlParams) {
                options[k] = isNaN(parseFloat(v, 10)) ? v : parseFloat(v, 10);
            }

            loadEPT(url, options);

            var eptLayer;
            function onLayerReady() {
                zoomToLayerGlobe(view, eptLayer);
                debug.PointCloudDebug.initTools(view, eptLayer, debugGui);
            }

            function loadEPT(url, options) {
                if(!url) return;
                document.getElementById('share').innerHTML = `<a href="${getShareableURL(url, "ept")}" target="_blank">Link to share this view</a>`;


                const eptSource = new itowns.EntwinePointTileSource({ url });

                if (eptLayer) {
                    eptLayer.debugUI.destroy();
                    view.removeLayer('Entwine Point Tile');
                    view.notifyChange();
                    eptLayer.delete();
                }

                const config = {
                    source: eptSource,
                    crs: view.referenceCrs,
                    ...options,
                };

                eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', config);

                itowns.View.prototype.addLayer.call(view, eptLayer).then(onLayerReady);
            }

            const loadUrlBtn = document.getElementById('loadUrlBtn');
            loadUrlBtn.addEventListener('click', () => {
                url = document.getElementById('loadUrl').value;
                loadEPT(url);
            });

            const loadLyonBtn = document.getElementById('loadLyonBtn');
            loadLyonBtn.addEventListener('click', () => {
                url = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
                loadEPT(url);
            });

        </script>
    </body>
</html>