今天给各位分享svg地图gis地图的知识，其中也会对如何画svg地图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
目录一览：
做个svg格式的中国地图,有什么 *** 让他与真实的经纬度坐标呢？
基本思路是在卫星地图中获取路线后，将其截图。在ARCGIS中将图配准（即配准经纬度），下一步是矢量化你所要的路线，即可获得shp格式的线了，线上的经纬度坐标自然就出来了。这 *** 的经度肯定要打折扣，不同范围的图有不同程度的误差。希望能帮到你，同意请采纳。
如何用tableau制作一个小范围的地图
Tableau制作地图的 *** ，和同是自助式BI的帆软商业智能FineBI类似，都可以简单拖拽然后生成地图的。之前试用的Tableau到期了，没办法演示，这里以FineBI为例展示一下，思想原理都相同的。
1、当确定要使用的图表类型之后，需要在新建分析上选择对应的组件图表并拖拽至dashbroad需要显示的位置，然后会自动跳转至组件配置界面。
2、先选择需要使用的地图类型，我们现在需要使用的是中国地图。
添加微信好友, 获取更多信息
复制微信号
3、当进入到组件详细配置界面时，从数据选择区域中，选择签约事实表，选择合同总价添加至指标区域，选择城市地区维度表，点击选择省字段添加至地区名区域，此时可以看到如图所示的展示结果，区域颜色深浅随指标值的不同而不同。
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);
}
登录后复制
svg地图gis地图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于如何画svg地图、svg地图gis地图的信息别忘了在本站进行查找喔。
