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,布布扣,bubuko.com

时间: 2024-10-14 19:02:26

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

中科燕园GIS外包讲解1 -----OpenLayers调用WMS服务

OpenLayers调用WMS服务 OpenLayers: OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能.OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了非常多的选择. WMS服务:     1 OGC组织及其开放性规范 为了实现异构的地理空间信息及GIS处理功能的互操作的集成,OGC(Open GIS

远程主机访问sshd服务

##########功能:让远程主机可以通过网络访问sshd服务,开始一个安全shell ##########ssh 远程主机用户@远程主机ip[[email protected] ~]# ssh [email protected]The authenticity of host '172.25.0.11 (172.25.0.11)' can't be establishedA key fingerprint is eb:24:0e:07:96:26:b1:04:c2:37:0c:78:2d:b

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

什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率.调用RestTemplate的默认构造函数,RestTemplate对象在底层通过使用java.net包下的实现创建HTTP 请求,可以通过使用ClientHttpRequestFactory指定不同的HTTP请求方式.ClientHttpRequestFactory接口主要提供了两种实现方式

创建ACL语句使真机访问虚拟服务器的web服务并禁止访问FTP服务详解

创建ACL语句使真机访问虚拟服务器的web服务并禁止访问FTP服务 首先创建拓扑,然后规划好IP地址并连接拓扑线 配置理念是先配置简单的最后配置复杂的. 首先需要保证网络拓扑的互联互通:具体配置如下 R1上面的配置 SW3上面的配置 SW2上面的配置 SW1上面的配置 设置宿主机上的IP地址 打开虚拟机server 2008配置IP地址 给server 2008服务器 添加web服务和FTP服务 点击添加角色之后,再点击下一步,进入这个页面 再点击两次下一步,就会进入这个页面 后面根据提示点击下

memcached演练(2) 访问memcached服务

通过上节<memcached演练(1) 搭建memcached服务>,已经成功在linux虚拟机上安装了memcached服务,并设置了自启动. STAT version 1.4.29 Mem:          1891 主要内容 使用telnet命令行工具,操作memcached服务 使用java spymemcached工具访问memcached服务 监控插入不同数据量的数据,响应时间 监控memcached主机繁忙&清闲对比情况 调整memcached的内存指标,插入相同的数据

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

通常在客户端访问WCF服务时,都需要添加服务引用,然后在客户端app.config或 web.config文件中产生WCF服务的客户端配置信息.若是每添加一个服务都是这样做,这样势必会将比较麻烦,能否简单在app.config或 web.config文件增加WCF服务地址,然后直接通过此地址访问WCF服务呢?可以,那就是通过自定义客户端代理类来实现.本文是通过继承 ClientBase<T>类实现的自定义客户端代理类,来实现同过简单在app.config或web.config文件增加wcf服务

OpenLayers访问Geoserver发布的地图

上一篇文章基于Geoserver发布了一个18个图层的地图,本文介绍如何利用OpenLayers访问Geoserver发布的地图. 要访问Geoserver发布的地图,主要困难点是地图URL地址的确定,方法是打开Geoserver,在LayerPreview中找到要访问的地图,单击该地图后面的OpenLayers,如下图所示 这时客户端会调用OpenLayers访问该地图,如下图所示 这里我们主要注意的是浏览器中的地址: http://192.168.1.50:8080/geoserver/ka

如何使用RestTemplate访问restful服务

https://www.jianshu.com/p/c9644755dd5e 一. 什么是RestTemplate 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClient.不过此种方法使用起来太过繁琐.spring提供了一种简单便捷的模板类来进行操作,这就是RestTemplate. 二.一个简单的例子. 定义一个简单的restful接口 @RestController public class TestController { @RequestMappin

局域网如何使用公网地址访问内部服务

局域网如何使用公网地址访问内部服务,布布扣,bubuko.com