（转） OpenLayers3基础教程—

概述：

本节讲述如何在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，他它的定义方式为：

[javascript] view plaincopy print?

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，它的定义方式为：

[javascript] view plaincopy print?

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，包括投影，中心点等信息，定义方式为：

[javascript] view plaincopy print?

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] view plaincopy print?

<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>

转载于:https://www.cnblogs.com/telwanggs/p/6972870.html

（转） OpenLayers3基础教程——加载资源相关推荐

OpenLayers3基础教程——OL3 介绍control
概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比较: 相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...
PyQt5教程(八)——实现QQ登录界面（二、加载资源文件）
实现QQ登录界面--加载资源文件一.创建资源文件: 上篇文章创建了QQ登录界面,本篇介绍创建并加载资源文件. 1.创建资源文 ...
On-Demand Resources Guide中文版（按需加载资源--上）
本文翻译由唧唧歪歪翻译自Apple文档 On-Demand Resources Guide On-Demand Resources Guide中文版(按需加载资源--下)包含管理按需加载资源.调试以及 ...
TGame游戏新篇：1.5 追求动态的加载资源
在看Unreal Engine 4.x Scripting with C++ Cookbook(第二版)这本书,把一些必要的基础知识过一过.目前没有学习ygo具体游戏逻辑的实现,先尝试先自己简化一下实 ...
OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
（转）OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念从本节开始,我会陆陆续续的更新 ...
Addressable系统的加载资源API总结
你好,我是跟着大智学Unity的萌新,我叫小新,这是我本周的学习总结报告哦. 大智:"小新,这周学习有没有遇到什么问题呢?" 小新:"确实遇到了,那个Addressabl ...
OpenLayers3基础教程——OL3基本概念
从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLay ...
On-Demand Resources Guide中文版（按需加载资源--下）
本文由唧唧歪歪翻译自Apple文档 On-Demand Resources Guide 该文档的上部分包含:按需加载资源基础以及创建和编辑tag两部分 (三)管理按需加载资源下载和管理按需加载资源 ...

（转） OpenLayers3基础教程——加载资源

（转） OpenLayers3基础教程——加载资源相关推荐

最新文章

热门文章