Saya mencoba menggambar di peta mapbox, berdasarkan hasil suncalc dan menggunakan geojson. Pertama saya mencoba membuat 2 fungsi, satu untuk setiap baris yang saya coba gambar. Tetapi ketika saya melakukan itu, itu hanya akan menampilkan fungsi terakhir yang disebut. Jadi saya menyimpulkan bahwa saya tidak tahu cara mengelola layer, karena saya baru menggunakan sintaks mapbox dan leaflet.
Dengan menggunakan contoh leaflet, saya mendapatkan kode ini:
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);
});
}Ketika fungsi dipanggil, saya mendapatkan kesalahan berikut:
Kesalahan: Gaya tidak selesai memuat
"use strict"; function Style (e, t, r) {this.animationLoop = t || AnimationLoop baru, this.dispatcher = Dispatcher baru (r || 1, ini), this.spriteAtlas = SpriteAtlas baru (512,512), this.lineAtlas = LineAtlas baru (256.512), this._layers = {}, this._order = [], this._groups = [], this.sources = {}, this.zoomHistory = {}, util.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], ini), this._resetUpdates (); var s = fungsi (e, t) {jika (e) mengembalikan 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 dalam r) this.addSource (s, r [s]); t.sprite && (this.sprite = ImageSprite baru (t.sprite), this.sprite.on ("load", this.fire.bind ( ini, "ubah"))), this.glyphSource = new GlyphSource (t.mesin terbang), this._resolve (), this.fire ("load")}} .bind (ini); "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) untuk (var r dalam this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = membutuhkan ("../ util / evented"), StyleLayer = membutuhkan ("./ style_layer "), ImageSprite = membutuhkan (" ./ image_sprite "), GlyphSource = membutuhkan (" ../ simbol / glyph_source "), SpriteAtlas = membutuhkan (" ../ simbol / sprite_atlas "), LineAtlas = membutuhkan (" ../ render / line_atlas "), util = require (" ../ util / util "), ajax = membutuhkan (" ../ util / ajax "), normalizeURL = butuhkan (" ../ util / mapbox "). normalizeStyleURL, browser = membutuhkan ("../ util / browser"),Dispatcher = butuhkan ("../ util / dispatcher"), AnimationLoop = require ("./ animation_loop"), validateStyle = butuhkan ("./ validate_style"), Source = membutuhkan ("../ sumber / sumber"), styleSpec = membutuhkan ("./ style_spec"), StyleFunction = membutuhkan ("./ style_function"); module.exports = Style, Style.prototype = util.inherit (Diperlihatkan, {_ dimuat:! 1, _validateLayer: fungsi (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("kesalahan", {error: new error ('Source layer) "'+ e.sourceLayer +'" tidak ada di sumber "'+ t.id +'" seperti yang ditentukan oleh lapisan gaya "'+ e.id +'" ')})}, dimuat: function () {if (! this ._loaded) return! 1; for (var e in this.sources) if (! this.sources [e].dimuat ()) kembali! 1; kembali! this.sprite || this.sprite.loaded ()}, _ resolasikan: function () {var e, t; this._layers = {}, this._order = this.stylesheet. layers.map (fungsi (e) {return e.id}); untuk (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Tanggal. sekarang ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) melempar Kesalahan baru ("Gaya tidak selesai memuat")} , perbarui: fungsi (e, t) {if (! this._updates.changed) kembalikan ini; 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. kunci (this._updates.sources); untuk (s = 0; s = 0; r -) untuk (var s = this._order [r], i = 0; i
Saya dapat menemukan kesalahan (disorot di dalam blockquote), tetapi saya tidak tahu cara memperbaikinya ... Upaya saya untuk memperbaikinya menggunakan map.on('load', function()), tetapi saya masih mendapatkan kesalahan yang sama.
Adakah pikiran?
sumber
Jawaban:
Ambil
L.marker([ln, lt], {icon: marker}).addTo(map);garis dan pindahkan ke fungsi callback untukmap.on('load')(satu baris tepat di atas tempat Anda menambahkanL.geoJsonobjek). Ini akan mencegah kode mencoba menambahkan penanda ke peta sebelum gaya diinisialisasi.sumber