OpenLayers访问WTMS服务及添加Googlemap
1、访问WMS服务
首先需要发布WMS服务，才能进行地图WMS服务访问。这里不说怎么发布WMS服务，直接看怎么调用，代码如下：
代码
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>OpenLayers map preview</title>
<style type="text/css">
#map {
width: 800px;
height: 380px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">
</script>
<script type="text/javascript">
function setHTML(response)
{
OpenLayers.Util.getElement('nodelist').innerHTML = response.responseText;
};
function init()
{
var map = new OpenLayers.Map("map",{controls:[], 'projection': 'EPSG:4326', 'units':'degrees'});
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
var bounds = new OpenLayers.Bounds(114.08473735,22.5444392,114.09911765000001,22.5517168);
tiled = new OpenLayers.Layer.WMS("topp:danwei_font_point", "http://localhost:8080/geoserver/wms",
{height: '380',width: '800',layers: 'topp:danwei_font_point',styles: '',srs: 'EPSG:4326',format: 'image/png', tiled: 'true', tilesOrigin :"114.08473735,22.5444392"},
{maxExtent: bounds, maxResolution: 5.617304687505209E-5, projection: "EPSG:4326", buffer: 0});
map.addLayer(tiled);
jiaotonggandao_region = new OpenLayers.Layer.WMS("topp:jiaotonggandao_region", "http://localhost:8080/geoserver/wms",
{height: '392',width: '800',layers: 'topp:jiaotonggandao_region',styles: '',srs: 'EPSG:4326', transparent: "true",format: 'image/png', tiled:'true', tilesOrigin :"114.0836293,22.543578500000002"},
{maxExtent: bounds, maxResolution: 6.49429687499814E-5, projection: "EPSG:4326", buffer: 0});
map.addLayer(jiaotonggandao_region);
daoluzhongxinxian_polyline = new OpenLayers.Layer.WMS("topp:daoluzhongxinxian_polyline", "http://localhost:8080/geoserver/wms",
{height: '392',width: '800',layers: 'topp:daoluzhongxinxian_polyline',styles: '',srs: 'EPSG:4326', transparent: "true",format: 'image/png', tiled:'true', tilesOrigin : "114.0836293,22.543578500000002"},
{maxExtent: bounds, maxResolution: 6.49429687499814E-5, projection: "EPSG:4326", buffer: 0,isBaseLayer:false});
map.addLayer(daoluzhongxinxian_polyline);
shangsha_font_point = new OpenLayers.Layer.WMS("topp:shangsha_font_point", "http://localhost:8080/geoserver/wms",
{width: '800',layers: 'topp:shangsha_font_point',styles: '',srs: 'EPSG:4326',height: '381',format: 'image/png', transparent: "true",tiled: 'true', tilesOrigin : "114.0838415,22.543650900000003"},
{maxExtent: bounds, maxResolution: 6.20898437499462E-5, projection: "EPSG:4326", buffer: 0,isBaseLayer:false});
map.addLayer(shangsha_font_point);
untiled = new OpenLayers.Layer.WMS.Untiled("topp:danwei_font_point", "http://localhost:8080/geoserver/wms",
{height: '380',width: '800',layers: 'topp:danwei_font_point',styles: '',srs: 'EPSG:4326',format: 'image/png'},
{maxExtent: bounds, maxResolution: 5.617304687505209E-5, projection: "EPSG:4326"});
untiled.ratio=1;
untiled.setVisibility(false, false);
map.addControl(new OpenLayers.Control.PanZoomBar({div:$('nav')}));
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('position')}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.OverviewMap());
map.zoomToExtent(bounds);
map.events.register('click', map,
function (e)
{
OpenLayers.Util.getElement('nodelist').innerHTML = "Loading… please wait..." + map.layers[0].name;
var url = map.layers[0].getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
layers: 'topp:danwei_font_point',
styles: '',srs: 'EPSG:4326',WIDTH: map.size.w,HEIGHT: map.size.h},
"http://localhost:8080/geoserver/wms");
OpenLayers.loadURL(url, '', this, setHTML, setHTML);
Event.stop(e);
});
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td style="width: 40px" valign="middle" rowspan="3">
<div id="nav"></div>
</td>
<td colspan="3" align="right">
<a id="untiledLink" href="#"
onclick="map.removeLayer(tiled);map.addLayer(untiled);">Untiled</a>
<a id="tiledLink" href="#"
onclick="map.removeLayer(untiled);map.addLayer(tiled);">Tiled</a>
</td>
</tr>
<tr>
<td colspan="3">
<div id="map"></div>
</td>
</tr>
<tr>
<td>
<div id="scale"></div>
</td>
<td align="right">
<div id="position"></div>
</td>
</tr>
</table>
<div id="nodelist">
Click on the map to get feature
</div>
</body>
</html>
2、添加Googlemap图层
1）、申请Google 地图key：
申请Google 地图 API 的keyhttp://www.google.com/intl/zh-CN/apis/maps/signup.html
申请的url填写为： http://yourhost/:8080/
2）、在HTml中添加地图引用：
<script charset="utf-8" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAB6A1_oyBce6PP1YjsfO0_hQNFBmrp5F93wWCsYm0Hw_cwNHkjhT-j-A3DS2sOTKDXHL3iAgKKdglFQ" type="text/javascript"> </script>
3）、在init方法中加入如下代码：
//Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//加载google地图
var googlesatellite = new OpenLayers.Layer.Google("Google Satellite", {type:G_SATELLITE_MAP, 'maxZoomLevel':18} );
map.addLayers([googlesatellite]);
var googlebybrid = new OpenLayers.Layer.Google("Google Hybrid", {type:G_HYBRID_MAP});
map.addLayers([googlebybrid]);
var GMapsStreets = new OpenLayers.Layer.Google("Google Streets", {type:G_NORMAL_MAP, 'maxZoomLevel':18} );
map.addLayers([GMapsStreets]);
OpenLayers访问WTMS服务及添加Googlemap的更多相关文章
- 《深入理解Nginx》阅读与实践（三）：使用upstream和subrequest访问第三方服务
本文是对陶辉<深入理解Nginx>第5章内容的梳理以及实现,代码和注释基本出自此书. 一.upstream:以向nginx服务器的请求转化为向google服务器的搜索请求为例 (一)模块框 ...
- 客户端使用自定义代理类访问WCF服务 z
通常在客户端访问WCF服务时,都需要添加服务引用,然后在客户端app.config或 web.config文件中产生WCF服务的客户端配置信息.若是每添加一个服务都是这样做,这样势必会将比较麻烦,能否 ...
- 使用upstream和subrequest访问第三方服务
本文是对陶辉<深入理解Nginx>第5章内容的梳理以及实现,代码和注释基本出自此书. 一.upstream:以向nginx服务器的请求转化为向google服务器的搜索请求为例 (一)模块框 ...
- Android开发9：网络访问&Web服务开发
前言 啦啦啦各位小伙伴们好~ 一起进入我们今天的主题.今天我们将和大家学习网络访问和Web服务开发的相关知识,一起学习熟练使用 HttpURLConnection 访问 WebService,熟悉使用 ...
- Spring提供的用于访问Rest服务的客户端：RestTemplate实践
什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效 ...
- 如何使用RestTemplate访问restful服务
一. 什么是RestTemplate 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClient.不过此种方法使用起来太过繁琐.spring提供了一种简单便捷的模板类 ...
- Quartz动态添加定时任务执行sql（服务启动添加+手动添加）
系统用来每天插入视图数据... 一.数据库表设计 1.接口配置表(t_m_db_interface_config) 2.接口日志表(t_m_db_interface_log) 3.前端配置页面 查询页 ...
- 如何使用好android的可访问性服务（Accessibility Services）
原文:http://android.eoe.cn/topic/android_sdk * 主题* Manifest声明和权限 可访问性服务声明 可访问性服务配置 AccessibilityServic ...
- Reporting Service编程----访问Web服务
将报表服务器 Web 服务的引用添加到项目中后,下一步是创建 Web 服务代理类的实例. 然后,您可以通过调用代理类中的方法来访问 Web 服务的方法. 当你的应用程序调用这些方法时,代理类生成的代码 ...
随机推荐
- 国外大神Leo-G的 DevopsWiki
https://raw.githubusercontent.com/Leo-G/DevopsWiki/master/README.md 总结的太好了,直接把md文件贴过来好了!慢慢学习!分享给大家,觉 ...
- acdream 1154 Lowbit Sum
先贴代码,以后再写题解... 首先,直接枚举肯定是会超时的,毕竟n就有10^9那么多... 对于每个数,我们先把它转化为二进制:例:21-->10101: 对于00001~10101,可以分为几 ...
- TensorFlow深度学习笔记 循环神经网络实践
转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地址 视频/字幕下载 加 ...
- python学习day3
目录: 1.集合set 2.计数器 3.有序字典 4.默认字典 5.可命名元组 6.队列 7.深浅拷贝 8.函数 9.lambda表达式 10.内置函数 一.集合set set是一个无序且不重复的元素 ...
- STM32F10xxx启动模式分析（详细）
STM32的启动模式: STM32有三种启动模式,对应的存储介质均是芯片内置的: 1. User Flash Memory(Main Memory) = 芯片内置的Flash,用户程序存放 ...
- 如何设置 Internal 类，方法，属性对其他项目可见
internal 修饰符时程序集内部其他类可见.但对程序集外的类不可见,这样就很好的封装了可见性. 但是,我们也许会碰到类似的情况,特别是基于已有代码开发新的代码时,你会发现很多 internal 的 ...
- error C2065: 'assert' : undeclared identifier
F:\VC6.0 : error C2065: 'assert' : undeclared identifier 导入#include <assert.h>
- win7 Visual Studio 2008 安装程序时出现“ 加载安装组件时遇到问题。取消安装。”处理方法
win7 Visual Studio 2008 安装程序时出现“ 加载安装组件时遇到问题.取消安装.”处理方法 vs2008试用期到期,卸载.重新安装都会出现“ 加载安装组件时遇到问题.取消安装.”无 ...
- 基于winform的二进制图片数据的存取（用于数据库照片的读写处理）
编程目的:文本框1中输入id号,则从openFileDialog中选择的图片会以二进制数据存进SQL数据库的对应表的id列:文本框2中输入姓名,从数据库读取对应name的照片并显示在pictureBo ...
- Chessboard（规律）&&阿里巴巴和n个大盗(规律)
Chessboard Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...