पर पेज भरने के लिए मानचित्र का विस्तार करें मेरे पास दिलचस्प सीएसएस/जावास्क्रिप्ट समस्या है। मैं एक उपयोगकर्ता के अनुकूल वेब मानचित्र का निर्माण कर रहा हूं जिसमें स्वयंसेवी भौगोलिक जानकारी शामिल होगी और पोस्टर आकार तक, कई पेपर आकारों पर प्रिंट करने की क्षमता रखने की आवश्यकता होगी। इंटरफ़ेस के लिए, मैं Leaflet.js, Mapbox.js, और jQuery के साथ काम कर रहा हूं। जिस तरह से मैंने प्रिंटिंग का संपर्क किया है, वह एक पूर्वावलोकन विंडो स्थापित करना है जो एक सफेद पृष्ठभूमि के साथ पूरी तरह से नए L.Map पर केवल ओवरले (कोई टाइललेयर) दिखाता है, मार्करों द्वारा उपयोगकर्ता द्वारा चुने गए पेपर आकार के अनुपात में स्केल किया गया है। विचार यह है कि नक्शा पृष्ठ भर जाएगा और मार्कर हमेशा एक ही आकार में प्रिंट करेंगे (सर्कल मार्करों के लिए 8 मिमी, आइकन के लिए 10 मिमी)। यहाँ फ़ायरफ़ॉक्स में पूर्वावलोकन विंडो का स्क्रीनशॉट है:पत्र
जटिल कोड का एक उचित सा नहीं है। यह कहने के लिए पर्याप्त है कि जब भी उपयोगकर्ता विंडो आकार या पेपर अभिविन्यास बदलता है, तो पूर्वावलोकन बॉक्स और आइकन तदनुसार आकार बदलते हैं। जब भी उपयोगकर्ता पेपर आकार बदलता है, तो आइकन आकार बदलते हैं लेकिन पूर्वावलोकन बॉक्स नहीं होता है, ताकि सही आकार अनुपात का प्रतिनिधित्व किया जा सके।
function adjustPreviewBox(){
//set preview box dimensions based on print window size and paper orientation
if ($("#paperOrientation option[value=portrait]").prop("selected")){
var height = $("#printBox").height() - 61;
var width = height/Math.sqrt(2);
$("#printPreview").height(height);
$("#printPreview").width(width);
} else {
//first set by horizontal dimension
var width = $("#printBox").width() - 300;
var height = width/Math.sqrt(2);
//check for vertical overflow
if (height > $("#printBox").height() - 61){
height = $("#printBox").height() - 61;
width = height * Math.sqrt(2);
};
$("#printPreview").height(height);
$("#printPreview").width(width);
}
};
function adjustScale(){
//change symbol sizes and ratio scale according to paper size
var prevWidth = $("#printPreview").width();
var prevHeight = $("#printPreview").height();
var size = $("#paperSize select option:selected").val();
var series = size[0];
var pScale = Number(size[1]);
var longside, mmppPaper;
if (series == "A"){ //equations for long side lengths in mm, minus 10mm print margins
longside = Math.floor(1000/(Math.pow(2,(2*pScale-1)/4)) + 0.2) - 20;
} else if (series == "B"){
longside = Math.floor(1000/(Math.pow(2,(pScale-1)/2)) + 0.2) - 20;
};
//find the mm per pixel ratio
mmppPaper = prevWidth > prevHeight ? longside/prevWidth : longside/prevHeight;
var mapZoom = printPreviewMap.getZoom();
var scaleText = $("#printBox .leaflet-control-scale-line").html().split(" ");
var multiplier = scaleText[1] == "km" ? 1000000 : 1000;
var scalemm = Number(scaleText[0]) * multiplier;
var scalepx = Number($("#printBox .leaflet-control-scale-line").width());
var mmppMap = scalemm/scalepx;
var denominator = Math.round(mmppMap/mmppPaper);
$("#ratioScale span").text(denominator);
return [mmppMap, mmppPaper];
}
function resizeMarkers(markerType, init){
//scale preview marker size based on paper size and orientation
markerType == "circle" ? changeRadius(init) : changeIconSize(init);
};
function getRadius(){
//adjust ratio scale and return scale ratios
var scales = adjustScale();
var mmppPaper = scales[1];
return 4/mmppPaper;
};
function changeRadius(init){
//each circle marker will print at 8 mm diameter regardless of map scale and page size
var radius = getRadius();
printPreviewMap.eachLayer(function(layer){
if (typeof layer._radius !== 'undefined'){
if (init == true){
layer.setStyle({
opacity: 1,
fillOpacity: 1
});
layer.unbindPopup();
};
layer.setRadius(radius);
}
});
};
function changeIconSize(init){
//each icon will print at 10 mm per side regardless of map scale and page size
var side = 2.5 * getRadius();
//need to change dimensions and offset
$("#printPreview .leaflet-marker-icon").css({
width: side + "px",
height: side + "px",
"margin-left": -(side/2),
"margin-top": -(side/2)
})
};
मैं @media print सीएसएस शैलियों कि पूर्वावलोकन विंडो मुद्रण के लिए अच्छी तरह से काम करने लगते हैं है:
@media print {
@page {
size: auto;
margin: 10mm;
}
#printBox, #printPreview {
position: absolute;
max-height: 100%;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
#printPreview {
position: absolute !important;
width: 100% !important;
height: 100% !important;
border: none;
}
#scalegrip {
visibility: hidden;
}
#container {
visibility: hidden;
}
}
मैं करने के लिए मुद्रण द्वारा इस परीक्षण किया है यहाँ कार्यों मैं यह करने के उपयोग कर रहा हूँ कर रहे हैं एडोब के ड्राइवर का उपयोग कर एक पीडीएफ। यहाँ परिणाम है:
यह ठीक से काम करने लगता है -, सिवाय इसके कि मार्कर केवल पृष्ठ के ऊपरी-बाएं हिस्से को भरने जबकि मैं उन्हें चाहते हैं जावक का विस्तार करने के लिए इतना है कि पूरे पृष्ठ को भरने के लिए अंतिम उत्पाद पूर्वावलोकन बॉक्स के समान 'दृश्य' है। यह वह जगह है जहां मैं फंस गया हूं और किसी भी सलाह या विचारों का स्वागत करता हूं जिन्होंने कुछ ऐसा करने की कोशिश की है या प्रिंटिंग वेबसाइटों के आसपास अपना रास्ता जानता है।