OpenLayers-第一个程序
2015-10-30 13:25
411 查看
整理自:/article/5732863.html
OpenLayers是一个javascript编写的开源WebGIS客户端软件,后端可连接标准的OGC WMS/WFS/WCS的WebGIS服务以及Google Map,Microsoft Virtual Earth等空间数据。 OpenLayers具有丰富的功能,可用来开发WebGIS客户端应用程序,目前的稳定版本是2.12。
下面利用在GeoServer发布WMS/WFS服务中发布的WMS服务,来实现一个简单的加载和现实WMS服务数据的OpenLayers程序。
1.下载OpenLayers
OpenLayers可以在http://www.openlayers.org/download/OpenLayers-2.12.zip处下载。解压后放到tomcat的webapps目录下,OpenLayers的目录结构为
2. 创建map-wms.html文件,并存在tomcat下的OpenLayers目录下
3. 添加OpenLayers库的js引用
4. 添加OpenLayers的css引用
5.定义wms参数
6. 定义html初始化函数,在这个函数中加载wms layer并显示
7. 设置html onload函数为init()
8.定义OpenLayers的map容器
9. 在浏览器中键入http://127.0.0.1:8080/OpenLayers/map-wms.html,显示OpenLayer界面
完整的代码如下
OpenLayers是一个javascript编写的开源WebGIS客户端软件,后端可连接标准的OGC WMS/WFS/WCS的WebGIS服务以及Google Map,Microsoft Virtual Earth等空间数据。 OpenLayers具有丰富的功能,可用来开发WebGIS客户端应用程序,目前的稳定版本是2.12。
下面利用在GeoServer发布WMS/WFS服务中发布的WMS服务,来实现一个简单的加载和现实WMS服务数据的OpenLayers程序。
1.下载OpenLayers
OpenLayers可以在http://www.openlayers.org/download/OpenLayers-2.12.zip处下载。解压后放到tomcat的webapps目录下,OpenLayers的目录结构为
2. 创建map-wms.html文件,并存在tomcat下的OpenLayers目录下
3. 添加OpenLayers库的js引用
1 <script src="./OpenLayers/lib/OpenLayers.js"></script>
4. 添加OpenLayers的css引用
1 <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> 2 <link rel="stylesheet" href="./css/style.css" type="text/css" />
5.定义wms参数
1 <script type="text/javascript"> 2 //定义wms url地址 3 var wms_url = "http://127.0.0.1:8080/geoserver/world/wms?"; 4 //定义wms图层 5 var wms_layer = "world:country,world:cities"; 6 //定义wms map图片格式 7 var wms_format = 'image/png'; 8 </script>
6. 定义html初始化函数,在这个函数中加载wms layer并显示
1 <script type="text/javascript"> 2 //定义OpenLayers map对象 3 var map = null; 4 function init() 5 { 6 //创建map对象, 7 map = new OpenLayers.Map("map"); 8 //创建WMS layer对象 9 var layer = new OpenLayers.Layer.WMS("WMS Country", wms_url, 10 { 11 layers: wms_layer, 12 format: wms_format, 13 singleTile: true 14 }); 15 // 添加图层 16 map.addLayer(layer); 17 // 放大到全屏 18 map.zoomToMaxExtent(); 19 } 20 </script>
7. 设置html onload函数为init()
1 <body onload="init()"> 2 … 3 </body>
8.定义OpenLayers的map容器
1 <body onload="init()"> 2 <div id="map" class="smallmap"></div> 3 </body>
9. 在浏览器中键入http://127.0.0.1:8080/OpenLayers/map-wms.html,显示OpenLayer界面
完整的代码如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> OpenLayers : WMS </TITLE> 5 6 <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> 7 <link rel="stylesheet" href="./css/style.css" type="text/css" /> 8 9 <script src="./lib/OpenLayers.js"></script> 10 11 <script type="text/javascript"> 12 13 //定义OpenLayers map对象 14 var map = null; 15 16 //定义wms url地址 17 var wms_url = "http://127.0.0.1:8080/geoserver/world/wms?"; 18 //定义wms图层 19 var wms_layer = "world:country,world:cities"; 20 //定义wms map图片格式 21 var wms_format = 'image/png'; 22 23 function init() 24 { 25 //创建map对象, 26 map = new OpenLayers.Map("map"); 27 //创建WMS layer对象 28 var layer = new OpenLayers.Layer.WMS("WMS Country", wms_url, 29 { 30 layers: wms_layer, 31 format: wms_format, 32 singleTile: true 33 }); 34 // 添加图层 35 map.addLayer(layer); 36 // 放大到全屏 37 map.zoomToMaxExtent(); 38 } 39 40 </script> 41 42 </HEAD> 43 44 <body onload="init()"> 45 <div id="map" class="smallmap"></div> 46 </body> 47 </HTML>
相关文章推荐
- OpenLayers-控件篇
- 系统实施系列之Tomcat绑定多个IP地址及多域名绑定
- 系统实施系列之tomcat设置IP地址或者域名访问
- NGINX引入线程池 性能提升9倍
- Linux下C语言编译基础及makefile的编写
- Docker vs CoreOS:虚拟化之容器战争值得发动
- Hadoop 1.x 伪分布式部署与测试
- 多子系统项目架构与人员管理
- 手把手教你认识并搭建Nginx
- Linux常见指令以及功能
- Linux正确的关机方法
- 【转】用JSON报的一个错误java.lang.ClassNotFoundException: org.apache.commons.lang.exception.NestableRuntimeExcept
- Java Web开发的轻便架构Tapestry5---页面渲染之框架职责
- Java Web开发的轻便架构Tapestry5---页面渲染一
- linux中wait系统调用1
- Linux多线程编程(不限Linux)
- 每天一个linux命令(26):用SecureCRT来上传和下载文件
- shell杂记
- shell杂记
- Srping 中的AOP