我正在尝试基于suncalc结果并使用geojson在mapbox地图上绘制。首先，我尝试创建2个函数，对于要绘制的每一行，一个函数。但是当我这样做时，它只会显示最后一个调用的函数。所以我得出结论，因为我不熟悉mapbox和Leaflet语法，所以我不知道如何管理图层。
使用传单示例，我得到了以下代码：
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);
});
}
调用该函数时，出现以下错误：
错误：样式未完成加载
“使用严格”；函数Style（e，t，r）{this.animationLoop = t || new AnimationLoop，this.dispatcher = new Dispatcher（r || 1，this），this.spriteAtlas = new SpriteAtlas（512,512）， this.lineAtlas =新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 （r中的var s）this.addSource（s，r [s]）; t.sprite &&（this.sprite = new ImageSprite（t.sprite），this.sprite.on（“ load”，this.fire.bind（ this，“ change”）））），this.glyphSource =新的GlyphSource（t。字形），this._resolve（），this.fire（“ load”）}}。bind（this）;“ string” == 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.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：new Error（'Source layer样式层“'+ e.id +'”'）}）}}}}，加载的：“（+ e.sourceLayer +'”不存在于源“'+ t.id +'”上：function（）{if（！this ._loaded）return！1; for（var.this.sources）if（！this.sources [e]。loading（））return！1; return！this.sprite || this.sprite.loaded（）}，_ resolve：function（）{var e，t; this._layers = {}，this._order = this.stylesheet。 layer.map（function（e）{return e.id}）; for（var r = 0; rMath.floor（e）&&（t.lastIntegerZoom = Math.floor（e + 1），t.lastIntegerZoomTime = Date。 now（）），t.lastZoom = e}，_checkLoaded：function（）{if（！this._loaded）引发新错误（“样式未完成加载”）}，update：function（e，t）{if（！this._updates.changed）返回此； 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。键（this._updates.sources）;对于（s = 0; s = 0; r--）对于（var s = this._order [r]，i = 0; i
我可以发现错误（在blockquote内突出显示），但是我不知道如何解决它。我尝试使用修复它map.on('load', function())，但仍然遇到相同的错误。
有什么想法吗？