react中用openlayers6预览图片

2024-01-22 02:32

本文主要是介绍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(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;

效果图

这篇关于react中用openlayers6预览图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/631580

相关文章

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled