suncalc 결과와 geojson을 사용하여 mapbox 맵을 그리려고합니다. 먼저 두 줄의 함수를 만들려고했습니다. 그러나 그렇게하면 마지막으로 호출 된 함수 만 표시됩니다. 그래서 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);
});
}
함수가 호출되면 다음 오류가 발생합니다.
오류 : 스타일을로드하지 못했습니다
"엄격한 사용"; 함수 스타일 (e, t, r) {this.animationLoop = t || new AnimationLoop, this.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 (r의 var) this.addSource (s, r [s]); t.sprite && (this.sprite = new ImageSprite (t.sprite), this.sprite.on ( "load", this.fire.bind ( this, "change"))), this.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 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 = 요구 ("./image_sprite"),GlyphSource= 요구 ( "../symbol/glyph_source"),SpriteAtlas= 요구 ("../symbol/sprite_atlas"),LineAtlas= 요구 ( "../ render / line_atlas "), util = require ("../ util / util "), ajax = require ("../ util / ajax "), normalizeURL = require ("../ util / mapbox "). normalizeStyleURL, browser = 필수 ( "../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 ( '소스 계층 " '+ e.sourceLayer +'"는 스타일 레이어 " '+ e.id +'" ')')})}에 의해 지정된 소스 " '+ t.id +'"에 존재하지 않습니다., 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 (function (e) {return e.id}); for (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = 날짜. 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); for (s = 0; s = 0; r-) for (var s = this._order [r], i = 0; i
오류를 발견 할 수는 있지만 (블록 인용 부호 안에 강조 표시되어 있음) 수정 방법을 모릅니다 ... 수정하려고하면을 사용 map.on('load', function())했지만 여전히 동일한 오류가 발생합니다.
이견있는 사람?