openlayers3中如何叠加png图片

概述

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


实现思路

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

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

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

openlayers3中如何叠加png图片_第1张图片

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

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

实现后如下:

openlayers3中如何叠加png图片_第2张图片

实现代码

	

-------------------------------------------------------------------------------------------------------------

技术博客

CSDN:http://blog.csdn.NET/gisshixisheng

博客园:http://www.cnblogs.com/lzugis/

在线教程

http://edu.csdn.Net/course/detail/799

Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:[email protected]

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)

转载于:https://www.cnblogs.com/lzugis/p/7224362.html

你可能感兴趣的:(openlayers3中如何叠加png图片)