今天給各位分享svg地圖gis地圖的知識，其中也會對如何畫svg地圖進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！
目錄一覽：
做個svg格式的中國地圖,有什么 *** 讓他與真實的經緯度坐標呢？
基本思路是在衛(wèi)星地圖中獲取路線后，將其截圖。在ARCGIS中將圖配準（即配準經緯度），下一步是矢量化你所要的路線，即可獲得shp格式的線了，線上的經緯度坐標自然就出來了。這 *** 的經度肯定要打折扣，不同范圍的圖有不同程度的誤差。希望能幫到你，同意請采納。
如何用tableau制作一個小范圍的地圖
Tableau制作地圖的 *** ，和同是自助式BI的帆軟商業(yè)智能FineBI類似，都可以簡單拖拽然后生成地圖的。之前試用的Tableau到期了，沒辦法演示，這里以FineBI為例展示一下，思想原理都相同的。
1、當確定要使用的圖表類型之后，需要在新建分析上選擇對應的組件圖表并拖拽至dashbroad需要顯示的位置，然后會自動跳轉至組件配置界面。
2、先選擇需要使用的地圖類型，我們現(xiàn)在需要使用的是中國地圖。
添加微信好友, 獲取更多信息
復制微信號
3、當進入到組件詳細配置界面時，從數(shù)據(jù)選擇區(qū)域中，選擇簽約事實表，選擇合同總價添加至指標區(qū)域，選擇城市地區(qū)維度表，點擊選擇省字段添加至地區(qū)名區(qū)域，此時可以看到如圖所示的展示結果，區(qū)域顏色深淺隨指標值的不同而不同。
gis多個圖層地圖用htmlcanvas截圖獲取不到
找到兩個前端就能解決的 *** ，最后因為各種原因采用了 *** 二。
???????? *** 一：
????????????????找到地圖上的全部點，然后在canvas上面重繪一次。
html2canvas(this.$refs.target, {
...
useCORS: true, // 如果截圖的內容里有圖片,可能會有跨域的情況,加上這個參數(shù),解決文件跨域問題
}).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定位問題，最后打的點可能會出現(xiàn)偏移。
所以還要給html2canvas加幾個屬性： x , y , scrollX , scrollY。保險起見，再加上兩個參數(shù)?width 和 height 。
本人是后面chrome測著沒問題，但是給小伙伴測試的時候，他用的360瀏覽器還有個xx瀏覽器有點問題。干脆參數(shù)全加上。
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, // 如果截圖的內容里有圖片,可能會有跨域的情況,加上這個參數(shù),解決文件跨域問題
}).then((canvas) = {
...
})
}
登錄后復制
要是項目的地圖是不可移動的，基本到這里就可以了。
但是地圖只要一挪動。。一個新的bug出現(xiàn)了。。。。。整個地圖畫線打點層的偏移量和截圖之前不一樣。。。。 截圖后，畫線層偏的比原地圖還要遠，打點卻還在原位沒動過。。
這個問題需要修正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, // 如果截圖的內容里有圖片,可能會有跨域的情況,加上這個參數(shù),解決文件跨域問題
}).then((canvas) = {
...
})
}, 200);
}
登錄后復制
svg地圖gis地圖的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于如何畫svg地圖、svg地圖gis地圖的信息別忘了在本站進行查找喔。
