1

I am using:

  • angular 8V,
  • Open Layers 6.4 V

I would like to save my OpenLayers map as PDF.

I am able to Print map smoothly using this example. OpenLayer Example.

input Form is: selection of pdfType(orientation, landscape), pdfSize(a4,a3...), DPI(75,150..)..

Requirements is:

  1. Print Map only selected Polygon Area with scale of Polygon(scale should be top-left) Print-Polygon-Area
  2. Print current map view with background but selected Polygon should have map content. Print-view-with-poygon-area

I have tried these codes before:

const orgExtent = map.getView().calculateExtent();
// I have image size
const polygonExtent = map.getView().calculateExtent(ImagesizeOnMap);
const polygon = fromExtent(extent);
 const feature = new Feature(polygon);
 const vectorSource = new VectorSource({
});
vectorSource.addFeatures([feature]);
 const vectorLayer = new VectorLayer({
 source: vectorSource,
});
vectorLayer.set('name', 'polygonPrint');
map.addLayer(vectorLayer);

// Here difficulty to find selected polygon scale(like 200mi).. tried with **control.element.innerText**
const orginalMapSize= map.getSize();
const viewResolution = map.getView().getResolution();
const size = ImagesizeOnMap;// polygon image size
const width = Math.round((pdfSize[0] * resolution) / 25.4);
const height = Math.round((pdfSize[1] * resolution) / 25.4);
map.once('rendercomplete', function() {  
mapCanvas.width = width;
mapCanvas.height = height;
const mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
 document.querySelectorAll('.ol-layer canvas'),
 function(canvas) {
  if (canvas.width > 0) {
    const opacity = canvas.parentNode.style.opacity;
    mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
    const transform = canvas.style.transform;
    const matrix = transform
    .match(/^matrix\(([^\(]*)\)$/)[1]
              .split(',')
              .map(Number);
    // Apply the transform to the export map context
    CanvasRenderingContext2D.prototype.setTransform.apply(
    mapContext,
    matrix
    );
    mapContext.drawImage(canvas, 0, 0);
   }
  }
 );
mapContext.globalAlpha = 1;
const pdf = new jsPDF(orientation, undefined, undefined);
pdf.addImage(
 mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, pdfSize[0], pdfSize[1]
);
...
... // From Above Example Link added same code

I have tried many solution but can't get the desired result.

4
  • no one help..?? Jun 17, 2022 at 6:17
  • @all who has experts on this tech.. please understand beginner's issues and problems.. give suggestion or solution.. thank you Jun 19, 2022 at 4:20
  • please at least answer this question like not able to this type difficult tech questions or suggestions.. Jun 19, 2022 at 18:15
  • For frameworks like React or Angular it's very little possibility to get answer for OpenLayers or Leaflet on GIS SE site. On the other side, possibility of getting answer for plain HTML/JS code is very big.
    – TomazicM
    Jun 24, 2022 at 16:44

1 Answer 1

0

gis s.e. has had declining activity for a long time for some reason.

There are almost 4800 openlayers related questions on https://stackoverflow.com/questions/tagged/openlayers that might offer more feedback.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jun 24, 2022 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.