Tôi đang cố vẽ trên bản đồ hộp bản đồ, dựa trên kết quả của suncalc và sử dụng Geojson. Đầu tiên tôi cố gắng tạo 2 hàm, mỗi hàm tôi đang cố vẽ. Nhưng khi tôi làm điều đó, nó sẽ chỉ hiển thị chức năng cuối cùng được gọi. Vì vậy, tôi đã kết luận rằng tôi không biết cách quản lý các lớp, vì tôi chưa quen với cú pháp của mapbox và tờ rơi.
Sử dụng các ví dụ về tờ rơi, tôi nhận được mã này:
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);
});
}Khi hàm được gọi, tôi gặp lỗi sau:
Lỗi: Kiểu không tải xong
"sử dụng nghiêm ngặt"; kiểu 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.source = {}, this.zoomHistory = {}, produc.bind ALL ([ "_forwardSourceEvent", "_ ForwardTileEvent", "_ ForwardLayerEvent", "_ redoPlocation"], 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.updateC Cầu (); var r = t.source; (var s in r) this.addSource (s, r [s]); t.sprite && (this.sprite = new ImageSprite (t.sprite), this.sprite.on ("load", this.fire.bind ( này, "thay đổi"))), this.glyphSource = new GlyphSource (t.glyphs), 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) cho (var r in this._layers) {var s = this._layers [r]; s.source === t.id && this._validateLayer (s)}})} var Evented = Yêu cầu ("../ produc / evented"), StyleLayer = quiries ("./ style_layer "), ImageSprite = quiries (" ./ image_sprite "), GlyphSource = quiries (" ../ Symbol / glyph_source "), SpriteAtlas = quiries render / line_atlas "), produc = quiries (" ../ produc / produc "), ajax = quiries (" ../ produc / ajax "), normalizeURL = quiries (" ../ produc / mapbox "). normalizeStyleURL, trình duyệt = yêu cầu ("../ produc / browser"),Dispatcher = quiries ("../ produc / disatcher"), AnimationLoop = quiries ("./ animation_loop"), validateStyle = quiries ("./ validate_style"), Source = quiries ("../ source / source"), styleSpec = quiries ("./ style_spec"), StyleFunction = quiries (" {var t = this.source [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("error", {error: new Error ('error) "'+ e.sourceLayer +'" không tồn tại trên nguồn "'+ t.id +'" như được chỉ định bởi lớp kiểu "'+ e.id +'" ')})}, oad: function () {if (! này ._loaded) return! 1; for (var e in this.source) if (! this.source [e].đã tải ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ giải quyết: 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. ngay bây giờ ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) đưa ra Lỗi mới ("Kiểu không tải xong")} , update: function (e, t) {if (! this._updates.changed) trả về điều này; if (! this ._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); other {var r = Object.keys (this._updates.layers); r.length && this._updateWorker (s) các khóa (this._updates.source); for (s = 0; s = 0; r -) for (var s = this._order [r], i = 0; i
Tôi có thể phát hiện ra lỗi (được tô sáng bên trong blockquote), nhưng tôi không biết làm thế nào để sửa nó ... Tôi đã cố gắng sửa nó bằng cách sử dụng map.on('load', function()), nhưng tôi vẫn gặp lỗi tương tự.
Có suy nghĩ gì không?