• 使用geoserver+openLayers加载google地图


    1、 准备工作

      安装java环境即JDK 

      下载geoserver  官网:http://geoserver.org/display/GEOS/Welcome

      我的描述使用的是geoserver1.7版本,2.0版本类似,只是1.7是中文的,2.0版本可以再使用过1.7版本后自己摸索,大同小异。 

      下载openLayers 官网:http://www.openlayers.org/

      配置好JAVA_HOME

      下载地图(shp格式) 可到此网站:http://nfgis.nsdi.gov.cn/asp/userinfo.asp?action=queding

      填写信息后即可下载  

    2、 启动geoserver(安装目录binstart.bat)

        打开浏览器,访问:http://localhost/:8080/geoserver/   

    3、 登录geoserver
      点“配置”,在登录界面输入用户名 ‘admin’,密码’geoserver

    4、 配置数据
      登录成功之后,再点“配置”。在配置界面,点“数据”。

      在数据配置界面,点“数据库”。

    5、 新建数据集
      在Feature数据集配置界面,点“新建”

      在新建界面,Feature 数据描述类型,选择Shaperfile,Feature数据集ID,输入“szmap_bingguanjiudian”,点“新建”(此时,由于地图信息还没部署,因此,先将shape格式的数据文件复制到C:geoserverdata_dirdataszmapnew。)

      在数据文件配置界面中,url填写为:file:data/szmapnew/bingguanjiudian_custom_point.shp
      (表示对应C:geoserverdata_dirdataszmapnewingguanjiudian_custom_point.shp)
      Charset填写为:GBK,点“提交”。

    6、 新建Feature Type
      文件加载成功,进入Feature Type编辑界面,样式选择 point,SRS填写为4326,点生成.

      再点“提交”。(千万不要勾上启用缓存,我就是勾上它,结果导致创建的FeaTure Type无法保存,走了弯路)

    7、 应用保存配置
      然后先点左上角的“应用”,

      再点“保存”。

    8、 使用openLayers编写测试页面

      

    复制代码
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        
    <head>
            
    <title>OpenLayers map preview</title>
            
    <style type="text/css">
            #map {
                 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''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''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''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",
                { 
    '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''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(
    falsefalse);
                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=" 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>
    复制代码

    9、 部署示例
      将该页面保存到C:geoserverwebappsgeoserver5.htm
    10、查看效果
      访问 http://localhost/:8080/geoserver/5.htm 拖动图层,并可点击数据

    11、加上googlemap图层
      申请Google 地图 API 的key
      http://www.google.com/intl/zh-CN/apis/maps/signup.html
      申请的url填写为: http://www.618119.com/:8080/

    12、 将域名映射到本地

      编辑hosts文件(C:WINDOWSsystem32driversetc目录下) 将localhost改为:www.618119.com,也就是将www.618119.com映射为127.0.0.1.否则在本地加载不了google map.

    13、 编辑html

      添加加载google map的javascript代码

      

    <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> 

      在init方法里加上

      

    复制代码
    //加载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]);
    复制代码

    14、查看效果
      访问 http://localhost/:8080/geoserver/5.htm

    15、选择地图右边的上+号,选择Base Layer下的Google Streets

    来源:http://www.cnblogs.com/ycsfwhh/archive/2009/12/16/1625373.html

  • 相关阅读:
    解压 Android 系统中的 system.img
    挂载system.img并提取文件
    [android]system.img文件的打包和解包
    linux修改权限
    不懂这个别说是刷机高手!安卓Recovery你知多少
    Android刷机
    eclipse的“sun.misc.BASE64Encoder”问题解决
    spring的multipartResolver和java后端获取的MultipartHttpServletRequest方法对比 (附:遇到的坑)
    《高性能mysql》笔记(第一章,mysql的架构与历史)
    hystrix流程图收藏
  • 原文地址:https://www.cnblogs.com/xuanfengling/p/3409795.html
Copyright © 2020-2023  润新知