利用GeoServer发布图层并用OpenLayers展示

最新推荐文章于 2024-07-19 17:16:05 发布

紫色凌乱

最新推荐文章于 2024-07-19 17:16:05 发布

阅读量3.3k

点赞数 4

分类专栏： geotools GeoServer 文章标签： GerS OpenL GIS

本文链接：https://blog.csdn.net/Edgar_LQS/article/details/103017084

版权

geotools 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

GeoServer

3 篇文章 1 订阅

订阅专栏

时间：2019年11月11日 21:38:55

利用GeoServer发布图层并用OpenLayers展示

文章分为两部分，第一部分为采用GeoServer发布图层，第二部分为采用OpenLayers展示

GeoServer发布图层

第一步、首先在本机电脑安装好GeoServer，然后登陆到界面如下图所示，找到工作区，然后添加新的工作区
图1-1
第二步、新建工作区并提交，如下图所示
图1-2
第三步、找到数据存储，然后选择shp文件作为数据源发布，如下图所示
图1-3
第四不、新建矢量数据源，依次填入以下信息并保存
在这里插入图片描述

第五步、保存后，新建图层，点击发布，发布之后进入编辑图层，如下图所示（主要选择4326中的WGS84坐标系，然后依次计边界坐标）
在这里插入图片描述
第六步、保存之后，打开左边的Layer Preview如下，点击OpenLayers KML即可查看发布的图层，如下图所示

到此已经将shp发布到GerServer上，并展示

OpenLayers展示地图

在OpenLayers中展示主要是采用Js编写，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./ol.css" type="text/css">
  <script src="./ol.js"></script>
  <script
    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
    </script>
  <style>
    .map {
      height: 980px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  <script type="text/javascript">
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/TestGerServer/wms', //  这个地址是在geoserver里面进行图层预览的地址是一致
            params: {
              'LAYERS': 'TestGerServer:BL', // 这里的名字需要与空间定义的一样
              'TILED': true
            },
            serverType: 'geoserver',
            transition: 0
          })
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([116,40]),   //   中心坐标  
        zoom: 8
      })
    });
  </script>
</body>
</html>

上述代码主要解释如下
1、url地址：为上述GerServer中第六步发布图层时的地址，其和代码一致的部分即可
2、LAYERS：为上述GerServer中第六步发布图层时Layer Preview中的Name属性值

在本地编辑好Js，后保存为html文件，打开如下图所示
图1-7
至此，采用OpenLayers打开GerServer发布的图层结束

这是本人在工作中的一点小总结，希望能给大家带来一点帮助，谢谢观看！！！

紫色凌乱

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
利用GeoServer发布图层并用OpenLayers展示

目录利用GeoServer发布图层并用OpenLayers展示GeoServer发布图层OpenLayers展示地图利用GeoServer发布图层并用OpenLayers展示文章分为两部分，第一部分为采用GeoServer发布图层，第二部分为采用OpenLayers展示GeoServer发布图层第一步、首先在本机电脑安装好GeoServer，然后登陆到界面如下图所示，找到工作区，然后添加新...
复制链接

扫一扫

专栏目录