/**
* 保存地图为图片工具栏
*/
function addMapToolSavePicture() { var saveElement = document.createElement('a');
saveElement.className = "mapbtn glyphicon glyphicon-picture";
saveElement.setAttribute("data-toggle", "tooltip");
saveElement.setAttribute("data-placement", "left");
saveElement.setAttribute("title", "SavePicture");
saveElement.onclick = function() {      // 此方法只能保存背景地图及图层数据,但是不能保存control,使用 html2canvas 可以保存地图控件信息,比如图例信息等。
// olMap.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');
// // });
// }
// });
// olMap.renderSync(); html2canvas(document.getElementById(mapId)).then(
function (canvas) {
canvas.toBlob(function (blob) { saveAs(blob,'map.png'); });
});
}; document.getElementById(soToolBarId).appendChild(saveElement);
}

openlayers 保存当前地图View为图片的更多相关文章

  1. OpenLayers 3 之 地图视图(View)

    OpenLayers 3 之 地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对 ...

  2. Android View转为图片保存为本地文件,异步监听回调操作结果;

    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...

  3. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  4. HT for Web整合OpenLayers实现GIS地图应用

    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...

  5. OpenLayers 3 之 地图控件(control)

    OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...

  6. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  7. SpringMVC 上传图片保存到服务器 同时更改图片名称保存至数据库

    @RequestMapping(value = "/save.do", method = RequestMethod.POST)    public String saveDriv ...

  8. openlayers对接百度地图新方法

    上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds ...

  9. 生成二维码,并且保存,指定位置的view成图片,并且保存到本地相册

    效果图: 保存的图片效果是: 保存到本地的,是整个视图,不只是单单的二维码的图片, 在了解的一番过程之后,我知道了, 1.首先要去获取保存图片的写入权限:(使用 https://github.com/ ...

随机推荐

  1. 06.JS对象-1

    前言: 学习一门编程语言的基本步骤(01)了解背景知识(02)搭建开发环境(03)语法规范(04)常量和变量(05)数据类型(06)数据类型转换(07)运算符(08)逻辑结构(09)函数(10)对象1 ...

  2. itest(爱测试) 4.5.0 发布,开源BUG 跟踪管理 & 敏捷测试管理软件

    itest 简介 test 开源敏捷测试管理,testOps 践行者.可按测试包分配测试用例执行,也可建测试迭代(含任务,测试包,BUG)来组织测试工作,也有测试环境管理,还有很常用的测试度量:对于发 ...

  3. powersploit的两个信息收集的脚本

    0x00 简介 powersploit是基于powershell的渗透工具包,里面都是powershell的脚本工具文件.工具包地址:https://github.com/PowerShellMafi ...

  4. MATLAB中冒号的用法解析

    MATLAB中冒号的用法解析 1.: 表示所有的意思. (1)如:a(1,:) 表示a的第1行,示例: 结果: 同样的如果a(2,:)表示a的第2行 (2)反过来,a(:,2) 表示a的第3列,示例: ...

  5. Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第一步

    第一步,设置并检查CROS跨域请求 因为我们并不打算将Blazor 由webapi来进行host,所以Blazor和api将是两个域名,这样操作即方便以后单独使用Blazor来写前端,但后端采用已有或 ...

  6. MySql学习-4.查询1

    1.基本查询语法: select * from 表名: **注意** 1.select 后写列名,*代表是所有列:        2.列名可以用as起别名,其出现在结果集中: 3.查询多个列,之间用逗 ...

  7. 飘扬的旗帜!shader 编程实战!Cocos Creator!

    用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 实现原理 ...

  8. JUnit套件测试(共通类测试)

    @RunWith(Suite.class)@Suite.SuiteClasses({ TestClass1.class, TestClass2.class })public class SuiteTe ...

  9. 剑指offer-面试题53_2-0~n-1中缺失的数字-二分查找

    /* 题目: 寻找递增数组0~n-1中缺失的数字. */ /* 思路: 变形二分法. */ #include<iostream> #include<cstring> #incl ...

  10. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...