2

我正在尝试使用 openlayers 和 geoserver 打印自定义地图。但是我无法找到它的实现。任何代码片段将不胜感激！

这是我到目前为止显示的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Export PDF example</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>

 </head>
<body>

    <form class="form">
    <i><label>Choose the layers</label><br></i>
    <b><input  type="checkbox" id="layer1" name="a">Boundaries<br>
    <input  type="checkbox" id="layer2" name="a">Roads<br>
    <input  type="checkbox" id="layer3" name="a">Water bodies<br>
    <input  type="button" onclick="showMap()" value="Display"></b>
    <input type="button" onclick="printMap()" value="Print map">
<script>

function printMap(){
  //needs to be completed!
}

function showMap(){
  layer1_checked = document.getElementById('layer1').checked;
  layer2_checked = document.getElementById('layer2').checked;
  layer3_checked = document.getElementById('layer3').checked;

  var layers_array = [];
    if(layer1_checked){
      layers_array.push('topp:tasmania_state_boundaries');
    }
    if(layer2_checked){
      layers_array.push('topp:tasmania_roads');
    }
    if(layer3_checked){
      layers_array.push('topp:tasmania_water_bodies');
    }     


   layers_param = "";
  for(var i=0;i<layers_array.length;i++){
    layers_param = layers_param+layers_array[i]+",";
  }
  layers_param = layers_param.substring(0,layers_param.length-1);      

      document.getElementById('map').innerHTML="";

    var format = 'image/png';
      var bounds = [145.19754, -43.423512,148.27298000000002, -40.852802];


      var mousePositionControl = new ol.control.MousePosition({
      className: 'custom-mouse-position',
        target: document.getElementById('location'),
      coordinateFormat: ol.coordinate.createStringXY(5),
        undefinedHTML: '&nbsp;'
      });


    var tiled = new ol.layer.Tile({
    visible: true,
    source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/topp/wms',
      params: {'FORMAT': format, 
               'VERSION': '1.1.1',
               tiled: true,
               STYLES: '',
            LAYERS: layers_param,
         tilesOrigin: 145.19754 + "," + -43.423512
      }
    })
  });
  var projection = new ol.proj.Projection({
      code: 'EPSG:4326',
      units: 'degrees',
      axisOrientation: 'neu',
      global: true
  });

  var map = new ol.Map({
    controls: ol.control.defaults({
      attribution: false
    }).extend([mousePositionControl]),
    target: 'map',
    layers: [          
      tiled
    ],
    view: new ol.View({
       projection: projection
    })
  });

  map.getView().on('change:resolution', function(evt) {
    var resolution = evt.target.get('resolution');
    var units = map.getView().getProjection().getUnits();
    var dpi = 25.4 / 0.28;
    var mpu = ol.proj.METERS_PER_UNIT[units];
    var scale = resolution * mpu * 39.37 * dpi;
    if (scale >= 9500 && scale <= 950000) {
      scale = Math.round(scale / 1000) + "K";
    } else if (scale >= 950000) {
      scale = Math.round(scale / 1000000) + "M";
    } else {
      scale = Math.round(scale);
    }
  });
  map.getView().fit(bounds, map.getSize());
  map.on('singleclick', function(evt) {
    var view = map.getView();
    var viewResolution = view.getResolution();
    var source = tiled.getSource();
    var url = source.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, view.getProjection(),
      {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});

         });      
}
</script>
</body>
</html>

到目前为止，显示图层似乎工作正常。我需要 printMap 函数的实现帮助。此外，假设使用 Mapfish 插件进行打印！

4

0 回答 0