首页 > 代码库 > 中科燕园webgis外包 讲解2----使用geoserver+openLayers加载google地图

中科燕园webgis外包 讲解2----使用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(安装目录bin\start.bat)

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

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

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

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

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

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

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

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

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

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

  再点“保存”。

8、 使用openLayers编写测试页面

  

代码

9、 部署示例
  将该页面保存到C:\geoserver\webapps\geoserver\5.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:\WINDOWS\system32\drivers\etc目录下) 将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

 

到此,基本的用openLayers+geoserver访问地图的功能就实现了