Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

view.addLayer refresh the map #1082

Open
moutz opened this issue Mar 22, 2019 · 7 comments
Open

view.addLayer refresh the map #1082

moutz opened this issue Mar 22, 2019 · 7 comments
Assignees
Labels
Milestone

Comments

@moutz
Copy link

moutz commented Mar 22, 2019

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
Copy link
Author

moutz commented Mar 22, 2019

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

@moutz
Copy link
Author

moutz commented Mar 24, 2019

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
Copy link
Contributor

zarov commented Mar 25, 2019

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.

@zarov zarov added the bug 🐛 label Mar 25, 2019
@moutz
Copy link
Author

moutz commented Mar 25, 2019

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.

@gchoqueux gchoqueux added this to the to strike milestone Jan 17, 2020
@mgermerie
Copy link
Contributor

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

@mgermerie mgermerie modified the milestones: to strike, 2.xx.x Oct 13, 2022
@mgermerie mgermerie removed their assignment Oct 13, 2022
@vocalyang
Copy link

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

@mgermerie
Copy link
Contributor

Duplicated in #2190.

@mgermerie mgermerie self-assigned this Sep 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants