近日遇到一个需要,须要实现把 mapserver 图层进行截图展现并上传至后端生成数据管理的缩略图。
👉看了一下文档,决定采纳 takeScreenshot 的 api
上面是步骤:
1. 加载图层
2. 原作者地址👇👇👇
https://segmentfault.com/u/yo…
3.
refs 指向的地图组件,
mapPointMax,mapPointMin 这里我采纳的是 layer 图层里 fullExtent 内的 Xmin,Xmax,Ymin,Ymax.
area 处的 20 与 40 指生成图片的宽高
screenshot () {
let mapPointMax = {
x: 105.31229705386276,
y: 28.671804706649198,
spatialReference: {wkid: 4490}
}
let mapPointMin = {
x: 102.8696857221264,
y: 26.536026998547992,
spatialReference: {wkid: 4490}
}
let screenPointmax = this.$refs.arcgismap.view.toScreen(mapPointMax)
let screenPointmin = this.$refs.arcgismap.view.toScreen(mapPointMin)
// screenPoint = MapView.toScreen([this.buffer.extent.xmax, this.buffer.extent.ymax])
// console.log(screenPoint)
let area = {x: Math.min(screenPointmin.x, screenPointmax.x) - 20,
y: Math.min(screenPointmin.y, screenPointmax.y) - 20,
width: Math.abs(screenPointmax.x - screenPointmin.x) + 40,
height: Math.abs(screenPointmax.y - screenPointmin.y) + 40
}
this.proportion = (Math.abs(screenPointmax.y - screenPointmin.y) + 40) / (Math.abs(screenPointmax.x - screenPointmin.x) + 40)
this.proportion = this.proportion.toString()
this.$refs.arcgismap.view.takeScreenshot({area: area, format: 'png'})
.then((screenshot) => {
this.dataUrl = screenshot.dataUrl
console.log(screenshot.dataUrl);
})
},
如有不对之处欢送斧正,谢谢