首页 > 代码库 > OpenLayers访问WTMS服务及添加Googlemap
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]);
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。