中科燕園GIS外包 講解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訪問地圖的功能就實現了