近日遇到一个需求,需要实现把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);
})
},
如有不对之处欢迎指正,谢谢
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。