1

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

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

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

问题不是特定于浏览器的。它在 2 部手机上的移动 chrome 和 Firefox 上都被发现：小米 Redmi Note2 和一些屏幕分辨率非常高的三星。在带有 Chrome 的 Xperia Z1 上渲染没问题。在桌面浏览器上渲染是可以的。

还有一件事 - 我从 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));

        }
    }
}

截图：

桌面浏览器 - 一切正常：

桌面浏览器 - 一切正常

移动浏览器 - 线条消失：

移动浏览器 - 线条消失

4

0 回答 0