openlayers3中如何叠加png图片

概述

本文讲述如何在OL3中叠加展示PNG图片。

实现思路

在OL3中,可通过ImageStatic资源来添加展示一个PNG图片,代码如下:

		image = new ol.layer.Image({
	            source: new ol.source.ImageStatic({
	               url: "img/china2.png",
	               imageExtent: extent
	            })
	        })

在此过程中,需要注意PNG图片的四至,即最大/最小经纬度,例如图片的四至信息如下:

代码中,定义extent的时候,extent的定义如下:

var extent = [63.9796331669, 14.7451916711, 140.1812559169, 55.4673388687];

实现后如下:

实现代码

	<script type="text/javascript">
		var map, image;
		function init(){
			var bounds = [72.985, 17.006, 134.416, 54.815];
			var extent = [63.9796331669, 14.7451916711, 140.1812559169, 55.4673388687];
			image = new ol.layer.Image({
	            source: new ol.source.ImageStatic({
	               url: "img/china2.png",
	               imageExtent: extent
	            })
	        })
			
			var projection = new ol.proj.Projection({
				code: 'EPSG:4326',
				units: 'degrees'
			});
			var vec_c = getTdtLayer("vec_w");
			var province = new ol.layer.Image({
		        source: new ol.source.ImageWMS({
			          ratio: 1,
			          url: 'http://10.16.48.185:8086/geoserver/my_test/wms',
			          params: {
			          		'FORMAT': 'image/png',
			                'VERSION': '1.1.1',
			                STYLES: '',
			                LAYERS: 'my_test:province_line',
			          }
		        })
		    });
			map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [vec_c,image,province],
				view: new ol.View({
					projection: projection,
					minZoom:4,
					maxZoom:18
				})
			});
			map.getView().fit(bounds, map.getSize());
		}

		function getTdtLayer(lyr){
			var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
    		var layer = new ol.layer.Tile({
				source: new ol.source.XYZ({
			        url:url
			    })
			});
			return layer;
		}
	</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WOLFRAM

你问我答_Plot命令中如何绘制垂直x轴?

22520
来自专栏我是攻城师

关于opencv图片颜色不能正常在matplotlib中显示的问题

opencv默认的彩色图片的加载方式是按照BGR加载的,直接用opencv的函数展示是没有问题的,但是有时候我们想把多张图片放在一起展示,这时候用matplot...

12110
来自专栏编程语言

Python:pygame的初步使用(pygame.draw)(二)

14420
来自专栏张善友的专栏

开源OCR引擎Tesseract

知名的开源OCR引擎Tesseract 3.0版本日前发布,可以在项目网站下载:http://code.google.com/p/tesseract-ocr, ...

1.5K100
来自专栏图形学与OpenGL

实验二 直线DDA生成算法的GDI实现

理解基本图形元素光栅化的基本原理,掌握一种基本图形元素光栅化算法,利用GDI实现直线光栅化的DDA算法。

25920
来自专栏xingoo, 一个梦想做发明家的程序员

利用CSS制作脸书

很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息。 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片;另一部...

21470
来自专栏肖洒的博客

【爬虫】(二)爬取西电教务处成绩

49330
来自专栏数据小魔方

直方图

今天跟大家分享直方图的制作技巧! ▼ 直方图是统计描述常用的图表工具,虽然跟柱形图外表有点类似,但是制作方法却要比柱形图复杂得多,今天要跟大家分享两种直方图的制...

31860
来自专栏友弟技术工作室

Django实现验证码

Django实现验证码 背景知识 1. 验证码的作用 防恶意破解密码:防止,使用程序或机器人恶意去试密码.为了提高用户的体验,用户输入错误以后,才会要求输入验证...

802110
来自专栏瓜大三哥

形态学滤波(五)

形态学滤波(五) 之一维形态学腐蚀/膨胀子模块设计 对于图像处理而言,是纵向和横向两个维度的处理。我们知道,对于任何二维的操作,都可以分解为一维方向的操作来简化...

24560

扫码关注云+社区

领取腾讯云代金券