react中用openlayers6预览图片

react中用openlayers6预览图片

在做项目的时候发现预览图片不能放大缩小，也不能移动，感觉不如用openlayers写一个图片预览的demo组件，虽然有点大材小用，可是本着学习的原则了解一下openlayers也是蛮好的。
记录下遇到的几点难点

1. ol的官网说实话都是英文，对于英文小白来说感觉不是很友好，不过还是找到了图片为地图加载的demo链接：openlayers静态图片demo
2. 因为项目中图片是放在服务器上面的，加载速度比较慢，在图片加载出来一段时间里面，页面是空白的，效果并不是很好，于是考虑加了antd的Spin(加载中的组件)，因为项目是用的react，所以这样子写。但是我又遇到了一个问题，什么时候判断layer对象加载完成呢，所以又翻了根本看不懂的官网加载完成api：postrender。
3. 附上组件源码：

import React from "react";
import {
    Spin } from "antd";
import ImageLayer from 'ol/layer/Image';
import Map from 'ol/Map';
import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';
import View from 'ol/View';
import {
    getCenter } from 'ol/extent';
import 'ol/src/ol.css';

class ImageShow extends React.Component{
   

    constructor