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&amp;v=2&amp;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 服务的方法. 当你的应用程序调用这些方法时,代理类生成的代码 ...

随机推荐

autofac使用笔记
在之前的项目中用来解耦的使用的轻型IOC框架是unity,它的使用也是很方便的提供在之前的文章的也提到过它的使用方式,但是使用久了之后发现了它的不足之处就是需要配置xml文件来对应的接口和实现的关系. ...
Git学习03 －－远程仓库
把本地库的内容推送到远程(github), 用git push命令,实际上是把当前分支master推送到远程. 由于远程库是空的,我们第一次推送master分支时,加上了-u参数,Git不但会把本地的 ...
GDAL与OpenCV2.X数据转换（适合多光谱和高光谱等多通道的遥感影像）
一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...
Code repo
http://www.oschina.net/news/15806/20-opensource-host-websites/
【LeetCode练习题】First Missing Positive
First Missing Positive Given an unsorted integer array, find the first missing positive integer. For ...
Linux 零碎知识点
ln -s ../libs/ libs 在当前目录下建立一个符号链接文件libs,使它指向上一层目录的libs文件夹关于su和su -的区别切换用户是可以使用su tom或者su - tom来实现, ...
网络工程 POST与GET请求方法的本质区别
POST与GET请求方法的本质区别: 第一:GET用于信息获取,它是安全的(这里安全的含义是指非修改信息),而POST是用于修改服务器上资源的请求第二:GET请求的数据会附在URL之后,而POST把 ...
Swift自定义Class实现Hashable
假如有个Bit类,其中含有CGPoint类型的point属性,Class定义如下 class Bit { var point : CGPoint init(point : CGPoint) { sel ...
吐槽下CSDN编辑器
Perface 近期喜欢上了markdown,我认为它就是一些HTML标签的快捷键,用一些符号来取代标签,易学易读易用,何乐而不为呢?近期也喜欢用印象笔记来让我的记忆永存,确实它强大的收集能力让我迷上 ...
Data Recovery Advisor (DRA)
数据恢复指导Data Recovery Advisor (DRA)的适用场景:Data Recovery Advisor 是11g 新特性,是Oracle 顾问程序架构的一部分,它会在遇到错误时自动收 ...

OpenLayers访问WTMS服务及添加Googlemap

1、访问WMS服务

2、添加Googlemap图层

OpenLayers访问WTMS服务及添加Googlemap的更多相关文章

随机推荐

热门专题