PostGis+GeoServer+OpenLayer发布地图服务

PostGis+GeoServer+OpenLayer发布地图服务

1. 数据准备

• 下载数据
  • 链接：https://pan.baidu.com/s/1sLb_mjRe3VJWilK2NnAXSQ 提取码：luzg

2. 导入postgis

• 创建用户、建库比较简单就不赘述
  
  • 值得注意的是这里务必要加一句sql，否则下面shapfile文件是无法加载进去的

  CREATE EXTENSION postgis;
  

  • 若还不行，则再加多几个扩展，具体可参考官方文档
• 打开postgis的“postgis shapefile and dbf loader exporter”的程序
  • 在连接好数据库之后
    
    
  • 此时需要更改以下Option的内容（如下图所示）
    
  • 搞定之后就只需要把下载下来的数据加载进去
  • PS：将文件的的SRID（空间参考信息）值更改为26918。请注意，架构、表名和列名已经根据shapefile文件里的信息填充
    
  • 配置信息如下图所示
    
  • 加载所有文件后，单击pgAdmin中的"Refresh"按钮更新树状视图。应该可以看到表显示在树结构：数据库>nyc>架构>public>数据表里。
    
• SRID补充
  • “SRID"表示“Spatial Reference IDentifier（空间参考标识符)"。它定义了我们数据的地理坐标系统和投影的所有参数。
  • SRID很方便，因为它将有关地图投影的所有信息（可能非常复杂）打包（更具体的说应该是映射）到一个数字中。
    • 可参考这里的投影定义
  • 世界上并不是每个地图投影都有对应的SRID编号，但大多数常见的投影都有对应的且保存在prj2epsg数据库中的SRID编号。

3.使用GeoServer发布Shapfile数据

• 选择”开始>所有程序>GeoServer2.14.3>Start GeoServer“，启动GeoServer。
• 登录Geoserver创建工作区
  
• 创建新的数据源
  
  • 在"工作区"选择nyc，在"数据源名称"输入: nyc_buildings
    
  • 保存
• 创建图层
  
  • 编辑图层
    
  • 点击"从数据中计算"和"Compute from native bounds"来生成图层的bounding box：（这里的经纬度边框要记下来，后面要用到）
    
  • 在Layer Preview中找到nyc:nyc_buildings，然后点击旁边的"OpenLayers"
    
    • 预览到刚才发布的图层
      
      • 此时需要记录下发布的url地址，后面结合openlayer渲染到页面上
        

4.OpenLayers环境搭建与配合GeoServer显示地图

• 由上述可得该页面的url地址，需要得到的是
• 地址和图层名
  • http://localhost:8008/geoserver/nyc/wms
  • layers=nyc:nyc_buildings
• 发布渲染（效果如下）
  
  • (代码如下)

 <div id="map"></div>

    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                //经纬度，这里最主要是参考发布时候计算出来的经纬度，因此一定要把计算出来的经纬度查出来
                center: ol.proj.fromLonLat([-73.98,40.749]),
                zoom: 14
            })
        });

        var baseSource = new ol.source.TileWMS({
            url: 'http://localhost:8008/geoserver/nyc/wms',
            params: {
                //这里的nyc是uft-8转换之前的数据
                'LAYERS': 'nyc:nyc_buildings',
                'TILED': true
            },
            serverType: 'geoserver'
        });

        var baseLayer = new ol.layer.Tile({
            source: baseSource
        });

        map.addLayer(baseLayer);
    </script>

本文参考不睡觉的怪叔叔；在他的教程下，汇总知识，成功完成地图服务的发布