J'essaie de dessiner sur une carte mapbox, basée sur les résultats de suncalc et en utilisant geojson. J'ai d'abord essayé de créer 2 fonctions, une pour chaque ligne que j'essayais de tracer. Mais quand je l'ai fait, cela n'affichait que la dernière fonction appelée. J'ai donc conclu que je ne sais pas comment gérer les couches, car je suis nouveau dans la syntaxe de mapbox et de brochure.
En utilisant des exemples de brochures, je suis arrivé à ce code:
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);
});
}Lorsque la fonction est appelée, j'obtiens l'erreur suivante:
Erreur: le chargement du style n'est pas terminé
"use strict"; fonction 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 = new ImageSprite (t.sprite), this.sprite.on ("load", this.fire.bind ( this, "change"))), this.glyphSource = new GlyphSource (t.glyphes), 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 = 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, {_ chargé:! 1, _validateLayer: fonction (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("error", {error: new Error ('Couche source "'+ e.sourceLayer +'" n'existe pas sur la source "'+ t.id +'" comme spécifié par le calque de style "'+ e.id +'" ')})}, chargé: function () {if (! this ._loaded) renvoie! 1; pour (var e dans this.sources) si (! this.sources [e].Load ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ resolve: function () {var e, t; this._layers = {}, this._order = this.stylesheet. couches.map (fonction (e) {return e.id}); pour (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Date. now ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) renvoie une nouvelle erreur ("Le style n'est pas terminé lors du chargement")} , update: function (e, t) {if (! this._updates.changed) renvoie ceci; 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. clés (this._updates.sources); pour (s = 0; s = 0; r -) pour (var s = this._order [r], i = 0; i
Je peux repérer l'erreur (mise en évidence à l'intérieur de blockquote), mais je n'ai aucune idée de la façon de la corriger ... Ma tentative de la corriger utilisait le map.on('load', function()), mais j'obtiens toujours la même erreur.
Des pensées?