OpenLayer 加载静态图片并随地图缩放_唐岛湾的小鱼的博客-程序员ITS301_openlayer 图层随地图缩放

技术标签: 文档  javascript  

1.需求分析

最近在工作中碰到一个需求,需要在地图上加载图片,并且图片需要与地图坐标对应,随着地图缩放一起缩放。具体如下图所示:

2.解决方案

基于openlayer的image图层可以实现上述需求:Static Image。下面介绍一下具体用法,基础的openlayer用法我就不介绍了,可以从上面的示例中学习。加载图片最重要的步骤就是实现图片与实际地理坐标的一一映射。

      const extent = [111, 30.0, 116, 34.0];
      const projection = new Projection({
        code: "xkcd-image",
        units: "pixels",
        extent: extent,
      });
      var imageSource = new ImageStaticSource({
        url: "http://127.0.0.1:8181/rainfall/2017-07-31-0.png",
        projection: projection,
        imageExtent: extent,
      });
      var imageLayer = new Image({
        source: imageSource,
        opacity: 0.6,
      });
      this.map.addLayer(imageLayer);

extent指图片的实际地理坐标范围 [最小经度,最小纬度,最大经度,最大纬度],然后建立投影并创建image图层,url表示图片的地址,这里是我后台的静态资源地址。最后看一下实际效果:

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40097032/article/details/124481528

智能推荐

python中读取文件常用的三种方法:read(),readline(),readlines()_不会编程的ITer的博客-程序员ITS301_f.read

一、read([size])方法read([size])方法从文件当前位置起读取size个字节,若无参数size,则表示读取至文件结束为止,它范围为字符串对象f = open("a.txt")lines = f.read()print linesprint(type(lines))f.close()运行结果:HelloWelcomeWhat is the fuck...<type 'str'> #字符串类型二、readline()方法从字面意思可以看出,该方法

以太坊-geth环境配置记录_凌乱533的博客-程序员ITS301_geth环境变量

​一、在ESXI上创建ubuntu虚拟机打开esxi客户端或者浏览器管理页面新建虚拟机,一步步的根据需求选择相应的cpu核数,内存,硬盘。创建虚拟机后,选择Ubuntu18.04镜像。打开控制台进行ubuntu系统的安装。安装完毕。。。二、设置root账户密码1.为root设置初始密码(1)登录系统,打开终端,输入命令:sudo passwd root(为root用户设置密码)(2)设置root密码(建议简单点,没必要那么复杂);(3)重复root密码;2.修改/u

Linux-Android启动之zImage生成过程详解_insoonior的博客-程序员ITS301

<br />可以看到,在顶层makefile的第278行,包含了scripts/Kbuild.include文件,在这里定义了大量的函数和变量,供顶层makefile和其他makefile文件使用。 <br />  <br />在顶层makefile文件的第412行,包含了arch/arm/Makefile。这个是体系结构相关makefile文件。它定义了体系结构相关的一些变量及规则。 <br />  <br />当执行”make”时,arch/arm/Makefile中的185行的规则将是make遇到的第

iOS知识树,知识点(包括对象、Block、消息转发、GCD、运行时、runloop、动画、Push、KVO、tableview,UIViewController、提交AppStore)..._weixin_30340775的博客-程序员ITS301

/-&gt;UIViewController | ViewController在iOS只是一个非常重要的概念,其在一个App中所扮演的角色: | (1) View Management:管理View (2) Data Marshalli...

linux ps 只显示端口,linux常用命令—进程\端口(jps\ps\top\lsof\netstat)_知外张小串儿的博客-程序员ITS301

查看进程1、查看当前系统的java进程情况[[email protected] testing]# jps10805 BootClientMain12077 BoostMain55838 Jps43265 BoostMain12264 BoostMain37377 JournalNode12452 BoostMain38205 QuorumPeerMain50084 Worker10244 BootCl...

工作流现状2008年_runnersun的博客-程序员ITS301

如果数据库系统( database systems)像受人尊敬的智者讲述的条理清晰的故事,那么工作流(workflow)就像一群乳臭未干的小子在大谈各自的“哲理”。

随便推点

计算机网络原理(04741)自考学习笔记/备考资料_农民工老王的博客-程序员ITS301

文本是我参加计算机科学与技术专业自学考试中计算机网络原理课程的学习笔记。

多线程【Thread、线程创建】_weixin_33720956的博客-程序员ITS301

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

Dubbo负载均衡策略_wondream322的博客-程序员ITS301

随机 Random LoadBalance轮询 RoundRobin LoadBalance最少活跃调用数 LeastActive LoadBalance一致性Hash ConsistentHash LoadBalance负载均衡的使用@Reference(version = "1.0.0", loadbalance = "roundrobin")...

换手率因子(Turnover factor)——投资组合分析(EAP.portfolio_analysis)_鹦鹉螺平原的博客-程序员ITS301

实证资产定价(Empirical asset pricing)已经发布于Github. 包的具体用法(Documentation)博主将会陆续在CSDN中详细介绍。Github: GitHub - whyecofiliter/EAP: empirical asset pricing成交量会影响股票的表现,这在行业中有着悠久的历史,而在学术研究中却方兴未艾。换手率是成交量的标准代理变量。学界和业界达成的共识是换手率通常与未来回报率呈负相关(Chordia et al., 2001)。Subrahman

Deepin Software办公_「已注销」的博客-程序员ITS301_deepin 日记 red

办公学习1.LibreOfficeLibreOffice是一款功能强大的办公套件,可用于文本文档、电子表格、演示文稿、绘图、数据库以及数学公式编辑和处理,libreoffice拥有强大的数据导入和导出功能,能直接导入PDF文档、微软Works,支持主要的OpenXML格式。2.Microsoft Office 网页版Microsoft Office Online是一个办公文档协同工作平台,它可以让

推荐文章

热门文章

相关标签