# openlayers 截图

openlayers 截图

OK，我承认，这篇博文是一个水文。

最新做了一个功能，就是 openlayers 展示二维 GIS 数据后，可以把当前的视角导出图片。

直接写代码吧，没啥好说的：

    // 截图
    toImg() {
      if (this.map) {
        let canvas = this.map.getViewport().querySelector('canvas');
        let dataURL = canvas.toDataURL('image/png');
        let link = document.createElement('a');
        link.href = dataURL;
        link.download = 'openlayers.png';
        link.click();
      }
    },

这样就可以了，但是也许会报错，报错原因一般都是使用的底图图层存在跨域问题。所以说在加载底图的时候，设置一下允许跨域就可以了哟。

    // 加载高德底图
    addMapLay() {
      let gdMapLayer = new TileLayer({
        source: new XYZ({
          crossOrigin: "anonymous",//跨域加这行代码，加上该代码即可
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      });
      this.map.addLayer(gdMapLayer);
    },

主要就是这行代码：crossOrigin: "anonymous"。

好了，我知道的就这么多。结束了。

拜拜！