मैं एक वेब एप्लिकेशन विकसित कर रहा हूं जो एक पत्रिका मानचित्र पर एनिमेटेड मार्कर प्रदर्शित करता है। नक्शा प्रोग्रामेटिक रूप से पहली एनीमेशन सीमाओं के लिए ज़ूम किया गया है, फिर एनीमेशन खेला जाता है, फिर नक्शा दूसरी एनीमेशन सीमाओं पर ज़ूम किया जाता है और दूसरी एनीमेशन खेला जाता है, और इसी तरह ...तेजी से प्रदर्शन के लिए ब्राउज़र कैश में ज्ञात सीमाओं के पत्रक टाइल्स को प्रीलोड कैसे करें?
मेरी समस्या यह है कि OpenStreetMap टाइल लोड करने का समय कभी-कभी एनीमेशन अवधि से अधिक होता है, इसलिए नक्शा आंशिक रूप से लोड होता है या यहां तक कि लोड नहीं होता है जब मार्कर एनीमेशन अपने अंत तक पहुंच जाता है।
जैसा कि मुझे शुरुआत से पता है कि मैं सभी सीमाओं को ज़ूम करने जा रहा हूं, मैं एजेक्स को सभी उपयोगी टाइल्स छवियों को अग्रिम में डाउनलोड करने के लिए कॉल करना चाहता हूं (किसी भी एनीमेशन शुरू होने से पहले) यह सुनिश्चित करने के लिए कि वे ब्राउज़र में हैं कैश जब मुझे उनकी जरूरत है।
मैंने बहुत कुछ खोजा है और मुझे टाइल्स सीमाओं से टाइल्स यूआरएल की सूची प्राप्त करने का कोई तरीका नहीं मिला है। ज्ञात सीमाओं और ज़ूम स्तर के लिए ब्राउज़र कैश में मैन्युअल रूप से टाइल्स लोड करने का कोई तरीका है?
समाधान YaFred जवाब देने के लिए धन्यवाद:
यहाँ टाइल्स लगभग 20% पैडिंग के साथ पहले से लोड करने के लिए "mypolyline" कोड है:
var bounds = mypolyline.getBounds().pad(0.2);
var zoom = map.getBoundsZoom(bounds);
var east = bounds.getEast();
var west = bounds.getWest();
var north = bounds.getNorth();
var south = bounds.getSouth();
var dataEast = long2tile(east, zoom);
var dataWest = long2tile(west, zoom);
var dataNorth = lat2tile(north, zoom);
var dataSouth = lat2tile(south, zoom);
for(var y = dataNorth; y < dataSouth + 1; y++) {
for(var x = dataWest; x < dataEast + 1; x++) {
var url = 'https://a.tile.openstreetmap.fr/osmfr/' + zoom + '/' + x + '/' + y + '.png';
var img=new Image();
img.src=url;
}
}
यह उसकी दो जवाब को जोड़ती है। जब कोई एनीमेशन चल रहा है, तो अब मैं आने वाले के लिए टाइल्स को प्रीलोड कर सकता हूं। यह fantastically काम करता है।
1/कैसे टाइल प्रीलोड करने की: