Return canvas (image) in openlayers 4

问题

the example shows how to bind a button click event to the canvas and then it returns the image Example. How can I change it, that when I use a call openlayers with a permalink, that it automatically returns me that image? I would like to use a simple get request from an c++ programm to get the image. I have the e.g. "#map=12/1085115.28/6035092.46/0" as parsing parameters. Any ideas? Thanks and Greetings Melina

So far I have the parameter parsing

<!DOCTYPE html>
<html>
  <head>
    <title>OpenStreetMap</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
        var center = [0,0];
        var zoom = 0;
        var rotation = 0;
        if (window.location.has !== '')
        {
         var hash = window.location.hash.replace('#map=', '');
         var parts = hash.split('/');
         console.log (parts);
         if (parts.length === 4)
         {
            zoom = parseInt(parts[0],10);
            center = [
             parseFloat(parts[1]),
             parseFloat(parts[2])
             ];
            rotation = parseFloat(parts[3]);
         var rotation = 0;
        }
    }
      var openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM({
          attributions: [
            'All maps Â© <a href="http://www.openstreetmap.org">openStreetMapLayer</a>',
            ol.source.OSM.ATTRIBUTION
          ],
          opaque: false,
        //  url: '<myosmserver>/hot/{z}/{x}/{y}.png'
        })
      });


      var map = new ol.Map({
        layers: [
          openStreetMapLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          maxZoom: 20,
          center: center,
          zoom: zoom
        })
      });

    </script>
  </body>
</html>

回答1:

You cannot add a link that will somehow download the map as an image. You will need to render it somewhere.

This is how it works. When Openlayers renders the map, it renders it in a HTML canvas element. The download feature is not a Openlayers feature but a HTML canvas feature. The canvas has API to take a snapshot of the current canvas. You can download it as an image.

You can either render the map in a browser or render it server-side. I have not tried rendering the Openlayers map on the server but it should be possible.

来源：https://stackoverflow.com/questions/45417116/return-canvas-image-in-openlayers-4

标签

javascript

canvas

OpenLayers

openlayers-3

html2canvas