Sto cercando di disegnare su una mappa mapbox, sulla base dei risultati di suncalc e usando geojson. Per prima cosa ho provato a creare 2 funzioni, una per ogni linea che stavo cercando di disegnare. Ma quando l'ho fatto, visualizzava solo l'ultima funzione chiamata. Quindi ho concluso che non so come gestire i livelli, poiché sono nuovo nella sintassi di mapbox e leaflet.
Usando esempi di opuscoli, sono arrivato a questo codice:
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);
});
}
Quando viene chiamata la funzione, viene visualizzato il seguente errore:
Errore: caricamento dello stile non completato
"usa rigoroso"; Stile funzione (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"], questo), this._resetUpdates (); var s = function (e, t) {if (e) return void this.fire ("error", {errore: e}); if (! validateStyle.emitErrors (this, 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 = new ImageSprite (t.sprite), this.sprite.on ("load", this.fire.bind ( questo, "cambia"))), this.glyphSource = new GlyphSource (t.glifi), 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) for (var r in this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = request ("../ util / evented"), StyleLayer = Require ("./ style_layer "), ImageSprite = require (" ./ image_sprite "), GlyphSource = require (" ../ simbolo / glyph_source "), SpriteAtlas = require (" ../ simbolo / sprite_atlas "), LineAtlas = richiedono (" ../ rendering / line_atlas "), util = richiedono (" ../ util / util "), = ajax richiedono (" ../ util / ajax "), normalizeURL = require (" ../ util / mapbox "). normalizeStyleURL, del browser = richiedono ( "../ util / del browser"),Dispatcher = richiedono ( "../ util / dispatcher "), AnimationLoop = require (" ./ animation_loop "), validateStyle = require (" ./ validate_style "), Fonte = require (" ../ fonte / source"), ! styleSpec = require ( "./ style_spec "), StyleFunction = richiedono (" ./ style_function"); module.exports = Stile, Style.prototype = util.inherit (Evented, {_ caricato: 1, _validateLayer: function (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("errore", {errore: nuovo errore ('livello sorgente "'+ e.sourceLayer +'" non esiste sul sorgente "'+ t.id +'" come specificato dal livello stile "'+ e.id +'" ')})}, caricato: 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 ()}, _ resol: 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. ora ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) genera un nuovo errore ("Lo stile non è stato caricato")} , aggiorna: function (e, t) {if (! this._updates.changed) restituisce questo; 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. chiavi (this._updates.sources); per (s = 0; s = 0; r -) per (var s = this._order [r], i = 0; i
Riesco a individuare l'errore (evidenziato all'interno di Blockquote), ma non ho idea di come risolverlo ... Il mio tentativo di risolverlo stava usando il map.on('load', function()), ma ho ancora lo stesso errore.
qualche idea?