javascript - モバイルでの Mapbox GL JS ラインレイヤーのレンダリングの問題

Question

ベクタータイルデータを MapBox protobuf 形式で提供するローカルベクタータイルサービスをセットアップしました。また、Mapbox GL JS を使用してベクタータイルデータを表示する単純な JS クライアントも作成しました。

私のデスクトップブラウザでは、すべてが正常にレンダリングされます。ただし、モバイルブラウザー (さまざまなデバイス) でクライアントアプリを開くと、一部のブラウザーでレンダリングの問題が発生します。ラインレイヤーの z レベルに問題があるようです (下部に添付された画面)。

簡単にするために、protobuf タイルのみを表示するコードを投稿し、タイルの境界線、水平線、および垂直線に線を付けます。「実際の」マップデータと同じように、問題は引き続き発生します。

問題はブラウザ固有ではありません。それは、Xiaomi Redmi Note2 と、非常に高い画面解像度を持つ一部の Samsung の 2 台の携帯電話のモバイル chrome と Firefox の両方で発見されました。Chrome 搭載の Xperia Z1 では、レンダリングは問題ありませんでした。デスクトップブラウザでのレンダリングは問題ありません。

もう 1 つ - MapBox の例のページからベクタータイルの例を確認したところ、どこでも問題なくレンダリングされました。

質問:

MapBox protobuf / GL JS lib の経験がある人なら、何が問題なのかわかるでしょうか? たぶん、スタイルにいくつかの設定がありません... または、GL JS ライブラリには、供給されているベクタータイル pbf データに対して明らかではない要件がありますか?

クライアントアプリコード:

<html>
<head>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>Mapbox test</title>
    <link rel="stylesheet" href="css/mapbox-gl.css" type="text/css"/>
    <script src="js/mapbox-gl.js"></script>
    <script src="js/jquery.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<nav id="menu"></nav>
<div id='map'></div>
<script>
    mapboxgl.accessToken = 'MY_TOKEN';

    var tileBorders = {
        "id": "tile-borders",
        "type": "line",
        "source": "debug-grid",
        "source-layer": "debug_line_red",
        "paint": {
            "line-color": "#f00",
            "line-width": 1
        }
    };
    var debugLineGreen = {
        "id": "debug-green",
        "type": "line",
        "source": "debug-grid",
        "source-layer": "debug_line_green",
        "paint": {
            "line-color": "#0f0",
            "line-width": 1
        }
    };
    var debugLineBlue = {
        "id": "debug-blue",
        "type": "line",
        "source": "debug-grid",
        "source-layer": "debug_line_blue",
        "paint": {
            "line-color": "#00f",
            "line-width": 1
        }
    };


    var style = {
        "version": 8,
        "sources": {
            "debug-grid": {
                "type": "vector",
                "minzoom": 4,
                "tiles": ["http://localhost:18080/grid/{z}/{x}/{y}.pbf"]
            }
        },
        // using mapbox glyph and sprite resources
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        "sprite": "mapbox://sprites/mapbox/bright-v8",
        "layers": [tileBorders, debugLineGreen, debugLineBlue]
    };

    var map = new mapboxgl.Map({
        container: 'map',
        style: style,
        zoom: 13,
        center: [19.447303, 51.753574]
    });

    // view tilt controls
    var pitch = 0;
    function addLayer(name) {
        var link = document.createElement('a');
        link.href = '#';
        link.className = 'active';
        link.textContent = name;

        link.onclick = function (e) {
            e.preventDefault();
            e.stopPropagation();

            if (e.target.textContent === "^") {
                if (pitch <=60) {
                    pitch +=5;
                    map.setPitch(pitch);
                    this.className = '';
                }
            } else {
                this.className = 'active';
                if (pitch > 0) {
                    pitch -= 5;
                    map.setPitch(pitch);
                }
            }
        };
        var layers = document.getElementById('menu');
        layers.appendChild(link);
    }
    addLayer('^');
    addLayer('v');

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

pbf コンテンツを生成する Java クラス:

...
import no.ecc.vectortile.VectorTileEncoder;

public class GridTileSourceImpl implements TileSource {

    public byte[] getAsProtobuf(int zoom, int x, int y) throws TileSourceException {

        int dimension = DDSVectorTile.TILE_DIMENSION; // equals 16384, tried 4096 and 256
        int step = (dimension >= 16) ? dimension / 16 : dimension;

        VectorTileEncoder encoder = new VectorTileEncoder(dimension, 8, false);

        tileBorders(dimension, encoder);
        verticalLines(dimension, step, encoder);
        horizontalLines(dimension, step, encoder);

        return encoder.encode();
    }

    private void tileBorders(int dimension, VectorTileEncoder encoder) {
        Coordinate[] tileBorder = new Coordinate[4];
        tileBorder[0] = new Coordinate(0, 0);
        tileBorder[1] = new Coordinate(0, dimension);
        tileBorder[2] = new Coordinate(dimension, dimension);
        tileBorder[3] = new Coordinate(dimension, 0);
        encoder.addFeature("debug_line_red", Collections.emptyMap(),
                new GeometryFactory().createLineString(tileBorder));
    }

    private void horizontalLines(int dimension, int step, VectorTileEncoder encoder) {
        for (int x = 0; x < dimension; x += step) {
            Coordinate[] line = new Coordinate[2];
            line[0] = new Coordinate(x, 0);
            line[1] = new Coordinate(x, dimension);
            encoder.addFeature("debug_line_blue", Collections.emptyMap(),
                    new GeometryFactory().createLineString(line));

        }
    }

    private void verticalLines(int dimension, int step, VectorTileEncoder encoder) {
        for (int y = 0; y < dimension; y += step) {
            Coordinate[] line = new Coordinate[2];
            line[0] = new Coordinate(0, y);
            line[1] = new Coordinate(dimension, y);
            encoder.addFeature("debug_line_green", Collections.emptyMap(),
                    new GeometryFactory().createLineString(line));

        }
    }
}

スクリーンショット:

デスクトップブラウザ - すべて問題ありません:

デスクトップブラウザ - すべて問題ありません

モバイルブラウザ - 行が消える:

モバイルブラウザ - 行が消える

javascript - モバイルでの Mapbox GL JS ライン レイヤーのレンダリングの問題

0 に答える 0

Related

Reference

javascript - モバイルでの Mapbox GL JS ラインレイヤーのレンダリングの問題