react中用openlayers6预览图片

本文主要是介绍react中用openlayers6预览图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

react中用openlayers6预览图片

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

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

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(props){super(props);this.state = {loading: false}}componentDidMount(){this.pretreatmentImg();}/*** @name: pretreatmentImg* @desc: 预处理图片 - 只有加载完成图片之后才知道该图片的宽高*/pretreatmentImg = () => {const { definitionId } = this.props;// 加载时显示加载中图标this.setState({loading: true})// 读取服务器上面的图片的图片地址let imageUrl = "/scooper-activiti/data/definition/getProcessDiagram?definitionId=" + definitionId;let imgDom = new Image();imgDom.src = imageUrl;imgDom.onload = () => {// 得到图片的宽高再传递下去，使之layer加载出和图片一致的大小的图层this.loadImg(imgDom.width, imgDom.height, imageUrl);}}/*** @name: loadImg* @desc: 将图片加载成ol的方式* @param {width} 图片宽度* @param {height} 图片高度* @param {url} 在线图片地址*/loadImg(width, height, url){let extent = [0, 0, width, height];let projection = new Projection({code: 'xkcd-image',units: 'pixels',extent: extent,});let mapLayer = new ImageLayer({source: new Static({url: url,projection: projection,imageExtent: extent,}),})let map = new Map({layers: [mapLayer],target: 'imgShow',view: new View({projection: projection,center: getCenter(extent),zoom: 2,maxZoom: 8,}),});// 判断maplayer加载完成之后将加载中图标去掉mapLayer.on("postrender", () => {this.setState({loading: false})})}render(){return (<Spin spinning={this.state.loading}><div id="imgShow" className="map" style={{height: '100%', width: '100%'}}></div></Spin>)}
}export default ImageShow;