本篇文章給大家談談gis地圖網管截圖，以及gis畫地圖對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
目錄一覽：
GIS如何實現截圖功能
一個最簡單的 *** ，登錄 *** 后，按住Ctrl+Alt+A就可以自由截圖了。
電腦鍵盤上也有直接截圖的快捷鍵，叫做Print screen，自己找找看吧。
谷地goodygis 怎樣截圖
按照路線軌跡從谷歌地球截圖，操作步驟如下：
之一步：繪制路線，或導入已有的kml。打開谷地的“地球截圖”工具。
添加微信好友, 獲取更多信息
復制微信號
選擇“路線（帶狀）”單選按鈕。
鼠標左鍵點擊路線，識別成功后，會顯示路線的長度和名稱。
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畫地圖的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
