Листовки с низкой производительностью в WebView на Android - PullRequest
Новая
       31

Листовки с низкой производительностью в WebView на Android

1 голос
/ 18 марта 2019

Я использую leafletjs в приложении для Android для рендеринга локальных полигонов (без информации CRS) в формате геоджон, без картинок. К сожалению, масштабирование и другие движения касания очень запаздывают. Мой файл geojson содержит 3000 полигонов. Есть ли решение этой проблемы, единственное, что я могу найти, - это решение для маркеров.

Вот как это выглядит:

enter image description here

Вот мой код:

В onCreate: 

public void loadMap(){

        scanFiles();
        checkStoragePermissions();

        webview = (WebView) findViewById(R.id.myWebView);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // chromium, enable hardware acceleration
            webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
        } else {
            // older android version, disable hardware acceleration
            webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

        WebSettings webSettings =
                webview.getSettings();

        webSettings.setAllowFileAccess(true);
        webSettings.setAllowFileAccessFromFileURLs(true);

        webSettings.setJavaScriptEnabled(true);

        webview.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);

        webview.setWebChromeClient(
                new WebChromeClient());

        File leafletMap = new File(Environment.getExternalStorageDirectory(), "/LeafletMap/Map.html");

        webview.loadUrl("file:///" + leafletMap.getAbsolutePath());

    }

И мой HTML-файл: 

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <link rel="stylesheet" href="file:///android_asset/leaflet/leaflet.css">
    <script type="text/javascript" src="file:///android_asset/leaflet/leaflet.js"></script>

    <style>
    body {
            padding: 0;
            margin: 0;
        }
        html, body, #mapid {
            height: 100%;
            width: 100vw;
        }
    </style>

</head>

<body>

    <div id="mapid"></div>
    <script>
        var mymap = L.map('mapid', {
            crs: L.CRS.Simple
        });

        //Add local
        var layer;
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'file:///android_asset/poly.json');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.responseType = 'json';
        xhr.onload = function () {
            if (xhr.status !== 200) return
            var blahlayer = L.geoJSON(xhr.response).getBounds();

            mymap.fitBounds(blahlayer);

            L.geoJSON(xhr.response).addTo(mymap);
        };
        xhr.send();

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