MapBox जीएल जे एस लाइन परत मोबाइल पर इस मुद्दे प्रतिपादन

वोट
1

मैं एक स्थानीय वेक्टर टाइल सेवा की स्थापना की जो MapBox Protobuf प्रारूप में वेक्टर टाइल डेटा कार्य करता है। मैं भी वेक्टर टाइल डेटा प्रदर्शित करने के MapBox जीएल जे एस का उपयोग कर एक सरल जे एस ग्राहक लिखा था।

सब कुछ मेरी डेस्कटॉप ब्राउज़र पर ठीक प्रदान की गई है। हालांकि, जब मैं मोबाइल ब्राउज़र (विभिन्न उपकरणों) पर क्लाइंट ऐप खोला, उनमें से कुछ एक प्रतिपादन मुद्दा है - कुछ की तरह लग रहा लाइन परत (नीचे संलग्न स्क्रीन) की जेड स्तर के साथ कुछ गड़बड़ है।

सरलीकरण के लिए, मैं कोड टाइल सीमाओं पर लाइनों, क्षैतिज लाइनों और ऊर्ध्वाधर लाइनों के साथ ही Protobuf टाइल्स प्रदर्शित पोस्ट करेंगे। समस्या अभी भी प्रकट होता है, 'असली' नक्शा डेटा के साथ के रूप में ही।

अंक ब्राउज़र विशिष्ट नहीं है। बहुत ही उच्च स्क्रीन संकल्प के साथ Xiaomi रेडमी टिप्पणी 2, और कुछ सैमसंग: यह मोबाइल क्रोम और फ़ायरफ़ॉक्स पर दोनों देखा गया था 2 फोन पर। प्रतिपादन क्रोम के साथ एक एक्सपेरिया Z1 पर ठीक था। प्रतिपादन डेस्कटॉप ब्राउज़र पर ठीक है।

एक और बात - मैं MapBox उदाहरण पेज से वेक्टर टाइल उदाहरण की जाँच की और यह हर जगह ठीक हो जाता है।

प्रशन):

हो सकता है कि MapBox Protobuf / जीएल जे एस lib अनुभव के साथ किसी को किसी भी विचार क्या गलत हो सकता है? हो सकता है कि शैलियों कुछ सेटिंग याद कर रहे हैं ... या जीएल जे एस पुस्तकालय वेक्टर टाइल 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 सामग्री पैदा करने:

...
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));

        }
    }
}

स्क्रीनशॉट :

डेस्कटॉप ब्राउज़र - सब ठीक:

डेस्कटॉप

मोबाइल ब्राउज़र - लाइनों गायब हो जाते हैं:

मोबाइल

01/04/2016 को 13:12
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more