在windows环境:使用开源软件一步步搭建WebGIS网站

搭建WebGis使用到的软件有：Java、Tomcat、GeoServer、PostgreSQL、PostGIS、OpenLayers3; 下面将一步步操作。

一、搭建服务器，使用软件：Java、Tomcat、GeoServer

1、安装并配置Java

    a. 下载Java1.8 ：

　　根据系统架构下载对应版本，32位选择“Windows x86”，64为选择“Windows x64”  URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 

　　我的系统是64位，所以下载的文件是 jdk-8u161-windows-x64.exe

    b. 安装java：

　　默认安装路径为  C:Program FilesJavajdk1.8.0_131，建议在windows下选择一个目录：比如 D:javajdk1.8.0_161 

　　安装路径可以根据自己选择，路径中建议不要存在汉字，或者特殊字符串，JDK 和JRE建议安装在同一个路径下。

    c.配置环境变量：

　　新建用户变量：  变量名："JAVA_HOME"，变量值："D:Javajdk1.8.0_161"

　　新增系统变量：变量名："CLASSPATH"，变量值：".;%JAVA_HOME%lib;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar"

　　修改系统变量：变量名："Path"，在变量值中增加"D:Javajdk1.8.0_161in;D:Javajre1.8.0_161;"，第一个"D:"前如果没有分号";",请补上。

　d. 检验安装java是否成功：

　　在"cmd"中运行"javac"或"java -version"，出现下图表示Java安装配置成功！

　　

 2、下载GeoServer

　　到http://geoserver.org/download/下载最新的released版本的war包

 3、安装Tomcat然后部署GeoServer

　　  从Tomcat官方网站下载最新的版本：https://tomcat.apache.org/download-90.cgi   建议直接下载zip包，下载后直接解压即可使用。

　　a. 配置管理角色及用户：

　　  编辑"conf omcat-users.xml"文件，将最后的信息改为以下文字：

　　

　　  然后，就可以在Tomcat中使用账号"admin",密码："tomcat"登录管理了。

      b. 部署Geoserver的war包：

　　  因为war文件超过了taomcat文件附件大小限制，所以需要修改配置tomcat的配置文件："webappsmanagerWEB-INFweb.xml"

　　  原来限制是50M大小，现在把前面50改为100。

　　

　　  在浏览器地址栏输入：http://localhost:8080

　　

　　  点击"Manager App"，在登录用户名中输入“admin”，密码输入"tomcat"进入管理界面。

　　

　　  在Deploy界面，"WAR file to deplay"操作，选择下载解压后的war文件：geoserver.war，点击"Deploy"完成部署。

　　

　　  部署后，Application列表界面中出现："/geoserver"，点击该链接可进入部署好的Geoserver站点(或者地址栏直接输入：http://localhost:8080/geoserver/web/ 进入)。

　　

　　  GeoServer默认登录名：admin，密码"geoserver"。

　　

4、 地理信息数据导入及发布 

　　a. 安装PostgreSQL以及PostGis扩展工具

　　    下载PostgreSQL：

　　    https://www.postgresql.org/里面的版本在windows环境下安装多次都没能成功，找了很多地方才找到正确的地址，请从这个URL下载：https://www.enterprisedb.com/products-services-training/pgbindownload

　　    安装PostgreSQL，安装完成后，提示下载扩展工具。

　　

　　

　　  建议不要勾选，下载太慢了！直接从http://postgis.net/windows_downloads/下载PostGIS工具，我这里下载的PostgreSQL是9.6版本的，那么对应的PostGis也要对应到版本

　　

　　  下载到的文件为：postgis-bundle-pg96x64-setup-2.4.3-1.exe，安装即可，注意选择："Create spatial database"。

　　

　　  安装完毕后，使用pgAdmin管理工具，进行管理。

　　b. 导入地理信息数据(shp文件)到PostgreSQL数据库：

　　  新建数据库，连接服务器，然后按下图操作：(我这有永康的行政区划数据，就用这个数据做例子吧)

　　

　　

　　  建立完成数据库后，右键该数据库，打开Query Tool

　　

　　  使用SQL语句添加空间数据库管理插件PostGIS：　　 

CREATE EXTENSION PostGIS

　　  SQL执行成功后，刷新，数据表中会出现spatial_ref_sys，说明可以导入空间数据了(如下图)

　　

　　  开始菜单中打开PostGIS工具，如下图

　　

　　  连接PostgreSQL数据库

　　

　　  点击"Add File"选择shp文件：

　　

　　  点击"Import"导入数据到数据库。

　　

　　  出现"Shapefile import completed."，导入完毕！

　　c. 使用GeoServer发布数据库中的地图：

　　  打开浏览器，登录GeoServer管理界面，点击左侧栏目中的"工作区"，在新界面中点击"添加新的工作区"

　　

　　

　　  设置工作区名称，以及命名空间(URL)，然后点击"提交"完成新建。

　　  接下来新建数据存储：

　　

　　  选择"PostGIS"

　　

　　  设置数据源名称，PostgreSQL连接信息等。此处设置数据源名称为"xzq"，连接本机数据库，连接参数如下图

　　

　　  点击"保存"，保存成功后会出现新建图层界面：

　　

　　  点击"发布"，出现"编辑图层"界面，在该界面中配置坐标系：　

　　  点击"从数据计算"获得数据的边界，点击"Compute from native bounds"获得数据的经纬度边框，其他配置可按默认的来，保存即可。

　　

　　  查看发布的图层效果，点击左侧的"Layer Preview"，搜索刚刚添加的图层

　　

 　　  找到图层后点击"openlayers"，打开预览窗口，效果如下：

　　

　　预览的地址为：http://localhost:8080/geoserver/yongkang2018/wms?service=WMS&version=1.1.0&request=GetMap&layers=yongkang2018:xzq&styles=&bbox=488895.09375,3182568.5,533833.5,3221317.75&width=768&height=662&srs=EPSG:2385&format=application/openlayers

　　注：后面加载地图时用到。

二、使用openlayers浏览地图

　　  从openlayers官网下载最新版的openlayers： https://openlayers.org/download/，选择v*-dist.zip下载。

　　

　　  使用openlayers的js以及css制作一个demo网页，脚本如下：　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head> 
        <meta charset="utf-8">
        <title>OpenLayers演示</title>  
        <!-- Import OL CSS, auto import does not work with our minified OL.js build -->  
        <link rel="stylesheet" href="./lib/openlayers/ol.css" />

        <!-- Import OpenLayers, reduced, wms read only version -->  
        <script src="./lib/openlayers/ol.js" ></script>        
    </head>  
    <body>  
        <div id="map"></div>  
        <script>
            //Geoserver图层预览地址: http://localhost:8080/geoserver/yongkang2018/wms?service=WMS&version=1.1.0&request=GetMap&layers=yongkang2018:xzq&styles=&bbox=488895.09375,3182568.5,533833.5,3221317.75&width=768&height=662&srs=EPSG:2385&format=application/openlayers
            var format = 'image/png';
            var bounds = [488895.09375,3182568.5,533833.5,3221317.75];//范围,从Geoserver预览地址中bbox参数获得

            //底图（面）
            var yongkang = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    //自己的服务url
                    url: 'http://localhost:8080/geoserver/yongkang2018/wms', //从Geoserver预览地址获得
                    //设置服务参数
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.0',
                        STYLES: '',
                        //图层信息
                        LAYERS: 'yongkang2018:xzq',
                    }
                })
            });

            //设置地图投影
            var projection = new ol.proj.Projection({
                code: 'EPSG:2385',//投影编码,设置图层时所找到的编码
                units: 'm'
            });

            //设置地图
            var map = new ol.Map({
                //地图中的比例尺等控制要素
                controls: ol.control.defaults({
                    attribution: false
                }).extend([
                    new ol.control.ScaleLine()
                ]),
                //设置显示的容器
                target: 'map',
                //设置图层
                layers: [
                    //添加图层
                    yongkang
                ],
                //设置视图
                view: new ol.View({
                    //设置投影
                    projection: projection
                })
            });

            //地图显示
            map.getView().fit(bounds, map.getSize());        
        </script>
    </body>  
</html>

　　  保存页面后，预览效果如下：

　　

　　  本地地理信息数据结合天地图在线影像地图的效果：

　　

　　参考：天靖居士 http://www.cnblogs.com/kkyyhh96/p/6379515.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mhere/p/8567805.html