Ich versuche auf einer Mapbox-Karte zu zeichnen, basierend auf SunCalc-Ergebnissen und Geojson. Zuerst habe ich versucht, zwei Funktionen zu erstellen, eine für jede Linie, die ich zeichnen wollte. Aber wenn ich das tat, würde es nur die zuletzt aufgerufene Funktion anzeigen. Daher kam ich zu dem Schluss, dass ich nicht weiß, wie die Ebenen verwaltet werden sollen, da ich noch nicht mit der Mapbox- und Prospektsyntax vertraut bin.
Anhand von Flugblattbeispielen bin ich zu folgendem Code gekommen:
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);
});
}Beim Aufruf der Funktion erhalte ich folgende Fehlermeldung:
Fehler: Der Style wurde nicht geladen
"use strict"; Funktion 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 in r) this.addSource (s, r [s]); t.sprite && (this.sprite = neuer ImageSprite (t.sprite), this.sprite.on ("load", this.fire.bind ( this, "change"))), this.glyphSource = new GlyphSource (t.Glyphen), 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", Funktion (e) {var t = e.source; if (t && t.vectorLayerIds) für (var r in this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = require ("../ util / evented"), StyleLayer = require ("./ style_layer "), ImageSprite = erfordern (" ./ image_sprite "), GlyphSource = erfordern (" ../ symbol / glyph_source "), SpriteAtlas = erfordern (" ../ symbol / sprite_atlas "), LineAtlas = erfordern (" ../ render / line_atlas "), util = require (" ../ util / util "), ajax = require (" ../ util / ajax "), normalizeURL = require (" ../ util / mapbox "). normalizeStyleURL, browser = require ("../ util / browser"),Dispatcher = erfordern ("../ util / dispatcher"), AnimationLoop = erfordern ("./ animation_loop"), validateStyle = erfordern ("./ validate_style"), Source = erfordern ("../ 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 ('Source layer "'+ e.sourceLayer +'" existiert nicht in der Quelle "'+ t.id +'", wie in der Stilebene "'+ e.id +'" 'angegeben.})}, loaded: 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. layer.map (Funktion (e) {return e.id}); für (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 ("Style wird nicht geladen")} , update: function (e, t) {if (! this._updates.changed) return this; if ( this._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); else {var r = Objektschlüssel (this._updates.layers); r.Länge && this._updateWorkerLayers (r)} var s, i = Objekt. Schlüssel (this._updates.sources); für (s = 0; s = 0; r -) für (var s = this._order [r], i = 0; i
Ich kann den Fehler erkennen (in blockquote hervorgehoben), aber ich habe keine Ahnung, wie ich ihn beheben kann ... Mein Versuch, ihn zu beheben, war mit dem map.on('load', function()), aber ich erhalte immer noch den gleichen Fehler.
Irgendwelche Gedanken?