गैर-मानचित्र छवियों के लिए एक अच्छा उपकरण है?

Question

मैं एक वेब ऐप लिख रहा हूं जिसमें technical illustrations (पैन, ज़ूम, क्लिक) नेविगेट करना शामिल है। मुझे लगता है कि Cloudmade Leaflet इसके लिए एक अच्छा टूल है, केवल इसलिए कि someone used it to make XKCD 1110 pan/zoomable और मुझे वास्तव में यह पसंद आया कि यह कैसे निकला।

जाहिर है, मुझे अपने मूल तकनीकी चित्रण को टाइल और स्केल करने की आवश्यकता होगी, लेकिन मान लें कि यह एक छोटी सी समस्या है जिसे मैंने हल किया है। Leaflet API को देखते हुए, ऐसा प्रतीत होता है कि मुझे अपने तकनीकी चित्रों (.ai, .svg, और .png फ़ाइलों) को भौगोलिक मानक जैसे GeoJSON में परिवर्तित करना होगा। यह एक अजीब प्रस्ताव की तरह लगता है।

कोई भी गैर-मानचित्र इमेजरी को नेविगेट करने के लिए कोई भी पत्र या कोई अन्य टूल सुझा सकता है?

Answer 1

आप इसे पत्रक के साथ कर सकते हैं। (मैंने यह बिल्कुल खुद किया है।)

आपको अपने पिक्सेल आकार को लैट्लोंग (अक्षांश/देशांतर) में परिवर्तित करना होगा। पत्रक आपको Simple "समन्वय संदर्भ प्रणाली", map.project और map.unproject का उपयोग करके ऐसा करने का एक आसान तरीका प्रदान करता है।

पहले, अपने इस तरह के नक्शे का निर्माण:

var map = L.map('map', { 
    maxZoom: 20, 
    minZoom: 20, 
    crs: L.CRS.Simple 
}).setView([0, 0], 20); 

... और फिर सेट मानचित्र सीमा (एक छवि है कि 1024x6145 के लिए):

var southWest = map.unproject([0, 6145], map.getMaxZoom()); 
var northEast = map.unproject([1024, 0], map.getMaxZoom()); 
map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 

है more details regarding splitting your images available here एक रूबी मणि सहित को ढूंढ सकते हैं भी उपयोगी हो।

Answer 2

मैं भू-सूचना के साथ कस्टम टाइल्स के साथ नक्शे के लिए पत्रक का उपयोग कर रहा हूं, लेकिन जहां तक ​​मैं देख सकता हूं कि पत्रक इस कार्य को करने में सक्षम होना चाहिए। इस बात पर विचार करने के लिए कुछ बिंदु हैं कि आपको अपनी छवियों को एक पैनबल और ज़ूम करने योग्य तरीके से प्रदर्शित करने में सक्षम होने के लिए कैसे व्यवस्थित करना चाहिए:

सबसे पहले, आपको नक्शा नेविगेशन और संबंधित टाइल फ़ाइल नामों के पीछे अवधारणा को समझना होगा। यह अवधारणा QuadTree है। इस काम को कैसे प्राप्त किया जा सकता है इसका एक उदाहरण here पाया जा सकता है।

फिर आपको अलग-अलग टाइल्स में अपने कच्चे तकनीकी चित्रों को काटना होगा। यदि आप केवल एक ज़ूम स्तर पर शुरू करते हैं, तो यह काफी सरल होना चाहिए। फिर आप टाइल्स का उपयोग नए Leaflet TileLayer में कर सकते हैं। जब आप ज़ूमिंग करना चाहते हैं, तो यह थोड़ा और मुश्किल हो सकता है। आपको अपनी टाईल्स के लिए सही सीमाएं तलाशनी होंगी और सही फ़ाइल नामों का निर्माण करना होगा (उपरोक्त क्वाड्री संदर्भ देखें)।

समेकित करने के लिए: आपके कार्य में पत्रक कोई समस्या नहीं होनी चाहिए। आपके लिए मुख्य कार्य अपने कच्चे डेटा से उपयुक्त और सही टाइल्स बनाना है।

Answer 3

यह उन छवियों के लिए काम करता है जो टाइल नहीं किए गए हैं।

function init() { 
    var map = L.map('map', { 
     maxZoom: 24, 
     minZoom: 1, 
     crs: L.CRS.Simple 
    }).setView([0, 0], 1); 

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0])); 

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg' 
    var imageBounds = [[250,0], [0,250]]; 

    L.imageOverlay(imageUrl, imageBounds).addTo(map); 
} 

Answer 4

मैं MapTiller साथ अच्छी किस्मत लिया है - http://www.maptiler.com/

Answer 5

आप एक गैर टाइल विकल्प चाहते हैं, तो आप टाइल के बिना पूरे बात clientside कर सकते हैं पूर्व काटने

https://github.com/Murtnowski/GMap-JSlicer

देखें

slicer = new JSlicer(document.getElementById('map'), 'myImage.png'); 
slicer.init(); 

बहुत आसान।

Answer 6

पत्रक का उपयोग करने में सबसे बड़ा मुद्दा यह पता लगा रहा है कि टाइल्स को कैसे उत्पन्न किया जाना चाहिए, आदेश दिया गया है, और फिर सही ढंग से कॉल करें ताकि सबकुछ आपकी अपेक्षा के अनुसार दिखाई दे।

https://build-failed.blogspot.pt/2012/11/zoomable-image-with-leaflet.html

संक्षेप में, इस सही ढंग से विभाजित करने के लिए GDAL2Tiles उपयोग करता है: कुछ ही दिनों बुरी समाधान के बाद समाधान बाहर की कोशिश के बाद, यह केवल एक ही है कि मेरे लिए काम किया, धन्यवाद एक ट्यूटोरियल पेड्रो सूज़ा द्वारा किया जाता करने के लिए था एक अनुमानित तरीके से टाइल्स। यह ऐसा टूल है जो अधिकांश लिनक्स वितरणों पर आसानी से उपलब्ध है (और कथित तौर पर यह बंदरगाहों या इसी तरह की चीज़ों का उपयोग करके मैक ओएस एक्स के तहत भी ठीक है)। इस उपकरण के साथ कोई भी वॉटरमार्किंग, आकार पर सीमा आदि नहीं है। पेड्रो सोसा अपने लेख में बताए गए जैसे ही आपके सर्वर की निर्देशिकाओं पर टाइल्स रखें।

पत्रक 'नकली' अक्षांश/अक्षांश की गणना करने के लिए रास्टर फ़ाइल के आकार का उपयोग करके, 'नकली' भू-निर्देशांक के साथ अपने टाइल्स का उपयोग करके 'मानचित्र' लोड करेगा। इसके बाद, आप जो चाहें उसके साथ बहुत कुछ कर सकते हैं, बस किसी अन्य मानचित्र टाइल सर्वर की तरह। मेरे मामले में, मुझे केवल कुछ मार्करों को छोड़ने की ज़रूरत थी, इसलिए मैं कम से कम परवाह नहीं कर सकता था कि मैं किस समन्वयक प्रणाली पर काम कर रहा था - नीचे दिए गए कार्य को 'नकली' भू-निर्देशांक निकालने के लिए उपयोगी था ताकि मार्कर कहां रखा जाए :

var popup = L.popup(); 
function onMapClick(e) { 
    popup 
     .setLatLng(e.latlng) 
     .setContent("You clicked the map at " + e.latlng.toString() + "\nZoom level is " + map.getZoom()) 
     .openOn(map); 
} 
map.on('click', onMapClick); 

मैं सफलतापूर्वक लगभग हर फ़्लैश कार्यप्रणाली को दोहराने (! भी एक ही मार्करों और सभी का प्रयोग करके) पत्रक का उपयोग कर एक पुराने फ्लैश आधारित मानचित्र नाविक की जगह और मूल रूप से करने का प्रबंधन किया था। निश्चित रूप से, लाभ यह है कि पत्रक आईओएस उपकरणों पर काम करेगा - और टाइलिंग के लिए धन्यवाद, पुराने फ्लैश-आधारित दृष्टिकोण की तुलना में समाधान बहुत अधिक तेज़ चलता है ...

एक विकल्प OpenLayers हो सकता है, जो एक विकल्प हो सकता है टाइलिंग के बिना, रास्टर छवियों को भी संभाल सकता है - यदि आपके पास अपेक्षाकृत छोटी छवि है तो पर्याप्त अच्छा है।

Btw, यहाँ विभिन्न व्यवस्थाएं की तुलना है - नहीं सभी है, हालांकि स्थिर चित्र के साथ सौदा होगा: https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools