私は、suncalcの結果に基づいてgeojsonを使用して、マップボックスマップに描画しようとしています。最初に、描画しようとしていた各行に1つずつ、2つの関数を作成しようとしました。しかし、それを行うと、最後に呼び出された関数のみが表示されます。だから私は、mapboxとリーフレットの構文は初めてなので、レイヤーの管理方法がわからないと結論付けました。
リーフレットの例を使用して、次のコードに到達しました。
ジャバスクリプト
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);
});
}関数が呼び出されると、次のエラーが表示されます。
エラー：スタイルの読み込みが完了していません
"use strict";関数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。グリフ）、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（this._layersのvar r）{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.sourceLayer +'」は、スタイルレイヤー「 '+ e.id +'」 '）}）}、loaded：function（）{if（！this ._loaded）return！1; for（this.sourcesの変数e）if（！this.sources [e]。loaded（））return！1; return！this.sprite || this.sprite.loaded（）}、_ resolve：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。 now（））、t.lastZoom = e}、_checkLoaded：function（）{if（！this._loaded）throw new Error（ "スタイルはロードされていません"）}、update：function（e、t）{if（！this._updates.changed）return this; 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。 keys（this._updates.sources）; for（s = 0; s = 0; r-）for（var s = this._order [r]、i = 0; i
エラーを見つけることができます（blockquote内で強調表示）が、それを修正する方法がわかりませんmap.on('load', function())。
何かご意見は？