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的更多相关文章

  1. 《深入理解Nginx》阅读与实践(三):使用upstream和subrequest访问第三方服务

    本文是对陶辉<深入理解Nginx>第5章内容的梳理以及实现,代码和注释基本出自此书. 一.upstream:以向nginx服务器的请求转化为向google服务器的搜索请求为例 (一)模块框 ...

  2. 客户端使用自定义代理类访问WCF服务 z

    通常在客户端访问WCF服务时,都需要添加服务引用,然后在客户端app.config或 web.config文件中产生WCF服务的客户端配置信息.若是每添加一个服务都是这样做,这样势必会将比较麻烦,能否 ...

  3. 使用upstream和subrequest访问第三方服务

    本文是对陶辉<深入理解Nginx>第5章内容的梳理以及实现,代码和注释基本出自此书. 一.upstream:以向nginx服务器的请求转化为向google服务器的搜索请求为例 (一)模块框 ...

  4. Android开发9:网络访问&amp;Web服务开发

    前言 啦啦啦各位小伙伴们好~ 一起进入我们今天的主题.今天我们将和大家学习网络访问和Web服务开发的相关知识,一起学习熟练使用 HttpURLConnection 访问 WebService,熟悉使用 ...

  5. Spring提供的用于访问Rest服务的客户端:RestTemplate实践

    什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效 ...

  6. 如何使用RestTemplate访问restful服务

    一. 什么是RestTemplate 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClient.不过此种方法使用起来太过繁琐.spring提供了一种简单便捷的模板类 ...

  7. Quartz动态添加定时任务执行sql(服务启动添加+手动添加)

    系统用来每天插入视图数据... 一.数据库表设计 1.接口配置表(t_m_db_interface_config) 2.接口日志表(t_m_db_interface_log) 3.前端配置页面 查询页 ...

  8. 如何使用好android的可访问性服务(Accessibility Services)

    原文:http://android.eoe.cn/topic/android_sdk * 主题* Manifest声明和权限 可访问性服务声明 可访问性服务配置 AccessibilityServic ...

  9. Reporting Service编程----访问Web服务

    将报表服务器 Web 服务的引用添加到项目中后,下一步是创建 Web 服务代理类的实例. 然后,您可以通过调用代理类中的方法来访问 Web 服务的方法. 当你的应用程序调用这些方法时,代理类生成的代码 ...

随机推荐

  1. Bubble Cup 8 finals H. Bots (575H)

    题意: 简单来说就是生成一棵树,要求根到每个叶子节点上的路径颜色排列不同, 且每条根到叶子的路径恰有n条蓝边和n条红边. 求生成的树的节点个数. 1<=n<=10^6 题解: 简单计数. ...

  2. iOS企业分发证书制作

    自签名证书制作流程 打开终端,输入 openssl genrsa - ,生成名称为ca的秘钥 注:openssl生成的文件皆放在用户文档下(finder菜单栏'前往' - 电脑 -Macintosh ...

  3. 一、CoreAnimation之图层树详解

    CoreAnimation :在字面意思为“核心动画”,但是如果您认为它仅仅是一个动画框架,那可能就要错过一些经典功能了.动画,只是CoreAnimation功能的一小部分,毕竟人家的源头是一个叫做L ...

  4. C#基础2

    namespace 基础 //定义一个命名空间,为基础 { class Program //定义一个名称为Program的类 { static void Main(string[] args) //这 ...

  5. oracle xmltype导入并解析Excel数据 (三)解析Excel数据

    包声明 create or replace package PKG_EXCEL_UTILS is -- Author: zkongbai-- Create at: 2016-07-06-- Actio ...

  6. Sortable Observable Collection in C#

    Sorting outside the collection protected override void OnNavigatedTo(NavigationEventArgs e) { if (Se ...

  7. 运行nodejs的blog程序遇见问题

    我是运行这个教程的代码.可以在网上找到相关视频和代码. 第一个问题,数据库中没有创建对应的表就开始运行程序.node app.js 这个错误问题大家可以去重现一下 第二个问题,我也没有看明白,但是我根 ...

  8. 最最实用的30个Linux命令!

    本文中将介绍一些实用又常用的Linux或Unix命令,这些是Linux系统管理员们平常使用的命令.本文不是什么完整列表,而是简要地列出了需要时派得上用场的命令,下面开始逐一介绍如何使用这些命令并附有示 ...

  9. PowerDesigner实用方法小结(1)

    PowerDesigner使用方法小结 PowerDesigner多用来进行数据库模型设计,具有SQL语句自动生成等功能.当然,也有不少缺点,比如团队分享. 一.设置PowerDesigner模型视图 ...

  10. Android Activity 的四种启动模式 lunchMode 和 Intent.setFlags();singleTask的两种启动方式。

    原文:Android Activity 的四种启动模式 lunchMode 和 Intent.setFlags();singleTask的两种启动方式. Android Activity 的四种启动模 ...