Openlayers4中地图的导出

概述:

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

效果:

导出图片

页面展示

实现代码:

document.getElementById('export_map').addEventListener('click', function() {
    map.once('postcompose', function (event) {
        var canvas = event.context.canvas;
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
        } else {
            canvas.toBlob(function (blob) {
                saveAs(blob, 'map.png');
            });
        }
    });
    map.renderSync();
});

注意:

1、此处引用了一个FileSaver.js文件,文件地址为:https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js

跨域处理;

1、天地图切片跨域

在代码中添加crossOrigin: 'anonymous'即可,完整代码如下:

function getTdtLayer(lyr){
    var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            crossOrigin: 'anonymous',
            url:url
        })
    });
    return layer;
}

2、wms跨域

wms的跨域需从Geoserver服务器端解决,具体解决方法如下:

1)从http://central.maven.org/maven2/org/eclipse/jetty/jetty-servlets/下载对应的jar,比如geoserver2.9依赖的jetty版本号是9.2.13.v20150730,那么就下载该版本的jar。

2)将下载好的 jetty-servlets-9.2.13.v20150730.jar 放到webapps/geoserver下的lib中。

3) 配置下webapps/geoserver/web.xml。

<filter>         <filter-name>cross-origin</filter-name>         <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>     </filter>     <filter-mapping>         <filter-name>cross-origin</filter-name>         <url-pattern>/*</url-pattern>     </filter-mapping>

4)重启geoserver即可。

同样,代码中加入crossOrigin: 'anonymous'即可,代码如下:

var boundry = new ol.layer.Image({
             source: new ol.source.ImageWMS({
                 crossOrigin: 'anonymous',
                 url: 'http://localhost:8080/geoserver/lzugis/wms',
                 params: {'FORMAT': 'image/png',
                     'VERSION': '1.1.1',
                     STYLES: '',
                     LAYERS: 'lzugis:boundry',
                 }
             })
         });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 ...

4147
来自专栏木子昭的博客

img标签随机获取高质量图片

1991
来自专栏魏艾斯博客www.vpsss.net

WordPress 手动优化和插件优化 MySQL 数据库的方法

1332
来自专栏分布式系统和大数据处理

Webpack入门

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

1572
来自专栏程序小工

【VSCode插件】xdebug开发调试PHP

Xdebug 在开发过程中可以帮我们查看具体的运行和步骤,以及每行代码执行的结果,在学习和解决代码问题的时候可以提供非常大的便利。PHPStorm 也可以进行 ...

3.4K1
来自专栏web

记一次webpack打包优化

2376
来自专栏做全栈攻城狮

采用React+Ant Design组件化开发前端界面(一)

​ antd是基于less开发的,我们使用less可以方便的改变主题色等配置。

2653
来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

12.6K7
来自专栏游戏杂谈

xml文件转二进制文件的AIR

游戏开发中,有很多XML可能是很大的,比如一个任务配置文件,可能就接近2M(当然全部文件放在一个XML里面本身就有问题,比较好的做法就是分等级分隔XML),这...

1032
来自专栏跟我一起学Docker

【番外篇】Vim-Go和Vs-Code环境搭建

如果说在Linux环境下,什么编辑器最好用,如果我说是VIM,估计会有一大部分人嗤之以鼻,怎么可能。VIM可能是他用过众多编辑器最难用的一个。在我...

3715

扫码关注云+社区

领取腾讯云代金券