本篇文章给大家谈谈gis地图截图代码,以及gis怎么裁图对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
目录一览:
- 1、gis多个图层地图用htmlcanvas截图获取不到
- 2、gis怎么截图影像保存图片
- 3、怎么从gis上扣部分地图
- 4、下载了WEBGIS地图,然后里面有一些下面图片的代码,小弟完全看不懂
- 5、怎么在ARCGIS中截取一个城市地图中的某个区?
gis多个图层地图用htmlcanvas截图获取不到
找到两个前端就能解决的 *** ,最后因为各种原因采用了 *** 二。
*** 一:
找到地图上的全部点,然后在canvas上面重绘一次。
html2canvas(this.$refs.target, {
添加微信好友, 获取更多信息
复制微信号
...
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) = {
let cans = canvas.getContext("2d");
//批量地图重新打点 加载图片
document.querySelectorAll("#mapView_layers image").forEach((item) = {
var obj = item;
var x = item.getAttribute("x");
var y = item.getAttribute("y");
var itemWidth = item.getAttribute("width");
var itemHeight = item.getAttribute("height");
console.log("item", item, x, y);
if (width == 8) {
cans.drawImage(obj, x, y, itemWidth, itemHeight);
} else {
cans.drawImage(
obj,
x ,
y - 1 - itemHeight / 2 ,
itemWidth,
itemHeight
);
}
});
...
//下面是截图代码
})
登录后复制
因为本身目标dom的position定位问题,最后打的点可能会出现偏移。
所以还要给html2canvas加几个属性: x , y , scrollX , scrollY。保险起见,再加上两个参数 width 和 height 。
本人是后面chrome测着没问题,但是给小伙伴测试的时候,他用的360浏览器还有个xx浏览器有点问题。干脆参数全加上。
screenShot() {
let canvasBox = this.$refs.target;
//获取目标div位置;
var tPosition = canvasBox.getBoundingClientRect();
console.log("size", tPosition);
// 获取父级的宽高
const width = parseInt(window.getComputedStyle(canvasBox).width);
const height = parseInt(window.getComputedStyle(canvasBox).height);
html2canvas(this.$refs.target, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPosition.y,
scrollX: -tPosition.x,
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) = {
...
})
}
登录后复制
要是项目的地图是不可移动的,基本到这里就可以了。
但是地图只要一挪动。。一个新的bug出现了。。。。。整个地图画线打点层的偏移量和截图之前不一样。。。。 截图后,画线层偏的比原地图还要远,打点却还在原位没动过。。
这个问题需要修正svg的偏移,然后这个标注点绘制的时候也要加上一个偏移量。
地图偏移的bug后面再讲。
*** 二:(最后采用)
把svg中所有的image图片的href路径转换为base64编码格式。简单方便,不用考虑位置什么的问题,就是有些浏览器里面图片加载慢。。。setTimeout有时候要设置大一点。。
screenShot() {
let canvasBox = this.$refs.target;
//获取目标div位置;
var tPosition = canvasBox.getBoundingClientRect();
console.log("size", tPosition);
// 获取父级的宽高
const width = parseInt(window.getComputedStyle(canvasBox).width);
const height = parseInt(window.getComputedStyle(canvasBox).height);
//---------------------
//解决svg 内部image加载不了的问题,把image改为base64,配合setTimeout html2canvas使用
document.querySelectorAll("#mapView_layers image").forEach((item) = {
console.log("item", item);
var img = item.getAttribute("xlink:href");
console.log("href", img);
var image = new Image();
image.crossOrigin = "";
image.src = img;
image.onload = () = {
var base64 = getBase64Image(image);
item.setAttribute("xlink:href", base64); //更改href属性
};
});
//图片地址转为base64编码
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
setTimeout(() = {
html2canvas(this.$refs.target, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPosition.y,
scrollX: -tPosition.x,
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) = {
...
})
}, 200);
}
登录后复制
gis怎么截图影像保存图片
您好,GIS截图影像保存图片的 *** 如下:
1. 首先,打开GIS软件,找到您要截图的影像;
2. 然后,在影像上绘制一个框,选择您想要截取的区域;
3. 接着,点击GIS软件上的“截图”按钮,将影像截取下来;
4. 最后,点击GIS软件上的“保存”按钮,将截图保存到您指定的文件夹中。
希望以上回答能够帮助您解决问题,如果您还有其他问题,欢迎随时咨询我!
怎么从gis上扣部分地图
1、首先我们点击“开始”—“ArcGIS”—“ArcMap 10”,启动ArcMap程序。
2、选择“空白地图”模板,点击“确定”,创建一个空白地图。
3、点击ArcMap菜单栏的“添加数据”,打开添加数据对话框。
4、选择要添加的数据,点击“添加”,将shapefile文件添加到空白地图。
5、同样使用添加数据功能,在空白地图上添加局部区域范围线。
6、打开ArcMap的工具箱,选择“工具箱”—“系统工具箱”—“Analysis Tools.tbx”—“提取”—“裁剪”,打开要素裁剪界面。
7、在要素裁剪界面,选择输入要素,就是要被裁剪的图层,这里选择添加的shapefile文件,选择裁剪要素,就是用来裁剪shapefile的范围线,选择输出结果的存储位置,点击“确定”,开始裁剪要素。
8、等待要素裁剪完成,完成后裁剪结果会自动添加到地图上,这样就截取了shapefile的局部区域了。
下载了WEBGIS地图,然后里面有一些下面图片的代码,小弟完全看不懂
这不是生成文件,是官方已经写好的代码,放到了这里面,你可以直接调用里面的 *** ,而不用自己写太难的代码,基于这知之上,你可以完成自己的开发,这就是二次开发!希望对你有帮助!
怎么在ARCGIS中截取一个城市地图中的某个区?
你用ArcToolbox-Analysis
Tools(分析工具)-Extract(导出)-Clip工具,同过你的区域面来裁切出这个区域的矢量底图。
关于gis地图截图代码和gis怎么裁图的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。