Question

我有一个本地矢量图块服务设置，它以MapBox protobuf格式提供矢量图块数据。我还使用Mapbox GL JS编写了一个简单的JS客户端来显示矢量切片数据。

我的桌面浏览器上的一切都很好。但是，当我在移动浏览器（各种设备）上打开客户端应用程序时，其中一些会出现渲染问题 - 看起来行层的z级错误（底部附着的屏幕）。

为简化起见，我将发布仅显示带有线条边框，水平线和垂直线条的protobuf图块的代码。这个问题仍然存在，与“真实”相同。地图数据。

问题不是特定于浏览器的。在2款手机上发现了移动Chrome和firefox：小米Redmi Note2和一些屏幕分辨率非常高的三星。使用Chrome的Xperia Z1渲染效果还可以。在桌面浏览器上渲染是可以的。

还有一件事 - 我在MapBox示例页面中检查了矢量图块示例，它在任何地方都可以呈现。

问题（S）：

也许有人使用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));

        }
    }
}

截图：

桌面浏览器 - 一切正常：

Desktop browser - all fine

移动浏览器 - 线条消失：

Mobile browser - lines disappear

移动设备上的Mapbox GL JS线层渲染问题

0 个答案: