openlayers 截屏出图和框选范围出图

最新推荐文章于 2025-11-24 14:17:06 发布
原创 最新推荐文章于 2025-11-24 14:17:06 发布 · 2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayers #openlayerse

本文介绍如何使用OpenLayers库实现地图的导出功能，包括地图截图的自定义范围选择与非IE内核浏览器的兼容性处理。通过实例演示了如何在点击按钮后触发地图渲染并导出为PNG图片，同时提供了自定义绘制矩形区域以限定截图范围的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>地图打印（导出图片）</title>

    <link href="./ol.css" rel="stylesheet" type="text/css" />   

    <style type="text/css">

        #map{

            width:100%;

            /* height:570px; */

            height: 100%;

            position: fixed;

        }

        #menu{

            float:left;

            position:absolute;

            bottom:10px;

            z-index:2;

        }

        #wrap2{

            width: 100%;

            height: 100%;

            position: absolute;

            left: 0;

            top: 0;

            background-color: lightgray;

            opacity: 0.8;

            display: none;

            z-index: 9;

        }

    </style>

</head>

<script src="./olv5.3.0.js" type="text/javascript"></script>   

<script src="./jquery-1.11.2.min.js" type="text/javascript"></script>

<script src="filesaver.js"></script>

<body>

    <div>

        <div id="map" > 

            <div id="menu">

                <a id="export-png" class="btn" download="map.png"><i class="icon-download">地图导出(暂支持非IE内核浏览器)</i></a>

                <p>

                <a id="manypng"

最低0.47元/天 解锁文章
138：vue+openlayers 绘制矩形,截取对应部分的地图并保存
大剑师兰特的GIS世界
09-29 1270
本示例的目的是介绍如何在vue+openlayer中使用draw来绘制矩形，并截图保存对应的地图。点击查看本专栏内容目录列表。
Openlayers高级交互（10/20）：绘制矩形,截取对应部分的地图并保存
大剑师兰特的GIS世界
10-28 734
是一个有用的工具，用于测量时间流逝，特别是在需要根据时间差更新动画或物理模拟的场景中。通过使用getDelta()方法，可以确保动画在不同设备上表现一致，从而提高用户体验。在开发三维应用时，合理使用可以帮助实现更加流畅和自然的动画效果。
通过Html2Canvas对OpenLayers截图
pdw521的专栏
08-15 3401
希望对需要的朋友提供参考 本人通过html2canvas对项目中使用的openlayers叠加的图层进行截图，生成图层数据。 其中对地图上叠加的矢量和栅格图层的截图中矢量截图没什么问题注意添加跨域就行了。 在 source属性中添加crossOrigin: 'anonymous',   即可； 对栅格数据的截图要采用png格式。 cldURL =“http://XXXXXX/XXXX/X...
openlayers的常用api
qq_45089709的博客
11-24 930
OpenLayers（v7+）是一个轻量灵活的开源GIS库，支持多投影和数据源。核心功能包括地图初始化、图层管理（矢量/WMS/XYZ瓦片）、视图控制等。摘要要点： 支持CDN和npm两种引入方式，默认使用Web Mercator投影（EPSG:3857） 提供完整地图初始化示例，包含OSM底图加载和坐标转换 详细展示矢量图层操作，包括GeoJSON数据加载、样式设置和动态更新 支持多种数据源类型（OSM/XYZ/WMS等）和图层控制（显示/隐藏/删除） 包含视图控制API，支持带动画/无动画的视角切换 适
openlayers6【二十四】vue 通过gis数据显示省的区域图层，地图下钻到可视中间区域效果
@必意玲
07-30 3272
本文主要是下面一个简单初始化默认场景，即初始化页面时候，根据接口返回的数据，动态加载广东省的区域并且设置图层，默认下钻到屏幕的可视中间区域。如下面效果图。 文章目录1.写在前面2. 初始化地图initMap()方法3. 通过接口请求数据，并且实现地图位于屏幕中心的效果展示4. getGeometryByCode 方法5. 接口返回数据结构 1.写在前面 可以参考前面文章 openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 根据模拟的数据.
openlayers 截图
博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！仅供参考，不可尽信。
12-21 722
这样就可以了，但是也许会报错，报错原因一般都是使用的底图图层存在跨域问题。所以说在加载底图的时候，设置一下允许跨域就可以了哟。最新做了一个功能，就是 openlayers 展示二维 GIS 数据后，可以把当前的视角导出图片。OK，我承认，这篇博文是一个水文。好了，我知道的就这么多。
openlayer截图
qq_41659396的博客
08-27 1261
最近做了一个在地图上截图的功能，类似微信截图，在地图上画个框，直接得到截图框里的图片贴在地图上。这个功能分为三步：1.画截图框2.获取图片3.图片贴到地图上完全依赖openlayer的API实现。
128.在 Vue 3 中使用 OpenLayers 实现绘制矩形截图并保存地图区域
小彭的博客
05-15 1051
本文详细介绍了如何在Vue3项目中利用OpenLayers实现地图矩形绘制、区域截图及保存为PNG图片的功能。通过Vue3的Composition API和OpenLayers的强大地图处理能力，用户可以在地图上自由绘制矩形，自动截取该区域并保存为图片。文章从项目初始化、核心技术栈、完整代码实现到关键技术解析，逐步引导开发者完成这一功能的开发。此外，还提供了清除图层、精确截图区域定位等实用功能的实现方法，适合地图分析、地理标注报告等应用场景。
WebGIS实战：Vue+Openlayers实现地图控件的加载与控件自定义位置
Oruizn的博客
12-19 5243
在上一节《WebGIS实战：Openlayers实现网络地图的加载与切换》中，我们已经用到了一个地图控件了——图层切换控件(由Openlayers-Extension实现)，这一节将讲述我们可能还会用到什么控件，而且由于这些控件位置都是固定在地图的某一位置，有时不满足我们的布局需求，这就需要我们知道怎么调整这些控件的位置了。
推荐一款根据圈定的地图范围生成炫酷的的地图底图图片软件
最新发布
12-11
我们正在处理用户的问题：用户希望获取一款能够根据圈定地图范围生成炫酷地图底图图片的软件。 根据引用内容，它似乎与JavaScript框架avalon.js的视图模型（ViewModel）有关，但这与地图生成软件无关。因此，我们...
openlayer中实现截图框截图的功能
luoluoyang23的博客
02-01 3415
openlayer中实现截图框截图的功能
基于openlayers3生成专题图
09-03
由于OL3本身不具有专题图生成功能，本程序借助第三方js库生成专题图，可选择分级方法和分级数。为方面大家，源程序里的页面文件、CSS文件和JS文件都放到文档中了，并添加了生成的效果图。
Openlayers 教程 - 地图以及图层数据导出（打印）图片
非科班Java出身GISer的博客
10-07 2627
Openlayers 教程 - 地图以及图层数据导出（打印）图片。
OpenLayers 截图导出方式 html2canvas 以及 直接从地图的导出
Trustport的博客
09-21 6568
自己做一下记录，备忘。 方式一：html2canvas截图方式，需要下载对应的js文件。之前遇到的问题截取不出来，导出的图片只看到div id =printcontent 的背景色，不设置背景颜色就可以了。 (html2canvas(document.getElementById("printcontent"), {         async: false, allowTaint: true...
OpenLayers地图打印输出
做GIS梦的人
05-17 5594
最近遇到了在Openlayers上开发地图打印的功能，官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。全图输出，保存为本地图片map.once("postcompose", function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { ...
jsPdf导出openlayers截图
wangwffgqeg的专栏
05-24 341
问题 ol生成图片遇到脏污染无法截图 ol指定范围指定Zoom下显示的宽高问题 jspdf中文乱码问题 1. 脏污染属于浏览器的安全机制，canvas内引入了其他跨域文件，在调用toDataUrl、toBold、getImageData 触发检查。启用了 CORS 的图片 - HTML（超文本标记语言） | MDN 引入外部图层在wms,wmts增加属性允许跨域 2.自动生成宽高参考 getSizeForExtent(extent, zoom) { const reso...
vue+openlayers导出整幅地图为image图片（附源码）
whs15193553607的博客
06-27 850
vue+openlayers导出整幅地图为image图片（附源码）
Vue + OpenLayers 实现矩形绘制、地图截取和保存
laugh666的博客
09-12 784
方法中，我们需要实现地图的截图和保存功能。在本文中，我们将介绍如何使用 Vue 和 OpenLayers 库实现以下功能：绘制矩形、截取对应部分的地图并保存。至此，我们已经完成了 Vue + OpenLayers 实现矩形绘制、地图截取和保存的功能。你可以运行 Vue 应用，并在地图上绘制矩形，然后点击下载链接来保存地图截图。钩子函数中，我们初始化了地图，并添加了绘制矩形的交互功能。在 Vue 项目中，我们需要创建一个地图组件，用于显示地图和处理绘制矩形的功能。在上面的代码中，我们导入并注册了地图组件。
OpenLayers 地图截图报错 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be
installing的博客
02-27 524
OpenLayers 地图截图报错 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be xx
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值