refactor(test): MapBoxMultiSource

iTowns · Feb 2, 2024 · 7df8e6b · 7df8e6b
1 parent 000cbd1
commit 7df8e6b
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 0 deletions.
diff --git a/examples/layers/JSONLayers/mapbox.json b/examples/layers/JSONLayers/mapbox.json
@@ -0,0 +1,75 @@
+{
+
+	"version": 8,
+	"name": "PLAN IGN",
+    "glyphs":"https://wxs.ign.fr/static/vectorTiles/fonts/{fontstack}/{range}.pbf",
+	"sprite": "https://wxs.ign.fr/static/vectorTiles/styles/PLAN.IGN/sprite/PlanIgn",
+    "sources": {
+        "plan_ign": {
+            "type": "vector",
+            "tiles": [
+                "https://wxs.ign.fr/essentiels/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf"
+            ]
+        },
+        "mapbox-streets": {
+            "tiles": [ "https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiYWR1dHJlbWJsZSIsImEiOiJjbGdtYnAwcmowNGJ5M2twcDlqNzhoZnd0In0.3mZbwDu-_Z_C1iaocLaE_A"],
+            "type": "vector"
+        }
+    },
+
+	"transition": {
+		"duration": 300,
+		"delay": 0
+
+	},
+
+	"layers": [
+        {
+            "id": "ocs - vegetation - zone boiséee, foret fermee, peupleraie",
+            "type": "fill",
+            "source": "plan_ign",
+            "source-layer": "ocs_vegetation_surf",
+            "layout": {
+                "visibility": "visible"
+            },
+            "filter": ["in","symbo",
+                                    "ZONE_BOISEE",
+                                    "ZONE_FORET_FERMEE_FEUIL",
+                                    "ZONE_FORET_FERMEE_CONI",
+                                    "ZONE_FORET_FERMEE_MIXTE",
+                                    "ZONE_PEUPLERAIE"
+
+            ],
+            "paint": {
+                "fill-color": "#C9E8BC",
+                "fill-opacity": "0.5"
+            }
+        },
+        {
+            "id": "zone batie",
+            "type": "fill",
+            "source": "plan_ign",
+            "source-layer": "bati_zone_surf",
+            "layout": {
+                "visibility": "visible"
+            },
+            "filter": ["==","symbo","ZONE_BATI"],
+            "paint": {
+                "fill-color": "#EEE0BD",
+                "fill-opacity": "0.5"
+            }
+        },
+        {
+            "id": "building",
+            "source": "mapbox-streets",
+            "source-layer": "building",
+            "type": "fill",
+            "paint": {
+                "fill-color": "red"
+            }
+        }
+
+	]
+
+}
+
diff --git a/examples/vector_tile_multisource.html b/examples/vector_tile_multisource.html
@@ -0,0 +1,78 @@
+<html>
+    <head>
+        <title>Itowns - Globe + color layers from vector data</title>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+    </head>
+    <body>
+        <div id="viewerDiv" class="viewer"></div>
+        <script src="js/GUI/GuiTools.js"></script>
+        <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="js/plugins/FeatureToolTip.js"></script>
+        <script type="text/javascript">
+            // # Simple Globe viewer
+            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
+
+            // Define initial camera position
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 6.2, 45.5),
+                range: 100000,
+            }
+
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            var viewerDiv = document.getElementById('viewerDiv');
+
+            // Instanciate iTowns GlobeView*
+            var view = new itowns.GlobeView(viewerDiv, placement);
+            var menuGlobe = new GuiTools('menuDiv', view);
+
+            setupLoadingScreen(viewerDiv, view);
+
+            // Add one imagery layer to the scene
+            // This layer is defined in a json file but it could be defined as a plain js
+            // object. See Layer* for more info.
+            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ColorLayer('Ortho', config);
+                view.addLayer(layer).then(function _() {
+                    menuGlobe.addLayerGUI.bind(menuGlobe);
+                    itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
+                });
+            });
+            // 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).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+
+
+            // Display the content of two GeoJSON files on terrain with ColorLayer and FileSource.
+            // The GeoJSONs are loaded from url, set in FileSource
+
+            // Declare the source for the data on Ariege area
+
+            const buildingsSource = new itowns.VectorTilesSource({
+                style: './layers/JSONLayers/mapbox.json'
+            });
+
+            console.log(buildingsSource);
+            const mapLayer = new itowns.ColorLayer('test', {
+                source: buildingsSource,
+            });
+            view.addLayer(mapLayer)
+
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
+        </script>
+    </body>
+</html>