Javascript 移动设备上的Mapbox GL JS线层渲染问题
我建立了一个本地矢量图块服务，它以MapBox protobuf格式提供矢量图块数据。我还使用Mapbox GL JS编写了一个简单的JS客户端来显示矢量图块数据 在我的桌面浏览器上，一切都呈现得很好。然而，当我在移动浏览器（各种设备）上打开客户端应用程序时，其中一些浏览器出现了渲染问题——看起来线条层的z层（底部连接的屏幕）有问题 为简化起见，我将发布代码，仅显示protobuf瓷砖，瓷砖边框上有线条、水平线和垂直线。问题仍然存在，与“真实”地图数据相同 问题不是特定于浏览器的。它出现在手机chrome和firefox上的两款手机上：小米Redmi Note2，以及一些屏幕分辨率非常高的三星手机。 在带有Chrome的Xperia Z1上渲染正常。 在桌面浏览器上渲染正常 还有一件事-我检查了MapBox示例页面中的矢量平铺示例，它到处都呈现ok 问题：Javascript 移动设备上的Mapbox GL JS线层渲染问题,javascript,mapbox-gl-js,vector-tiles,Javascript,Mapbox Gl Js,Vector Tiles,我建立了一个本地矢量图块服务，它以MapBox protobuf格式提供矢量图块数据。我还使用Mapbox GL JS编写了一个简单的JS客户端来显示矢量图块数据 在我的桌面浏览器上，一切都呈现得很好。然而，当我在移动浏览器（各种设备）上打开客户端应用程序时，其中一些浏览器出现了渲染问题——看起来线条层的z层（底部连接的屏幕）有问题 为简化起见，我将发布代码，仅显示protobuf瓷砖，瓷砖边框上有线条、水平线和垂直线。问题仍然存在，与“真实”地图数据相同 问题不是特定于浏览器的。它出现在手机c
<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>
...
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));
}
}
}
<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>
...
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));
}
}
}
地图盒测试
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken='MY_TOKEN'；
变量TileOrders={
“id”：“瓷砖边框”，
“类型”：“行”，
“源”：“调试网格”，
“源层”：“调试线\u红色”，
“油漆”：{
“线条颜色”：“f00”，
“线宽”：1
}
};
var debugLineGreen={
“id”：“调试绿色”，
“类型”：“行”，
“源”：“调试网格”，
“源层”：“调试线绿色”，
“油漆”：{
“线条颜色”：“0f0”，
“线宽”：1
}
};
var debugLineBlue={
“id”：“调试蓝色”，
“类型”：“行”，
“源”：“调试网格”，
“源层”：“调试线\u蓝”，
“油漆”：{
“线条颜色”：“00f”，
“线宽”：1
}
};
变量样式={
“版本”：8，
“资料来源”：{
“调试网格”：{
“类型”：“向量”，
“minzoom”：4，
“瓷砖”：[“http://localhost:18080/grid/{z} /{x}/{y}.pbf“]
}
},
//使用mapbox图示符和精灵资源
“字形”：mapbox://fonts/mapbox/{fontstack}/{range}.pbf“，
“雪碧”：mapbox://sprites/mapbox/bright-v8",
“层”：[TileOrders、debugLineGreen、debugLineBlue]
};
var map=new mapboxgl.map({
容器：“映射”，
风格：风格，
缩放：13，
中间：[19.447303,51.753574]
});
//视图倾斜控件
变桨距=0；
函数addLayer（名称）{
var link=document.createElement（'a'）；
link.href='#'；
link.className='active'；
link.textContent=名称；
link.onclick=函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
如果（e.target.textContent==“^”）{
中频（音高0）{
螺距-=5；
map.setPitch（节距）；
}
}
};
var layers=document.getElementById（'menu'）；
层。追加子对象（链接）；
}
添加层（'^'）；
addLayer（'v'）；
<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>
...
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));
}
}
}
。。。
进口编号ecc.vectortile.VectorTileEncoder；
公共类GridTileSourceImpl实现TileSource{
公共字节[]getAsProtobuf（整数缩放、整数x、整数y）抛出TileSourceException{
int-dimension=ddsvectrix.TILE_-dimension；//等于16384，尝试4096和256
int step=（维度>=16）？维度/16：维度；
VectorTileEncoder=新的VectorTileEncoder（尺寸，8，假）；
瓷砖订单（尺寸、编码器）；
垂直校准线（尺寸、步长、编码器）；
水平线（尺寸、步长、编码器）；
返回encoder.encode（）；
}
私有void TileOrder（整数维，矢量编码器）{
坐标[]TileOrder=新坐标[4]；
TileOrder[0]=新坐标（0,0）；
TileOrder[1]=新坐标（0，尺寸）；
TileOrder[2]=新坐标（尺寸，尺寸）；
TileOrder[3]=新坐标（尺寸，0）；
encoder.addFeature（“debug_line_red”），Collections.emptyMap（），
新建GeometryFactory（）.createLineString（TileOrder））；
}
专用void水平线（整数维、整数步长、矢量编码器）{
对于（int x=0；x如果您发布了一个使用生成的矢量图块的功能演示，那将非常有用。您在这个问题上有什么运气吗？