gis javascript – Error de Mapbox: el estilo no se ha terminado de cargar

Pregunta:

Estoy tratando de dibujar en un mapa mapbox, basado en los resultados de suncalc y usando geojson. Primero intenté crear 2 funciones, una para cada línea que intentaba dibujar. Pero cuando hice eso, solo mostraría la última función llamada. Entonces llegué a la conclusión de que no sé cómo administrar las capas, ya que soy nuevo en la sintaxis de mapbox y folletos.

Usando ejemplos de folletos, llegué a este código:

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

Cuando se llama a la función, aparece el siguiente error:

Error: el estilo no se ha terminado de cargar

"usar estricto"; función Style (e, t, r) {this.animationLoop = t || new AnimationLoop, this.dispatcher = new Dispatcher (r || 1, this), this.spriteAtlas = new SpriteAtlas (512,512), this.lineAtlas = new LineAtlas (256,512), this._layers = {}, this._order = [], this._groups = [], this.sources = {}, this.zoomHistory = {}, util.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], this), this._resetUpdates (); var s = function (e, t) {if (e) return 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 en r) this.addSource (s, r [s]); t.sprite && (this.sprite = new ImageSprite (t.sprite), this.sprite.on ("cargar", this.fire.bind ( this, "change"))), this.glyphSource = new GlyphSource (t.glyphs), this._resolve (), this.fire ("load")}}. bind (this); "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) para (var r en esto._ capas) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = require ("../ util / evented"), StyleLayer = require ( "./style_layer"), ImageSprite = require ("./ image_sprite"), GlyphSource = require ("../ symbol / glyph_source"), SpriteAtlas = require ("../ symbol / sprite_atlas"), LineAtlas = require ( "../render/line_atlas"),util=require("../util/util"),ajax=require("../util/ajax"),normalizeURL=require("../util/mapbox" ) .normalizeStyleURL, browser = require ("../ util / browser"), Dispatcher = require ("../ util / dispatcher"), AnimationLoop = require ("./ animation_loop"), validateStyle = require ("./ validate_style "), Source = require (" ../ source / source "), styleSpec = require (" ./ style_spec "), StyleFunction = require (" ./ style_function "); module.exports = Style, Style.prototype = util.inherit (Evented, {_loaded:! 1, _validateLayer: function (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && – 1 === t.vectorLayerIds.indexOf (e.sourceLayer ) && this.fire ("error", {error: new Error ('Capa de origen "' + e.sourceLayer + '" no existe en fuente "'+ t.id +'" según lo especificado por la capa de estilo "'+ e.id +'" ')})}, cargado: function () {if (! this._loaded) return! 1; for (var e in this.sources) if (! this.sources [e] .loaded ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ resolve: function () {var e, t; this ._layers = {}, this._order = this.stylesheet.layers.map (function (e) {return e.id}); for (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math .floor (e + 1), t.lastIntegerZoomTime = Date.now ()), t.lastZoom = e}, _checkLoaded: function () {if (! this._loaded) throw new Error ("El estilo no se ha terminado de cargar" )} , update: function (e, t) {if (! this._updates.changed) return this; 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.keys (this._updates.sources); para (s = 0; s = 0; r -) para (var s = this._order [r], i = 0; i

Puedo detectar el error (resaltado dentro de blockquote), pero no tengo idea de cómo solucionarlo … Mi intento de solucionarlo fue usando map.on('load', function()) , pero sigo obteniendo lo mismo error.

¿Alguna idea?

Respuesta:

Tome el L.marker([ln, lt], {icon: marker}).addTo(map); line y map.on('load') a la función de devolución de llamada para map.on('load') (una línea directamente arriba de donde agrega el objeto L.geoJson ). Esto evitará que el código intente agregar el marcador al mapa antes de que se inicialice el estilo.

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım