Kesalahan Mapbox: Gaya belum selesai memuat


13

Saya mencoba menggambar di peta mapbox, berdasarkan hasil suncalc dan menggunakan geojson. Pertama saya mencoba membuat 2 fungsi, satu untuk setiap baris yang saya coba gambar. Tetapi ketika saya melakukan itu, itu hanya akan menampilkan fungsi terakhir yang disebut. Jadi saya menyimpulkan bahwa saya tidak tahu cara mengelola layer, karena saya baru menggunakan sintaks mapbox dan leaflet.

Dengan menggunakan contoh leaflet, saya mendapatkan kode ini:

JAVASCRIPT

    function drawOnMap(sAz){
        //sun calculation stuff, doesn't matter for the problem
        var lt = parseFloat(document.getElementById('lat').value);
        var ln = parseFloat(document.getElementById('long').value);   

        var R = 6371000; //Earth's radius
        var d = 10000* Math.sin(1); // Distance
        var brngSR = deg2rad(sAz);

        var ltr = deg2rad(lt);    

        var latSR = rad2deg(Math.asin( Math.sin(ltr)*Math.cos(d/R) + Math.cos(ltr)*Math.sin(d/R)*Math.cos(brngSR) ));
        var lonSR = ln + rad2deg(Math.atan2(Math.sin(brngSR)*Math.sin(d/R)*Math.cos(ltr), Math.cos(d/R)-Math.sin(ltr)*Math.sin(latSR)));


        var out3 = calculateNOAA(lat, lon, timeZone, year, month, day, out[6], out[7], out[8]);
        var sEl2 = out3[11];
        var sAz2 = out3[9];

        var brngSS = deg2rad(sAz2);   

        var latSS = rad2deg(Math.asin( Math.sin(ltr)*Math.cos(d/R) + Math.cos(ltr)*Math.sin(d/R)*Math.cos(brngSS) ));
        var lonSS = ln + rad2deg(Math.atan2(Math.sin(brngSS)*Math.sin(d/R)*Math.cos(ltr), Math.cos(d/R)-Math.sin(ltr)*Math.sin(latSS)));

        //GeoJSON to display 2 lines 
        var sunPos = [
            {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [ln, lt], 
                        [lonSR, latSR]
                    ]
                },
                "properties": {"id": "sunrise"}
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [ln, lt],
                        [lonSS, latSS]
                    ]
                },
                "properties": {"id": "sunset"}
            }
        ];

        //setting map to current position
        mapboxgl.accessToken = 'pk.<mytoken>'; //I'm using a real token
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [ln, lt],
            zoom: 15
        });    
        var marker = L.icon({
            iconUrl: 'actpin.png',
            iconAnchor: [20, 50]
        });

        L.marker([ln, lt], {icon: marker}).addTo(map);
        //adding the layer to map with different colors each line
        map.on('load', function () {
            L.geoJson(sunPos, {
                style: function(feature) {
                    switch (feature.properties.id) {
                        case 'sunrise': return {color: "#FFFF33"};
                        case 'sunset':   return {color: "#FF9933"};
                    }
                }
            }).addTo(map);
        });
    }

Ketika fungsi dipanggil, saya mendapatkan kesalahan berikut:

Kesalahan: Gaya tidak selesai memuat

"use strict"; function Style (e, t, r) {this.animationLoop = t || AnimationLoop baru, this.dispatcher = Dispatcher baru (r || 1, ini), this.spriteAtlas = SpriteAtlas baru (512,512), this.lineAtlas = LineAtlas baru (256.512), this._layers = {}, this._order = [], this._groups = [], this.sources = {}, this.zoomHistory = {}, util.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], ini), this._resetUpdates (); var s = fungsi (e, t) {jika (e) mengembalikan void this.fire ("error", " {error: e}); if (! validateStyle.emitErrors (this, validateStyle (t))) {this._loaded =! 0, this.stylesheet = t, this.updateClasses (); var r = t.sources; for (var s dalam r) this.addSource (s, r [s]); t.sprite && (this.sprite = ImageSprite baru (t.sprite), this.sprite.on ("load", this.fire.bind ( ini, "ubah"))), this.glyphSource = new GlyphSource (t.mesin terbang), this._resolve (), this.fire ("load")}} .bind (ini); "string" == typeof e? ajax.getJSON (normalizeURL (e), s): browser.frame (s .bind (this, null, e)), this.on ("source.load", function (e) {var t = e.source; if (t && t.vectorLayerIds) untuk (var r dalam this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = membutuhkan ("../ util / evented"), StyleLayer = membutuhkan ("./ style_layer "), ImageSprite = membutuhkan (" ./ image_sprite "), GlyphSource = membutuhkan (" ../ simbol / glyph_source "), SpriteAtlas = membutuhkan (" ../ simbol / sprite_atlas "), LineAtlas = membutuhkan (" ../ render / line_atlas "), util = require (" ../ util / util "), ajax = membutuhkan (" ../ util / ajax "), normalizeURL = butuhkan (" ../ util / mapbox "). normalizeStyleURL, browser = membutuhkan ("../ util / browser"),Dispatcher = butuhkan ("../ util / dispatcher"), AnimationLoop = require ("./ animation_loop"), validateStyle = butuhkan ("./ validate_style"), Source = membutuhkan ("../ sumber / sumber"), styleSpec = membutuhkan ("./ style_spec"), StyleFunction = membutuhkan ("./ style_function"); module.exports = Style, Style.prototype = util.inherit (Diperlihatkan, {_ dimuat:! 1, _validateLayer: fungsi (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("kesalahan", {error: new error ('Source layer) "'+ e.sourceLayer +'" tidak ada di sumber "'+ t.id +'" seperti yang ditentukan oleh lapisan gaya "'+ e.id +'" ')})}, dimuat: function () {if (! this ._loaded) return! 1; for (var e in this.sources) if (! this.sources [e].dimuat ()) kembali! 1; kembali! this.sprite || this.sprite.loaded ()}, _ resolasikan: function () {var e, t; this._layers = {}, this._order = this.stylesheet. layers.map (fungsi (e) {return e.id}); untuk (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Tanggal. sekarang ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) melempar Kesalahan baru ("Gaya tidak selesai memuat")} , perbarui: fungsi (e, t) {if (! this._updates.changed) kembalikan ini; if ( this._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); else {var r = Object.keys (this._updates.layers); r.length && this._updateWorkerLayers (r)} var s, i = Object. kunci (this._updates.sources); untuk (s = 0; s = 0; r -) untuk (var s = this._order [r], i = 0; i

Saya dapat menemukan kesalahan (disorot di dalam blockquote), tetapi saya tidak tahu cara memperbaikinya ... Upaya saya untuk memperbaikinya menggunakan map.on('load', function()), tetapi saya masih mendapatkan kesalahan yang sama.

Adakah pikiran?


Selamat datang di GIS SE! Sebagai pengguna baru, pastikan untuk mengikuti Tur untuk mempelajari tentang format Tanya Jawab kami yang terfokus.
PolyGeo

Jawaban:


13

Ambil L.marker([ln, lt], {icon: marker}).addTo(map);garis dan pindahkan ke fungsi callback untuk map.on('load')(satu baris tepat di atas tempat Anda menambahkan L.geoJsonobjek). Ini akan mencegah kode mencoba menambahkan penanda ke peta sebelum gaya diinisialisasi.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.