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. Así que concluí que no sé cómo administrar las capas, ya que soy nuevo en la sintaxis de mapbox y leaflet.
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 está cargando
"use 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 anular 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 ("load", this.fire.bind ( this, "change"))), this.glyphSource = new GlyphSource (t.glifos), 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 this._layers) {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: nuevo error ('Capa de origen "'+ e.sourceLayer +'" no existe en la fuente "'+ t.id +'" según lo especificado por la capa de estilo "'+ e.id +'" ')})}, cargado: función () {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. ahora ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) throw new Error ("El estilo no se carga")} , actualice: function (e, t) {if (! this._updates.changed) devuelva esto; 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. teclas (this._updates.sources); for (s = 0; s = 0; r -) for (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 el map.on('load', function()), pero todavía recibo el mismo error.
¿Alguna idea?