ข้อผิดพลาดของ Mapbox: การโหลดสไตล์ไม่เสร็จสิ้น


13

ฉันพยายามวาดแผนที่ mapbox โดยอิงจากผลลัพธ์ของ suncalc และใช้ geojson ก่อนอื่นฉันพยายามสร้าง 2 ฟังก์ชั่นหนึ่งอันต่อหนึ่งบรรทัดที่ฉันพยายามวาด แต่เมื่อฉันทำอย่างนั้นมันจะแสดงเฉพาะฟังก์ชั่นสุดท้ายที่เรียกว่า ดังนั้นฉันจึงสรุปว่าฉันไม่รู้วิธีจัดการเลเยอร์เนื่องจากฉันใหม่กับ mapbox และไวยากรณ์ของใบปลิว

ใช้ตัวอย่างแผ่นพับฉันได้รหัสนี้:

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

เมื่อเรียกใช้ฟังก์ชันฉันได้รับข้อผิดพลาดต่อไปนี้:

ข้อผิดพลาด: การโหลดสไตล์ไม่เสร็จสิ้น

"use เข้มงวด"; ฟังก์ชั่นสไตล์ (e, t, r) {this.animationLoop = t || ใหม่ AnimationLoop, this.dispatcher = ใหม่ Dispatcher (r | | 1, นี้), this.spriteAtlas = SpriteAtlas ใหม่ (512,512) this.lineAtlas = ใหม่ LineAtlas (256,512), this._layers = {}, this._order = [], this._groups = [], this.sources = {}, this.zoomHistory = {}, util.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], นี้), this._resetUpdates (); var s = ฟังก์ชั่น (e, t) {ถ้า (e) คืนค่าโมฆะนี้ {ข้อผิดพลาด: e}); ถ้า (! validateStyle.emitErrors (นี่ validateStyle (t))) {this._loaded =! 0, this.stylesheet = t, this.updateClasses (); var r = t.sources; (var s in r) this.addSource (s, r [s]); t.sprite && (this.sprite = new ImageSprite (t.sprite), this.sprite.on ("โหลด", this.fire.bind ( สิ่งนี้ "เปลี่ยน"))) this.glyphSource = ใหม่ GlyphSource (tร่ายมนตร์) this._resolve (), this.fire ("load")}}. ผูก (this); "string" == typeof e? ajax.getJSON (normalizeURL (e), s): browser.frame (s) .bind (นี่, null, e)), this.on ("source.load", ฟังก์ชัน (e) {var t = e.source; if (t && t.vectorLayerIds) สำหรับ (var r ใน this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = ต้องการ ("../ util / evented"), StyleLayer = ต้องการ ("./ style_layer ") ImageSprite = ต้อง (" ./ image_sprite ") GlyphSource = ต้อง (" ../ สัญลักษณ์ / glyph_source ") SpriteAtlas = ต้อง (" ../ สัญลักษณ์ / sprite_atlas ") LineAtlas = ต้อง (" ../ ทำให้ / line_atlas ") util = ต้อง (" ../ util / util "), อาแจ็กซ์ = ต้อง (" ../ util / อาแจ็กซ์ ") normalizeURL = ต้อง (" ../ util / mapbox "). normalizeStyleURL, เบราว์เซอร์ = ต้อง ( "../ util / เบราว์เซอร์")รีบ = ต้อง ( "../ util / มอบหมายงาน ") AnimationLoop = ต้อง (" ./ animation_loop ") validateStyle = ต้อง (" ./ validate_style ") ที่มา = ต้อง (" ../ แหล่งที่มา / แหล่งที่มา") ! styleSpec = ต้อง ( "./ style_spec ") StyleFunction = ต้อง (" ./ style_function"); module.exports = สไตล์ Style.prototype = util.inherit (Evented {_ โหลด: 1, _validateLayer: ฟังก์ชั่น (จ) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("ข้อผิดพลาดใหม่", "ข้อผิดพลาดใหม่" (เลเยอร์แหล่งที่มา) "'+ e.sourceLayer +'" ไม่มีอยู่ในแหล่งที่มา "'+ t.id +'" ตามที่ระบุโดยเลเยอร์สไตล์ "'+ e.id +'" '')})}, โหลด: ฟังก์ชั่น () {ถ้า (! ._loaded) return! 1; สำหรับ (var e ใน this.sources) ถ้า (! this.sources [e]โหลด ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ edit: function () {var e, t; this._layers = {}, this._order = this.stylesheet layer.map (ฟังก์ชั่น (e) {return e.id}); (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = วันที่ ตอนนี้ ()), t.lastZoom = E},_checkLoaded: function () {ถ้า (! this._loaded) ส่งข้อผิดพลาดใหม่ ("โหลดสไตล์ไม่เสร็จ")}อัปเดต: ฟังก์ชั่น (e, t) {ถ้า (! this._updates.changed) ส่งคืนสิ่งนี้ถ้า ( this._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); else {var r = Object.keys (this._updates.layers); r.length && this._updateWorkerLayers (r)} keys (this._updates.sources); สำหรับ (s = 0; s = 0; r -) สำหรับ (var s = this._order [r], i = 0; i

ฉันสามารถตรวจพบข้อผิดพลาด (ไฮไลต์ภายใน blockquote) แต่ฉันไม่รู้ว่าจะแก้ไขได้อย่างไร ... ฉันพยายามแก้ไขโดยใช้map.on('load', function())แต่ฉันยังคงได้รับข้อผิดพลาดเดิม

ความคิดใด ๆ


ยินดีต้อนรับสู่ GIS SE! ในฐานะผู้ใช้ใหม่อย่าลืมทัวร์ชมเพื่อเรียนรู้เกี่ยวกับรูปแบบ Q&A ที่เราเน้น
PolyGeo

คำตอบ:


13

รับL.marker([ln, lt], {icon: marker}).addTo(map);สายและย้ายไปไว้ที่ฟังก์ชันการโทรกลับmap.on('load')(หนึ่งบรรทัดด้านบนซึ่งคุณเพิ่มL.geoJsonวัตถุ) สิ่งนี้จะป้องกันไม่ให้รหัสพยายามเพิ่มเครื่องหมายลงในแผนที่ก่อนที่จะเริ่มต้นสไตล์

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.