Suncalc sonuçlarına ve geojson kullanarak bir mapbox haritası üzerinde çizmeye çalışıyorum. Önce çizmeye çalıştığım her satıra bir tane olmak üzere 2 fonksiyon oluşturmaya çalıştım. Ama bunu yaptığımda, sadece son çağrılan fonksiyonu gösterecekti. Bu nedenle, mapbox ve broşür sözdiziminde yeni olduğum için katmanları nasıl yöneteceğimi bilmediğim sonucuna vardım.
Broşür örneklerini kullanarak bu koda ulaştım:
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);
});
}
İşlev çağrıldığında, aşağıdaki hatayı alıyorum:
Hata: Stil yüklenmedi
"katı kullanın"; işlev Stili (e, t, r) {this.animationLoop = t || yeni AnimationLoop, this.dispatcher = yeni Dispatcher (r || 1, this), this.spriteAtlas = yeni SpriteAtlas (512,512), this.lineAtlas = yeni LineAtlas (256,512), this._layers = {}, this._order = [], this._groups = [], this.sources = {}, this.zoomHistory = {}, util.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], bu), this._resetUpdates (); var s = işlev (e, t) {eğer (e) bu boşluğu döndürür ("hata", {hata: e}); if (! validateStyle.emitErrors (this, validateStyle (t))) {this._loaded =! 0, this.stylesheet = t, this.updateClasses (); var r = t.sources; için (r in var) this.addSource (s, r [s]); t.sprite && (this.sprite = yeni ImageSprite (t.sprite), this.sprite.on ("yükleme", this.fire.bind ( this, "change"))), this.glyphSource = yeni GlyphSource (t.glifler), this._resolve (), this.fire ("load")}}. bind (this); "string" == typeof e? ajax.getJSON (normalizeURL (e), s): tarayıcı.frame (s) .bind (this, null, e)), this.on ("kaynak.yükleme", işlev (e) {var t = e.source; if (t && t.vectorLayerIds) için (this._layers içinde var) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = zorunlu ("../ util / evented"), StyleLayer = requir ("./ style_layer "), ImageSprite = gerektirir (" ./ image_sprite "), GlyphSource = (gerektiren" ../ simge / glyph_source "), SpriteAtlas = gerektirir (" ../ sembol / sprite_atlas "), LineAtlas = (gerektiren" ../ / line_atlas işlemek "= gerektirir util) (" ../ util / util "), ajax = gerektirir (" ../ util / ajax "), normalizeURL gerektirir = (" ../ util / mapbox "). normalizeStyleURL, tarayıcı = ( "../ util / tarayıcı") gerektirirDispatcher = gerektiren ( "../ util / memuru "), AnimationLoop = (" ./ animation_loop ") gerektirir, validateStyle (" ./ validate_style ") gerektiren = Kaynak = (" ../ kaynak / kaynak") gerektirir, ! styleSpec = ( "./ style_spec "), StyleFunction = (" ./ style_function") gerektirir gerektiren; module.exports = Stil, Style.prototype = util.inherit (Evented {_ yüklendi: 1, _validateLayer: fonksiyonu (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("hata", {hata: yeni Hata ('Kaynak katmanı "'+ e.sourceLayer +'", "'+ e.id +'" ')})} stil katmanında belirtildiği gibi "' + t.id + '" kaynağında mevcut değil: function () {if (! this ._loaded) döndür!!loaded ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ resol: function () {var e, t; this._layers = {}, this._order = this.stylesheet. layers.map (işlev (e) {dönüş e.id}); (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Tarih. Şimdi ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) yeni bir Hata atın ("Stil yüklenmiyor")} , update: function (e, t) {if (! this._updates.changed) bunu döndürür; this._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); else {var r = Object.keys (this._updates.layers); r.length && this._updateWorkerLayers (r)} var s, i = Nesne. tuşları (this._updates.sources); (var s = this._order [r], i = 0; i için (s = 0; s = 0; r -)
Hatayı tespit edebilirim (blockquote içinde vurgulanır), ancak nasıl düzeltileceğim hakkında hiçbir fikrim yok ... Düzeltme girişimim kullanıyordu map.on('load', function()), ama yine de aynı hatayı alıyorum.
Düşüncesi olan var mı?