开源GIS（十六）——openlayers地图打印_openlayers打印跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/xcymorningsun/article/details/84859374

本文详细介绍了如何使用OpenLayers实现地图打印功能，包括地图打印的实现步骤、客户端和服务端的跨域设置，以确保在使用自定义Geoserver WMS服务时能够成功保存地图图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

系统地图打印是比较常用的功能，因为经常会把当前的视图作为图片保存，用于方便自己或者他人查看当前地图的情况，截图效果不是很好，直接使用openlayers官网例子。

二、地图打印实现

上代码，主要核心代码是在最后点击事件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <style>
        .pop {
            width: 70px;
            height: 20px;
            /*            border: 1px solid #088;
                        border-radius: 10px;*/
            background-color: #0FF;
            opacity: 0.7;
        }
    </style>
</head>
<body>
<div class="pop" style="display: none;">123</div>
<div id="map" style="width: 100%">
    <div style="position: absolute;left: 100px; z-index: 10">
        <button id="bt_print" >打印</button>
    </div>
</div>
<script>
    var webip="http://localhost:";
    var gisip="http://localhost:";