Помилка Mapbox: Стиль не завантажується


13

Я намагаюся намалювати карту на карті, грунтуючись на результатах 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);
        });
    }

Коли функція викликається, я отримую таку помилку:

Помилка: завантаження стилю не виконано

"використовувати строгий"; стиль функції (e, t, r) {this.animationLoop = t || нова AnimationLoop, this.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", "_ повторне розміщення"], це), this._resetUpdates (); var s = function (e, t) {if (e) return void this.fire ("помилка", {error: e}); if (! validateStyle.emitErrors (це, validateStyle (t))) {this._loaded =! 0, this.stylesheet = t, this.updateClasses (); var r = t.sources; for (var s in r) this.addSource (s, r [s]); t.sprite && (this.sprite = новий ImageSprite (t.sprite), this.sprite.on ("завантаження", this.fire.bind ( this, "change"))), this.glyphSource = новий GlyphSource (t.glyphs), this._resolve (), this.fire ("load")}}. bind (this); "string" == typeof e? ajax.getJSON (нормалізуватиURL (e), s): browser.frame (s .bind (this, null, e)), this.on ("source.load", функція (e) {var t = e.source; if (t && t.vectorLayerIds) for (var r у цьому._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 = вимагати (" ../ render / line_atlas "), util = вимагати (" ../ util / util "), ajax = вимагати (" ../ util / ajax "), нормалізуватиURL = вимагати (" ../ util / mapbox "). normalizeStyleURL, браузер = вимагати ("../ util / браузер"),Диспетчер = вимагати ("../ util / диспетчер"), AnimationLoop = вимагати ("./ animacija_loop"), validateStyle = вимагати ("./ validate_style"), джерело = вимагати ("../ джерело / джерело"), styleSpec = вимагають ("./ style_spec"), StyleFunction = вимагають ("./ style_function"); module.exports = Style, Style.prototype = util.inherit (Evented, {_ завантажено: 1, _validateLayer: function (e) {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 +'" ')})}, завантажено: function () {if (! this ._loaded) return! 1; for (var e у this.sources) if (! this.sources [e].завантажений ()) повернення! 1; повернути! цей.спит || цей.спиток.завантажений ()}, _ вирішити: функція () {var e, t; this._layers = {}, this._order = this.stylesheet. Slo.map (функція (e) {повернути e.id}); для (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Дата. зараз ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) киньте нову помилку ("Стиль не завантажується")} , update: function (e, t) {if (! this._updates.changed) повернути це; 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. ключі (this._updates.sources); for (s = 0; s = 0; r -) for (var s = this._order [r], i = 0; i

Я можу помітити помилку (виділену всередині блок-котировки), але я не маю уявлення, як її виправити ... Моя спроба виправити її використовувала map.on('load', function()), але я все одно отримую ту саму помилку.

Будь-які думки?


Ласкаво просимо в GIS SE! Як новий користувач не забудьте взяти екскурсію, щоб дізнатися про наш сфокусований формат запитань.
PolyGeo

Відповіді:


13

Візьміть L.marker([ln, lt], {icon: marker}).addTo(map);рядок і перемістіть його у функцію зворотного дзвінка для map.on('load')(один рядок безпосередньо там, де ви додаєте L.geoJsonоб'єкт). Це запобіжить спробі коду додати маркер до карти до ініціалізації стилю.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.