1. घर
  2. सवाल और जवाब
  3. ऑफ़लाइन ओएसएम मानचित्र फ़ाइल दिखा रहा है। सुझाव: Js.library

ऑफ़लाइन ओएसएम मानचित्र फ़ाइल दिखा रहा है। सुझाव: Js.library

2017-05-02 21 views
5

के साथ एक एमबी टाइल्स फ़ाइल जब इंटरनेट पर ऑनलाइन पहुंच संभव नहीं है, तो मैं (ऑफ़लाइन) एचटीएमएल 5 ऐप ओएसएम फ़ाइल के माध्यम से एक ओएसएम मानचित्र दिखाऊंगा।ऑफ़लाइन ओएसएम मानचित्र फ़ाइल दिखा रहा है। सुझाव: Js.library

क्या आप ऑफ़लाइन एचटीएमएल 5 ऐप ओएसएम टाइल्स में दिखा सकते हैं कि ऑफ़लाइन ओएसएम मैप फ़ाइल जैसे मैप्सफोर्ज/जिओफैब्रिक इत्यादि से लोड किया जा सकता है?

उदाहरण: openstreetmap.org के माध्यम से मैंने पहले मानचित्र का एक छोटा सा हिस्सा निर्यात किया था। मैं इस डाउनलोड किए गए ओएसएम मानचित्र को एचटीएमएल 5 ऑफलाइन वेबपैप में कैसे दिखा सकता हूं।

स्रोत

2017-05-02 tjm1706

+0

आपके प्रश्न का उत्तर "[yes] (http://www.strcat.de/questions-with-yes-or-no-answers.html)" है। कृपया और स्पष्ट बताएं; आपने क्या प्रयास किया है आपने किन समाधानों पर विचार किया है? – IvanSanchez

+0

मुझे अभी तक कोई अच्छा समाधान नहीं मिला। मुझे आशा है कि एक मानक समाधान संभव है, जैसे Mapforge फ़ाइलों के साथ leafletjs का उपयोग करना। क्या आपके पास कोई समाधान समाधान है? – tjm1706

उत्तर

1

हम पत्रक का उपयोग कर मानचित्र कैसे दिखा सकते हैं? डिफ़ॉल्ट रूप से पत्रिका रास्टर छवियों के साथ काम करता है। आम तौर पर इन टाइल्स को इंटरनेट के माध्यम से पुनर्प्राप्त किया जाता है।

हम ऑफ़लाइन फ़ाइल का उपयोग करके मानचित्र कैसे दिखा सकते हैं? जैसे क्योंकि कोई इंटरनेट कनेक्शन संभव नहीं है? एक पदानुक्रम संरचना में

  1. स्थानीय टाइल। उदाहरण के लिए ऐसी स्क्रिप्ट का उपयोग करके। नुकसान यह है कि यह एक कॉम्पैक्ट प्रारूप नहीं है। यह कुछ preparational काम की आवश्यकता है:

    L.tileLayer ('/ नक्शा-टाइल्स/{z}/map_ {x} _ {y} .png', { रोपण: 'नक्शा डेटा © ???', }) addTo (नक्शा)।

  2. रास्टर टाइल्स के साथ एमबीटीइल्स फ़ाइल। ऐसी फ़ाइल को Leaflet.ileLayer.MBTiles.js प्लगइन के माध्यम से दिखाया जा सकता है। एक उदाहरण स्क्रिप्ट नीचे दिखाया गया है।

  3. VectorGrid एमबीटीइल्स फ़ाइल से वेक्टर डेटा पढ़ने के लिए एक कॉम्पैक्ट उम्मीदवार है। यह intruction भी देखें।

  4. मैपबॉक्स जीएल जेएस ऑफ़लाइन। उस स्थिति में आप स्थानीय रूप से अपनी वेक्टर फाइलें डालते हैं। demo देखें।

  5. mobac.sourceforge.net जैसा कि @ जैकएल द्वारा नीचे सुझाया गया है।

    6.

विज्ञापन विकल्प 3: OpenMapTiles.com वेक्टर प्रारूप के साथ बहुत कॉम्पैक्ट एमबीटील्स फ़ाइल उत्पन्न करता है। तो, यह समाधान विकल्प 3 के लिए उपयोगी है।

विज्ञापन विकल्प 2: जब आपके पास एमबीटीआईएल/रास्टर फ़ाइल है, तो निम्न कोड सही तरीके से काम करेगा। तो, यह उपरोक्त एमबीटील्स वेक्टर फ़ाइल के साथ काम नहीं कर रहा है।

चयन NPM पैकेज मैं डेमो भाग गया साथ लगभग 1 मिनट में स्थापित करने के बाद। डेमो 'node_modules \ Leaflet.TileLayer.MBTiles \ demo' फ़ोल्डर के नीचे है। ठीक काम करता है।

फिर मैंने एम्स्टर्डम मानचित्र दिखाने की कोशिश की। हां, मैं यह (नौसिखिया के रूप में) काम नहीं कर सका। मैं पीओसी के लिए इसकी जांच कर रहा हूं।

एम्स्टर्डम मानचित्र को दिखाने के लिए मैं इस स्रोत को कैसे अपडेट कर सकता हूं? इसे पूरा करने से +50 बक्षीस मिलेगा।

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" /> 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
<script src="https://unpkg.com/[email protected]/js/sql.js"></script> 
<script src="../Leaflet.TileLayer.MBTiles.js"></script> 
    <meta charset="utf-8"> 
    <title>Leaflet.TileLayer.MBTiles demo</title> 
    <style> 
    #map { 
     width:600px; 
     height:400px; 
    } 
    </style> 
</head> 
<body> 
    <div id='map'></div> 
    <script> 
    var map = new L.Map('map'); 
    map.setView(new L.LatLng(52.361367, 4.923083), 18); 
    var mb = L.tileLayer.mbTiles('./amsterdam_netherlands.mbtiles', { 
     minZoom: 16, 
     maxZoom: 20 
    }).addTo(map); 
    mb.on('databaseloaded', function(ev) { 
     console.info('MBTiles DB loaded', ev); 
    }); 
    mb.on('databaseerror', function(ev) { 
     console.info('MBTiles DB error', ev); 
    }); 
    </script> 
</body> 
</html>

स्रोत

2017-05-10 21:10:50 tjm1706

+0

मुझे विश्वास है कि आपको स्थानीय रूप से mbtiles फ़ाइल की सेवा करने की आवश्यकता होगी। यहां एक नज़र डालें: https://github.com/chelm/mbtiles-server –

+0

तब मुझे शामिल स्निपेट ठीक काम करना चाहिए। –

+1

मुझे लगता है कि Leaflet.ileLayer.MBTiles प्लगइन रास्टर टाइल्स की अपेक्षा करता है, जबकि ओपनमैटाइल वेबसाइट आपको वेक्टर टाइल्स प्रदान करती है। – ghybs

1

हां, यह पत्रक, या किसी अन्य मैपिंग लाइब्रेरी में ऐसा करना संभव है। आपको बस इतना करना है कि ओएसएम फ़ाइल को टाइल्स के सेट में परिवर्तित करें, फिर अपनी टाइल परत को स्थानीय रूप से संग्रहीत फ़ाइलों (सापेक्ष पथ) पर इंगित करें। या यदि यह संभव है (मैं ओएसएम नियमों से परिचित नहीं हूं), तो आप अपने क्षेत्र के लिए टाइल्स का सेट डाउनलोड कर सकते हैं।

यदि आपको अपनी ओएसएम फ़ाइलों को टाइल्स में कनवर्ट करने की आवश्यकता है, तो Maperative और उसके tile generator जैसे टूल को आजमाएं।

आप इस लिंक पर सूचीबद्ध विधियों को भी आजमा सकते हैं: http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles।

एक बार जब आप अपनी टाईल्स रखते हैं, तो संपत्ति निर्देशिका संरचना सेट करें, और अपनी टाइल परत को इंगित करें।

यहाँ पत्रक का उपयोग कर एक उदाहरण है:

// the path may be different depending on how you have the tiles saved. 
// you will have to define the options object 

new L.tileLayer('/tiles/{z}/{x}/{y}.png', {}).addTo(map);

मन फ़ाइल पथ रिश्तेदार होते हैं, और आप शायद यकीन है कि बाधाओं अपने कस्टम टाइल्स के लिए सही सेट अप कर रहे हैं बनाने के लिए करना होगा।

स्रोत

2017-05-06 05:09:42

संबंधित मुद्दे
नवीनतम प्रश्न

 संबंधित मुद्दे