मैं एक मैपबॉक्स मानचित्र पर आकर्षित करने की कोशिश कर रहा हूं, जो कि suncalc परिणामों और geojson के उपयोग के आधार पर है। पहले मैंने 2 कार्य बनाने की कोशिश की, एक-एक पंक्ति जिसे मैं खींचने की कोशिश कर रहा था। लेकिन जब मैंने ऐसा किया, तो यह केवल पिछले फ़ंक्शन को प्रदर्शित करेगा। इसलिए मैंने निष्कर्ष निकाला कि मैं परतों का प्रबंधन करना नहीं जानता, क्योंकि मैं मैपबॉक्स और लीफलेट सिंटैक्स के लिए नया हूं।
पत्रक के उदाहरणों का उपयोग करते हुए, मुझे इस कोड में मिला:
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);
});
}जब फ़ंक्शन को कॉल किया जाता है, तो मुझे निम्नलिखित त्रुटि मिलती है:
त्रुटि: स्टाइल लोड नहीं किया गया है
"स्ट्रिक्ट यूज़"; फंक्शन स्टाइल (ई, टी, आर) {this.animationLoop = t || नया एनिमेशनलोप, this.dispatcher = new डिस्पैचर (r || 1, यह), यह। spriteAtlas - नया SpriteAtlas (512,512), || this.lineAtlas = नई LineAtlas (256,512), यह ._लेयर्स = {}, इस.ऑर्डर = [], इस ._समूह = [], इस। स्रोत = {}, this.zoomlistory = {}, use.bindAll ([ "_forwardSourceEvent", "_ forwardTileEvent", "_ forwardLayerEvent", "_ redoPlacement"], यह), यह ।_resetUpdates (); var s = function (e, t) {if (e) रिटर्न void this.fire ("त्रुटि"); {त्रुटि: ई}); अगर (?! validateStyle.emitErrors (यह, validatetyty (t))) {this._loaded =!, इस। स्टाइलशीट = t, this.upetateClasses (); var r = t.sources; के लिए (var s in r) this.addSource (s, r [s]); t.sprite && (this.sprite = new ImageSprite (t.sprite), this.sprite.on ("लोड", this.fire.bind ( यह, "परिवर्तन"))), this.glyphSource = नया ग्लिफ़सोर्स (t)ग्लिफ़्स), यह._सर्सोल (), यह.फायर ("लोड")}}। बाइंड (यह); "स्ट्रिंग" == टाइपोफ़ ई? ajax.getJSON (normalizeURL (e), s: Browser.frame (s) .bind (यह, null, e)), this.on ("source.load", function (e) {var t = e.source; अगर (t && t.vectorLayerIds) के लिए (इस r__layers में var r) s = this._layers [r]? s.source === t.id && this._validateLayer (s)})}} वर्जन इवेंट = की आवश्यकता ("../ उपयोग / इवेंट"), स्टाइलर की आवश्यकता होती है ("./ style_layer) "), ImageSprite = की आवश्यकता होती है (" ./ image_sprite "), GlyphSource = की आवश्यकता होती है (" ../ प्रतीक / glyph_source "), SpriteAtlas = की आवश्यकता होती है (" ../ प्रतीक / sprite_atlas "), LineAtlas = की आवश्यकता होती है (" ../ प्रस्तुत करना / line_atlas "), util = की आवश्यकता होती है (" ../ util / util "), ajax = की आवश्यकता होती है (" ../ util / ajax "), normalizeURL = की आवश्यकता होती है (" ../ util / MapBox ")। normalizeStyleURL, ब्राउज़र =, ( "../ util / ब्राउज़र") की आवश्यकता होती हैडिस्पैचर = की आवश्यकता होती है ( "../ util / डिस्पैचर"), AnimationLoop = ( "./ animation_loop") की आवश्यकता होती है, validateStyle = की आवश्यकता होती है ( "./ validate_style"), स्रोत = की आवश्यकता होती है ( "../ स्रोत / स्रोत"), ! styleSpec = ( "./ style_spec"), StyleFunction = की आवश्यकता होती है ( "./ style_function") की आवश्यकता होती है; module.exports = शैली, Style.prototype = util.inherit (Evented, {_ लोड: 1, _validateLayer: समारोह (ई) {var t = this.source [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.ourceourceayer) और& this.fire ("त्रुटि"), {त्रुटि: नई त्रुटि ('स्रोत परत) स्टाइल लेयर द्वारा निर्दिष्ट "" + e.sourceLayer + "का स्रोत" + t.id + '"पर मौजूद नहीं है" "+ e.id +'" ")})}, लोड: फ़ंक्शन: () {if! (!) (। भरा हुआ) रिटर्न! 1; (इस ई। स्रोत में) के लिए (यदि! यह स्रोत [ई])।भरी हुई ()) वापसी! १; वापसी? यह। sprite || this.sprite.loaded ()}, _ हल: फ़ंक्शन () {var e, t; इस ._लेयर्स = {}, this._order = इस। स्टाइलशीट। लेयर्स.मैप (फ़ंक्शन (e) {रिटर्न e.id}); (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1)), tlast.tetegerZoomTime = दिनांक। अब ()), t.lastZoom = ई},_checkLoaded: function () {if (! ._loaded) थ्रो नई एरर ("स्टाइल लोडिंग नहीं हुई है")} , अपडेट: फंक्शन (e, t) {if ((! this__ddates.changed) इसे वापस लौटाएँ (यदि) this._updates.allLayers) this._groupLayers (), this._updateWorkerLayers (); अन्य {var r = Object.keys (this._updates.layers); r.length && this._updateWorkerLayers (r)} s s, i_ s; कुंजियाँ (यह। supdates.sources); के लिए (s = 0; s = 0; r -) के लिए (var s = this._order [r], i = 0; i;
मैं त्रुटि (ब्लॉकचोट के अंदर हाइलाइट किए गए) को स्पॉट कर सकता हूं, लेकिन मुझे नहीं पता कि इसे कैसे ठीक किया जाए ... इसे ठीक करने का मेरा प्रयास उपयोग कर map.on('load', function())रहा था , लेकिन मुझे अभी भी वही त्रुटि मिलती है।
कोई विचार?