本篇文章給大家談談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怎么裁圖的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
