feat(protocol): add Source

Add new object source: - Source have the properties to fetch the data to display - Remove all source abstractions from provider
iTowns · Aug 22, 2018 · 492530f · 492530f
1 parent fc83923
commit 492530f
Show file tree

Hide file tree

Showing 70 changed files with 1,671 additions and 1,726 deletions.
diff --git a/examples/cubic_planar.html b/examples/cubic_planar.html
@@ -30,6 +30,7 @@
             var obj;
             var offset;
             var tileLayer;
+            var config;
 
             var wmsLayers = [
                 'fpc_fond_plan_communaut.fpcilot',
@@ -108,42 +109,49 @@
                 parent.add(obj);
                 obj.updateMatrixWorld(true);
 
-                tileLayer = itowns.createPlanarLayer('planar' + wms + index, extent, { object3d: obj });
-                tileLayer.disableSkirt = true;
+                config = {
+                    object3d: obj,
+                    // Since the elevation layer use color textures, specify min/max z
+                    materialOptions: {
+                        useColorTextureElevation: true,
+                        colorTextureElevationMinZ: -600,
+                        colorTextureElevationMaxZ: 400,
+                    },
+                    disableSkirt: true,
+                };
+
+                tileLayer = itowns.createPlanarLayer('planar' + wms + index, extent, config);
 
                 view.addLayer(tileLayer);
 
                 view.addLayer({
-                    url: 'https://download.data.grandlyon.com/wms/grandlyon',
-                    networkOptions: { crossOrigin: 'anonymous' },
                     type: 'color',
-                    protocol: 'wms',
-                    version: '1.3.0',
                     id: 'wms_imagery' + wms + index,
-                    name: wms,
-                    projection: 'EPSG:3946',
-                    format: 'image/jpeg',
+                    source: {
+                        protocol: 'wms',
+                        url: 'https://download.data.grandlyon.com/wms/grandlyon',
+                        version: '1.3.0',
+                        name: wms,
+                        projection: 'EPSG:3946',
+                        format: 'image/jpeg',
+                        extent,
+                    },
                 }, tileLayer);
 
                 view.addLayer({
-                    url: 'https://download.data.grandlyon.com/wms/grandlyon',
-                    type: 'elevation',
-                    protocol: 'wms',
-                    networkOptions: { crossOrigin: 'anonymous' },
-                    version: '1.3.0',
                     id: 'wms_elevation' + wms + index,
-                    name: 'MNT2012_Altitude_10m_CC46',
-                    projection: 'EPSG:3946',
-                    heightMapWidth: 256,
-                    format: 'image/jpeg',
+                    type: 'elevation',
+                    source: {
+                        protocol: 'wms',
+                        extent,
+                        version: '1.3.0',
+                        name: 'MNT2012_Altitude_10m_CC46',
+                        projection: 'EPSG:3946',
+                        heightMapWidth: 256,
+                        format: 'image/jpeg',
+                        url: 'https://download.data.grandlyon.com/wms/grandlyon',
+                    },
                 }, tileLayer);
-
-                // Since the elevation layer use color textures, specify min/max z
-                tileLayer.materialOptions = {
-                    useColorTextureElevation: true,
-                    colorTextureElevationMinZ: -600,
-                    colorTextureElevationMaxZ: 400,
-                };
             }
 
             // Since PlanarView doesn't create default controls, we manipulate directly three.js camera

diff --git a/examples/globe_vector.html b/examples/globe_vector.html
@@ -43,6 +43,7 @@
         <script src="js/FeatureToolTip.js"></script>
         <script type="text/javascript">
             // # Simple Globe viewer
+            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
 
             // Define initial camera position
             var positionOnGlobe = { longitude: 3.5, latitude: 44, altitude: 1000000 };
@@ -71,26 +72,30 @@
 
             promises.push(globeView.addLayer({
                 type: 'color',
-                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
-                protocol: 'rasterizer',
                 id: 'Kml',
                 name: 'kml',
                 transparent: true,
+                source: {
+                    protocol: 'file',
+                    url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
+                    projection: 'EPSG:4326',
+                },
             }));
 
             promises.push(globeView.addLayer({
                 type: 'color',
-                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx',
-                protocol: 'rasterizer',
                 id: 'Gpx',
                 name: 'Ultra 2009',
                 transparent: true,
+                source: {
+                    url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx',
+                    protocol: 'file',
+                    projection: 'EPSG:4326',
+                },
             }));
 
             promises.push(globeView.addLayer({
                 type: 'color',
-                url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson',
-                protocol: 'rasterizer',
                 id: 'ariege',
                 name: 'ariege',
                 transparent: true,
@@ -99,13 +104,18 @@
                     fillOpacity: 0.5,
                     stroke: 'white',
                 },
+                source: {
+                    url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson',
+                    protocol: 'file',
+                    projection: 'EPSG:4326',
+                },
             }));
 
             // Listen for globe full initialisation event
             globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                 // eslint-disable-next-line no-console
                 console.info('Globe initialized');
-                Promise.all(promises).then(function () {
+                Promise.all(promises).then(function _() {
                     itowns.ColorLayersOrdering.moveLayerToIndex(globeView, 'Ortho', 0);
 
                     new ToolTip(globeView, document.getElementById('viewerDiv'), document.getElementById('tooltipDiv'));

diff --git a/examples/globe_vector_tiles.html b/examples/globe_vector_tiles.html
@@ -33,15 +33,18 @@
             // define pole texture
             view.wgs84TileLayer.noTextureColor = new itowns.THREE.Color(0x95c1e1);
 
+            view.atmosphere.visible = false;
+
             setupLoadingScreen(viewerDiv, view);
             function addLayerCb(layer) {
                 return view.addLayer(layer);
             }
 
             // Add two elevation layers.
             // These will deform iTowns globe geometry to represent terrain elevation.
-            promises.push(itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addLayerCb));
-            promises.push(itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addLayerCb));
+            // promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(addLayerCb));
+            // promises.push(itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addLayerCb));
+            // promises.push(itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addLayerCb));
 
             // Add a vector tile layer
             itowns.Fetcher.json('https://raw.githubusercontent.com/Oslandia/postile-openmaptiles/master/style.json').then(function (style) {
@@ -58,12 +61,14 @@
 
                 promises.push(view.addLayer({
                     type: 'color',
-                    protocol: 'xyz',
                     id: 'MVT',
-                    // eslint-disable-next-line no-template-curly-in-string
-                    url: 'https://osm.oslandia.io/data/v3/${z}/${x}/${y}.pbf',
-                    format: 'application/x-protobuf;type=mapbox-vector',
-                    options: {
+                    source: {
+                        protocol: 'xyz',
+                        // eslint-disable-next-line no-template-curly-in-string
+                        url: 'https://osm.oslandia.io/data/v3/${z}/${x}/${y}.pbf',
+                        format: 'application/x-protobuf;type=mapbox-vector',
+                        projection: 'EPSG:4326',
+                        origin: 'top',
                         attribution: {
                             name: 'OpenStreetMap',
                             url: 'http://www.openstreetmap.org/',
@@ -72,10 +77,7 @@
                             min: 2,
                             max: 14,
                         },
-                        opacity: 0.5,
-                    },
-                    updateStrategy: {
-                        type: itowns.STRATEGY_DICHOTOMY,
+                        tileMatrixSet: 'PM',
                     },
                     style: mapboxStyle,
                     filter: mapboxFilter(supportedLayers),
@@ -89,6 +91,7 @@
                 Promise.all(promises).then(function () {
                     menuGlobe.addImageryLayersGUI(view.getLayers(function (l) { return l.type === 'color'; }));
                     menuGlobe.addElevationLayersGUI(view.getLayers(function (l) { return l.type === 'elevation'; }));
+                    // itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
                 }).catch(console.error);
             });
         </script>

diff --git a/examples/globe_wfs_extruded.html b/examples/globe_wfs_extruded.html
@@ -91,27 +91,30 @@
 
             globeView.addLayer({
                 name: 'lyon_tcl_bus',
+                id: 'WFS Bus lines',
                 type: 'geometry',
                 update: itowns.FeatureProcessing.update,
                 convert: itowns.Feature2Mesh.convert({
                     color: colorLine,
                     altitude: altitudeLine }),
                 linewidth: 5,
                 filter: acceptFeatureBus,
-                url: 'https://download.data.grandlyon.com/wfs/rdata?',
-                protocol: 'wfs',
-                version: '2.0.0',
-                id: 'WFS Bus lines',
-                typeName: 'tcl_sytral.tcllignebus',
-                level: 9,
-                projection: 'EPSG:3946',
-                extent: {
-                    west: 1822174.60,
-                    east: 1868247.07,
-                    south: 5138876.75,
-                    north: 5205890.19,
-                },
-                format: 'geojson',
+                source: {
+                    protocol: 'wfs',
+                    url: 'https://download.data.grandlyon.com/wfs/rdata?',
+                    version: '2.0.0',
+                    typeName: 'tcl_sytral.tcllignebus',
+                    projection: 'EPSG:3946',
+                    extent: {
+                        west: 1822174.60,
+                        east: 1868247.07,
+                        south: 5138876.75,
+                        north: 5205890.19,
+                    },
+                    zoom: { min: 9, max: 9 },
+                    format: 'geojson',
+                    networkOptions: { crossOrigin: 'anonymous' },
+                }
             });
 
             function colorBuildings(properties) {
@@ -154,6 +157,7 @@
 
             globeView.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
             globeView.addLayer({
+                id: 'WFS Buildings',
                 type: 'geometry',
                 update: itowns.FeatureProcessing.update,
                 convert: itowns.Feature2Mesh.convert({
@@ -165,16 +169,23 @@
                     meshes.push(mesh);
                 },
                 filter: acceptFeature,
-                url: 'http://wxs.ign.fr/72hpsel8j8nhb5qgdh07gcyp/geoportail/wfs?',
-                networkOptions: { crossOrigin: 'anonymous' },
-                protocol: 'wfs',
-                version: '2.0.0',
-                id: 'WFS Buildings',
-                typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
-                level: 14,
-                projection: 'EPSG:4326',
-                ipr: 'IGN',
-                format: 'application/json',
+                source: {
+                    url: 'http://wxs.ign.fr/72hpsel8j8nhb5qgdh07gcyp/geoportail/wfs?',
+                    networkOptions: { crossOrigin: 'anonymous' },
+                    protocol: 'wfs',
+                    version: '2.0.0',
+                    typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
+                    projection: 'EPSG:4326',
+                    ipr: 'IGN',
+                    format: 'application/json',
+                    zoom: { min: 14, max: 14 },
+                    extent: {
+                        west: 4.568,
+                        east: 5.18,
+                        south: 45.437,
+                        north: 46.03,
+                    },
+                }
             });
 
             function configPointMaterial(result) {
@@ -217,16 +228,23 @@
                 size: 5,
                 onMeshCreated: configPointMaterial,
                 filter: selectRoad,
-                url: 'http://wxs.ign.fr/72hpsel8j8nhb5qgdh07gcyp/geoportail/wfs?',
-                networkOptions: { crossOrigin: 'anonymous' },
-                protocol: 'wfs',
-                version: '2.0.0',
-                id: 'WFS Route points',
-                typeName: 'BDPR_BDD_FXX_LAMB93_20170911:pr',
-                level: 12,
-                projection: 'EPSG:2154',
-                ipr: 'IGN',
-                format: 'application/json',
+                source: {
+                    url: 'http://wxs.ign.fr/72hpsel8j8nhb5qgdh07gcyp/geoportail/wfs?',
+                    networkOptions: { crossOrigin: 'anonymous' },
+                    protocol: 'wfs',
+                    version: '2.0.0',
+                    id: 'WFS Route points',
+                    typeName: 'BDPR_BDD_FXX_LAMB93_20170911:pr',
+                    zoom: { min: 12, max: 12 },
+                    projection: 'EPSG:2154',
+                    ipr: 'IGN',
+                    format: 'application/json',
+                    extent: new itowns.Extent('EPSG:4326',
+                        -5.160007066832147,
+                        10.671941031325312,
+                        41.338373237911036,
+                        51.07519774631159).as('EPSG:2154'),
+                }
             });
 
             var menuGlobe = new GuiTools('menuDiv', globeView);
@@ -260,25 +278,25 @@
             }
 
             for (let layer of globeView.getLayers()) {
-                if (layer.id === 'WFS Bus lines') {
-                    layer.whenReady.then( function _(layer) {
-                        var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
-                        debug.GeometryDebug.addMaterialLineWidth(gui, globeView, layer, 1, 10);
-                    });
-                }
+                // if (layer.id === 'WFS Bus lines') {
+                //     layer.whenReady.then( function _(layer) {
+                //         var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
+                //         debug.GeometryDebug.addMaterialLineWidth(gui, globeView, layer, 1, 10);
+                //     });
+                // }
                 if (layer.id === 'WFS Buildings') {
                     layer.whenReady.then( function _(layer) {
                         var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
                         debug.GeometryDebug.addWireFrameCheckbox(gui, globeView, layer);
                         window.addEventListener('mousemove', picking, false);
                     });
                 }
-                if (layer.id === 'WFS Route points') {
-                    layer.whenReady.then( function _(layer) {
-                        var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
-                        debug.GeometryDebug.addMaterialSize(gui, globeView, layer, 1, 50);
-                    });
-                }
+                // if (layer.id === 'WFS Route points') {
+                //     layer.whenReady.then( function _(layer) {
+                //         var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
+                //         debug.GeometryDebug.addMaterialSize(gui, globeView, layer, 1, 50);
+                //     });
+                // }
             }
         </script>
     </body>

diff --git a/examples/js/FeatureToolTip.js b/examples/js/FeatureToolTip.js
@@ -2,7 +2,7 @@
 // eslint-disable-next-line no-unused-vars
 function ToolTip(viewer, viewerDiv, tooltip, precisionPx) {
     var mouseDown = 0;
-    var layers = viewer.getLayers(function _(l) { return l.protocol === 'rasterizer'; });
+    var layers = viewer.getLayers(function _(l) { return l.source && l.source.protocol === 'file'; });
 
     document.body.onmousedown = function onmousedown() {
         ++mouseDown;
@@ -36,7 +36,7 @@ function ToolTip(viewer, viewerDiv, tooltip, precisionPx) {
             for (i = 0; i < layers.length; i++) {
                 layer = layers[i];
                 result = itowns.FeaturesUtils.filterFeaturesUnderCoordinate(
-                    geoCoord, layer.feature, precision);
+                    geoCoord, layer.source.parsedData, precision);
                 result.sort(function compare(a, b) { return b.feature.type !== 'point'; });
                 for (p = 0; p < result.length; p++) {
                     visible = true;