五十七、openlayers官网示例Map Export解析——将地图导出为图片

官网demo地址：

 Map Export

 这篇介绍了如何把地图导出为图片。

先在地图上添加两个图层。

 const style = new Style({
      fill: new Fill({
        color: "#eeeeee",
      }),
    });

    this.map = new Map({
      layers: [
        new VectorLayer({
          source: new VectorSource({
            url: "https://openlayers.org/data/vector/ecoregions.json",
            format: new GeoJSON(),
          }),
          background: "white",
          style: function (feature) {
            const color = asArray(feature.get("COLOR_NNH") || "#eeeeee");
            color[3] = 0.75;
            style.getFill().setColor(color);
            return style;
          },
        }),
        new HeatmapLayer({
          source: new VectorSource({
            url: "https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson",
            format: new GeoJSON(),
          }),
          weight: function (feature) {
            return feature.get("population") / 1e7;
          },
          radius: 15,
          blur: 15,
          opacity: 0.75,
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。

exportData() {
      this.map.once("rendercomplete", () => {


      });
      this.map.renderSync();
    },

说地图导出前，我们先来看一个例子。

在canvas上绘制图形，并导出为图片。

 // 获取canvas和context
        const canvas = document.getElementById('myC