码迷,mamicode.com
首页 > 其他好文 > 详细

OpenLayers3基础教程——加载资源

时间:2015-07-05 09:45:21      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:openlayers3   openlayers   ol3   wms   

概述:

本节讲述如何在Ol3中加载wms图层并显示到地图中。


Ol3下载:

你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载,下载地址为http://pan.baidu.com/s/1o6wwHTo。官网上的最新版本为3.6.0,我的网盘的版本为3.0.0,不过官网上的链接好像是失效的。


OL3必须资源引入:

OL3必须引入的资源有两个,一个为样式文件,ol.css;一个为js文件,ol.js。


OL3加载wms:

在Ol3中,可以通过两种方式加载WMS,一种是ol.layer.Image,其对应的资源为ol.source.ImageWMS,他它的定义方式为:

			var untiled = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://localhost:8081/geoserver/lzugis/wms',
					params: {'FORMAT': format,
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:province',
						STYLES: ''
					}
				})
			});

一种是ol.layer.Tile,其对应的资源为ol.source.TileWMS,它的定义方式为:

			var tiled = new ol.layer.Tile({
				visible: false,
				source: new ol.source.TileWMS({
					url: 'http://localhost:8080/geoserver/lzugis/wms',
					params: {'FORMAT': format,
						'VERSION': '1.1.1',
						tiled: true,
						LAYERS: 'lzugis:province',
						STYLES: ''
					}
				})
			});


显示资源:

OL3中显示资源使用Map实现的,一个Map实例包括target,即地图展示的div的id;layers,地图要现实的图层集合;view,包括投影,中心点等信息,定义方式为:

			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [
					untiled,
					tiled
				],
				view: new ol.View({
					projection: projection,
					rotation: Math.PI / 6
				})
			});
			map.getView().fitExtent(bounds, map.getSize());

将上面的内容连起来,完整的代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 wms</title>
	<link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
	</style>
	<script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>
	<script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		function init(){
			var format = 'image/png';
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			var untiled = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://localhost:8081/geoserver/lzugis/wms',
					params: {'FORMAT': format,
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:province',
						STYLES: ''
					}
				})
			});
			var tiled = new ol.layer.Tile({
				visible: false,
				source: new ol.source.TileWMS({
					url: 'http://localhost:8080/geoserver/lzugis/wms',
					params: {'FORMAT': format,
						'VERSION': '1.1.1',
						tiled: true,
						LAYERS: 'lzugis:province',
						STYLES: ''
					}
				})
			});
			var projection = new ol.proj.Projection({
				code: 'EPSG:4326',
				units: 'degrees'
			});
			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [
					untiled,
					tiled
				],
				view: new ol.View({
					projection: projection,
					rotation: Math.PI / 6
				})
			});
			map.getView().fitExtent(bounds, map.getSize());
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
	<div id="location"></div>
</div>
</body>
</html>


相关课程:

OpenLayers3基础教程——OL3基本概念



技术分享





版权声明:本文为博主原创文章,未经博主允许不得转载。

OpenLayers3基础教程——加载资源

标签:openlayers3   openlayers   ol3   wms   

原文地址:http://blog.csdn.net/gisshixisheng/article/details/46756459

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!