OpenLayers3基础教程——加载资源

来源：互联网发布：数据分析师职称编辑：程序博客网时间：2024/06/05 18:09

概述：

本节讲述如何在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基本概念

0 0