view.addLayer refresh the map

moutz commented 5 years ago

Hello,

I have some button in an app that launch multiple "addLayer" and "removeLayer". But each time I use this function, it looks like the whole map is being rerendered, is it a normal behavior ?

I think I have a similar problem on init, I wait for the event GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, then I call a view.addLayer(....) function, but the layer is not showing. If i do an action on the map (zoom or moving using mouse), this will rerendered the map and the layer is showing.

Can you tell me what is the best pratice to add/remove layer without rerendered the whole view ?

Thank you in advance. Mz

moutz commented 5 years ago

Having this issue only with ColorLayer. view.addLayer() doesn't rerender the map with a GeometryLayer.

moutz commented 5 years ago

Here is an example base on the globe_vector.html example to show the effect i'm talking about. When you add/remove a layer, the whole texture freeze before being rerendered.

<html>
    <head>
        <title>Itowns - Test add/remove layer</title>

        <style type="text/css">            
            .buttons {                
                background-image: linear-gradient(rgba(80, 80, 80,0.95), rgba(60, 60, 60,0.95));
                box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.5);
                margin-top: 20px;
                margin-left: 20px;
                padding: 10px;
                right: 0;
                position: absolute;
                z-index: 1000;
                color: #CECECE;
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                line-height: 18px;
                text-align: left;
            }            
        </style>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div class="buttons">
            <button onclick="addLayer()">add Layer</button><button onclick="removeLayer()">remove layer</button>
        </div>
        <div id="viewerDiv" class="viewer"></div>        
        <script src="../dist/itowns.js"></script>        
        <script type="text/javascript">
            // # Simple Globe viewer
            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */

            // Define initial camera position
            var positionOnGlobe = { longitude: 1, latitude: 43, altitude: 150000 };

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);            

            // 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 _() {                    
                    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);
            }
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

            var promises = [];

            var ariegeSource = null;
            // Convert by iTowns
            promises.push(itowns.Fetcher.json('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
                .then(function _(geojson) {
                    return itowns.GeoJsonParser.parse(geojson, {
                        buildExtent: true,
                        crsIn: 'EPSG:4326',
                        crsOut: view.tileLayer.extent.crs(),
                        mergeFeatures: true,
                        withNormal: false,
                        withAltitude: false,
                    });
                }).then(function _(parsedData) {
                    ariegeSource = new itowns.FileSource({
                        parsedData,
                    });

                    addLayer();
                }));

            function addLayer(){
                var ariegeLayer = new itowns.ColorLayer('ariege', {
                    name: 'ariege',
                    transparent: true,
                    style: {
                        fill: 'orange',
                        fillOpacity: 0.5,
                        stroke: 'white',
                    },
                    source: ariegeSource,
                });

                view.addLayer(ariegeLayer);

            }

            function removeLayer(){                
                view.removeLayer('ariege')
            }
        </script>
    </body>
</html>

zarov commented 5 years ago

Hello, I suspect that this only happens when using a FileSource ? If so, it may be related to #1040 which shouldn't be closed in fact. I'll take a look to see if I can find a better fix.

moutz commented 5 years ago

Hello, thank you for answering.

Yes I spotted this bug only using a FileSource. I didn't see the #1040 issue, I understand better where this bug come from now but it's hard for me to explain it or find a fix. I'll watch it in deep later but if you have any idea on how to fix this, tell me, I'll be happy to help.

mgermerie commented 3 years ago

Hello @moutz, thanks for your feedback on iTowns. I tried to reproduce your issue with the current iTowns version (2.33). When you write :

When you add/remove a layer, the whole texture freeze before being rerendered.

does the behaviour you describe is the one shown bellow ?

output

vocalyang commented 12 months ago

@zarov I also have this issue with colorlayer adding filesource causing all tiles to refresh. Have you resolved it？

mgermerie commented 11 months ago

Duplicated in #2190.

iTowns / itowns

view.addLayer refresh the map #1082