近日遇到一个需求,需要实现把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);
    })
},

如有不对之处欢迎指正,谢谢


友人A
81 声望11 粉丝