openlayers加载geoserver的wms服务

最新推荐文章于 2024-05-22 11:08:28 发布
最新推荐文章于 2024-05-22 11:08:28 发布
阅读量6.7k 收藏 49
点赞数 4
分类专栏： 编程语言 文章标签： gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/long_Amber/article/details/110553202
版权

openlayers加载geoserver的wms服务

情景应用

本次使用openlayers加载geoserver的目的是在geoserver上发布公司项目的街道背景图作为底图，配合postgis发布离线地图（自定义的地图）。

geoserver使用教程
安装解压

先到官方上下载geoserver的压缩包

我使用的是–version = 2.18-SNAPSHOT

本地解压后，确认两件事

1.安装jdk环境

2.安装tomcat环境，geoserver的启动是基于tomcat服务器启动的。

windows下启动执行：D:\geoserver\bin下的startup.bat

linux下启动执行：D:\geoserver\bin下的startup.sh

启动后在页面输入：http://localhost:8080/geoserver/web/

在这里插入图片描述

初始登陆的账号密码：

username:admin

password:geoserver

发布服务
发布单图层

添加工作区间
在这里插入图片描述

在这里插入图片描述

再次进入到工作区

在这里插入图片描述

添加数据存储

更多介绍查看: https://blog.csdn.net/gis0911178/article/details/88636466

在这里插入图片描述

GIS概念中有相当多的数据文件格式，我们经常接触到的数据格式可以大致分为“栅格数据”与“矢量数据”这两类。

这两类数据分别对应着不同的应用场景，我们通常使用“栅格数据”来当作底图，示意地理构造物（如山地、河流、湖泊、建筑物、道路等）的空间形态（如形状、位置、大小等），并可以进行一些简易的空间分析；

使用“矢量数据”来参与业务逻辑的实现与分析，进行复杂的空间分析。

在这里插入图片描述

本次以矢量数据为例：发布shapefiles单个图层

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

就此发布完成。

发布多图层

发布多图层的话首先发布多个单图层，对于：创建工作区–添加数据存储–发布，这些跟前面是一样的。

然后，点击多图层

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

然后就可以在Layer Preview里预览了

在这里插入图片描述

openlayers使用教程

openlayers加载WMS格式总的来说有两种方式：ol.layer.Image+ol.source.ImageWMS和ol.layer.Tile+ol.source+TileWMS

这两种方式加载都需要设定bounds（bbox）和projection。具体的写法下面开始介绍。

如果需要在angular中使用openlayers,请查看我的angular文档。

openlayers下载

下载地址

https://github.com/openlayers/workshop/releases

在这里插入图片描述

启动

下载之后，切换到工程里…\openlayers-workshop-en内部执行

npm start;// 启动服务

添加页面

在index.html里编写代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body{
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
      #map-container{
        height: 506px;
        width: 768px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>
添加js代码块
安装模块

在工程里安装ol模块：npm install ol@beta

导入相关包
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import Projection from 'ol/proj/Projection';
import XYZSource from 'ol/source/XYZ';
import Layer from 'ol/layer/Layer';
import Tile from 'ol/layer/Tile';
加载XYZSource

在main.js里添加代码


// openlayers官方教程
new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

运行查看页面

在这里插入图片描述

加载ImageWMS之WorldImage

这里使用的是geoserver上发布存储类型为WorldImage，样式为raster

在main.js里添加代码

// 调用geoserver的服务http://localhost:8080/geoserver/nurc/wms
// openlayers官方教程-图
// WorldImage
// success
new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',
        params: {
          'layers': 'nurc:Img_Sample'
        }
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 3,
    projection: 'EPSG:4326'
  })
});

运行查看页面

在这里插入图片描述

加载ImageWMS之ArcGrid

这里使用的是geoserver上发布存储类型为ArcGrid，样式为rain

在main.js里添加代码

// 调用geoserver的服务http://localhost:8080/geoserver/nurc/wms
// openlayers官方教程-图
// ArcGrid
// success
new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',
        params: {
          'layers': 'nurc:Arc_Sample'
        }
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 3,
    projection: 'EPSG:4326'
  })
});
加载ImageWMS之GeoTIFF

这里使用的是geoserver上发布存储类型为GeoTIFF，样式为rain

在main.js里添加代码

// // 加载geotiff格式
const bounds = [589980, 4913700,
  609000, 4928010];
const projection = new Projection({
  code: 'EPSG:26713',
  units: 'm',
  axisOrientation: 'neu',
  global: false
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/sf/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'sf:sfdem'
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize());

运行查看页面

在这里插入图片描述

加载ImageWMS之shapefiles1

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

//调用geoserver的服务http://localhost:8080/geoserver/sf/wms
//openlayers官方教程-线
//Shapefile
//success
const bounds = [589434.8564686741, 4914006.337837095,
  609527.2102150217, 4928063.398014731];
const projection = new Projection({
  code: 'EPSG:26713',
  units: 'm',
  axisOrientation: 'neu',
  global: false
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/sf/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'sf:roads'
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载ImageWMS之shapefiles2

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

//tiger:tiger_roads
//调用geoserver的服务http:http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-线
//Shapefile
//success
const bounds = [-74.02722, 40.684221,
  -73.907005, 40.878178];
const projection = new Projection({
  code: 'EPSG:4326',
  units: 'm',
  axisOrientation: 'neu',
  global: false
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/tiger/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'tiger:tiger_roads'
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize());

运行查看页面

在这里插入图片描述

加载TileWMS之shapefiles1

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为poi（点）

在main.js里添加代码

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.0118315772888, 40.70754683896324,
  -74.00153046439813, 40.719885123828675];
const projection = new Projection({
  code: 'EPSG:4326',
  units: 'degrees'
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/tiger/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'tiger:poi'
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载TileWMS之shapefiles2

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.047185, 40.679648,
  -73.90782, 40.882078];
const projection = new Projection({
  code: 'EPSG:4326',
  units: 'degrees'
});
const upmap = new Tile({
  source: new TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',
    params: {
      'FORMAT': 'image/png',
      'VERSION': '1.1.1',
      tiled: true,
      STYLES: '',
      LAYERS: 'tiger:tiger_roads'
    }
  })
})
const map = new Map({
  target: 'map-container',
  layers: [
    upmap
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载叠加图层

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles)，样式由line和raster组合

在main.js里添加代码

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.047185, 40.679648,
  -73.90782, 40.882078];
const projection = new Projection({
  code: 'EPSG:4326',
  units: 'degrees'
});
const lowmap = new Tile({
  source: new TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',
    params: {
      'FORMAT': 'image/png',
      'VERSION': '1.1.1',
      tiled: true,
      STYLES: '',
      LAYERS: 'tiger:poly_landmarks'
    }
  })
})
const upmap = new Tile({
  source: new TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',
    params: {
      'FORMAT': 'image/png',
      'VERSION': '1.1.1',
      tiled: true,
      STYLES: '',
      LAYERS: 'tiger:tiger_roads'
    }
  })
})
const map = new Map({
  target: 'map-container',
  layers: [
    lowmap, upmap
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

区别ImageWMS和TileWMS

  1. 本次结果主要是展示叠加图层，先说这两个叠加后的效果：

    • 两个图层都使用TileWMS叠加后，对于shapefiles的line和raster组合，会随着放缩完美的融合在一块，并对应各自的点。（是我要的结果）。

      在这里插入图片描述

    • 两个图层都使用ImageWMS叠加图层后，对于shapefiles的line和raster组合，只能先缩小不能放大，不能查看具体街道。

在这里插入图片描述

  • 一个使用ImageWMS，一个使用TileWMS，对于shapefiles的line和raster组合，只能先缩小不能放大，不能查看具体街道。

在这里插入图片描述

  1. 上菜-大众观点

    （1）切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的 标注多次出现的问题。

    （2）图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。

总结
使用总结

  • 关于WMS有两种加载方式

    方式一、ol.layer.Image+ol.source.ImageWMS

    方式二、ol.layer.Tile+ol.source+TileWMS

    通用的模式都是：至于使用ImageWMS，还是TileWMS，对应换掉layer和source就行。

    const bounds = [最小 X,最小 Y,最大 X,最大 Y];
const projection = new Projection({
  code: 'EPSG:4326',/*  坐标系*/
  units: 'm',
  axisOrientation: 'neu',
  global: false
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',//服务发布的地址
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'nurc:Img_Sample' //服务发布的图层名称
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize());//加入边界值，计算中心点

    叠加图层的时候，可以不同类型，不同样式，也可以ImageWMS和TileWMS混合使用，但是具体能不能实现效果，得尝试了才能知道符合自己的要求不。

  • 尝试了以上类型，目前发现只有XYZSource，ArcGrid和WorldImage可以不设置边界bbox，其他的都要设置才行，否则就会提示下面的2，3两个问题。

  • 对于上面的ImageWMS写了两个，shapefile1和shapefile2，是因为这两个类型一样，样式一样，坐标系不一样导致一个图可以正常缩放，一个不行，缩放异常，因此在选择坐标系的时候，需要根据具体情况来定。

  • 项目地址：

    暂时还没弄好自己的git管理，后面补上。

错误总结

1.openlayer开发: layer.getLayerStatesArray is not a function

在这里插入图片描述

这个问题主要是由于写代码时，layer和source用的是一个引入；

在这里插入图片描述

  1. 运行后界面显示空白，查看控制台network，里面有加载数据

在这里插入图片描述

这个问题是因为参数没有设置正确，如果加载的是shapefile，需要注意配置bbox，在设置图层时

在这里插入图片描述

  1. Uncaught TypeError: Cannot read property ‘getExtent’ of null

在这里插入图片描述

出现这个情况首先看看你有没有设置边界，主要是你没有设置bbox边界引起的。

拓展

后续待补…

布偶不说话
关注
  • 4
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
OpenLayers入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-20 1333
在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。
使用GeoServer发布WMS动态地图服务，使用openlayers访问wms服务浏览地图数据
从地图看世界的专栏
11-18 3849
GEOServer是java版开源工具，使用GEOServer简单几步就可以搭建自己的地图服务，与小伙伴们共享地图数据。 一、使用GEOServer发布WMS动态地图服务 大致步骤如下： 1. 新建工作区 左边菜单栏，工作区，新建，起个名字，设置url。 2. 选择数据源 左边菜单栏，选择“数据源”，点击“添加新的数据源”，常用的有shp、postgresql数据库，根据自己的需要选择，这里选择了shp文件源。 选中存放在刚才新建的工作区下面，给数据源起个名字，选择文件本机存放位置，设置编码，包含中文属
openlayers（三）之配合geoserver发布并展示wmts图层
的博客
03-10 1595
geoserver发布wmts图层并在openlayers展示
openLayers加载wms图层并定位到该图层
最新发布
qq_61950936的博客
05-22 638
我们的wms是加载geoserver发布的服务，wms加载的图层是没法通过layer.getSource().getExtent()来获取到extents（边界）的；实现思路是通过postgis的函数(st_extent(geom))来获取extents;返回前端后格式化一下成数组的extens就可以实现定位了。
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务
weixin_41607453的博客
04-08 2567
修改vue项目的端口可以通过项目根目录下package.json文件修改serve：“serve”: “vue-cli-service serve --port 8002”启动vue项目：进入项目的目录下，执行npm run serve 启动。/vue.ps1，因为在此系统上禁止运行脚本，有关详细信息，…在配置好以上环境后，下面就可以正式实现加载wms地图服务的功能。安装完成后，控制台输入node -v，显示版本号即安装成功。安装完成之后控制台输入vue -V，显示版本号则安装成功。
Openlayers实战：加载geoserver发布的WMS数据
大剑师兰特的GIS世界
07-20 524
WMS（Web Map Service）是用于在 Web 上显示 GIS 数据的最广泛使用和最简单的形式它提供了多种优势，包括能够提供 GIS 数据的地理空间视图。WMS 通过 nternet 提供具有基本查询选项的可视化数据。WMS 提供基本的缩放、平移和帮助组织以快速染速度将 GIS数据作为图像提供。它是一个动态数据、定制地图（需结合SLD标准）的理想解决方案，根据请求范围在服务端动态生成数据渲染的图片返回客户端。
openlayers 加载Geoserver wfs服务
01-06
利用openlayers加载geoserver wfs服务发布的矢量图层。
3-Openlayers加载GeoServer发布的WMS服务
lovewhoilove
10-08 1116
首先根据1-借助Node搭建OpenLayers开发环境来搭建一个项目。 1 加载图层组 新建一个index.html，代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>Using OpenLayers with Parcel</title> <style> @import "no
openlayers加载WMS服务
05-31
提供openlayers加载WMS服务的完整示例
openlayer加载geoserver发布的wms服务
A_ta_and_run的博客
05-10 1103
CQL_FILTER= 过滤语句（sql）将上面的源添加到图层里，如果项目里图层过多的话可以设置zindex，params: {‘LAYERS’: ‘服务图层名字’,url后面可以跟sql_filter进行条件过滤。1.引入瓦片图层和瓦片wms服务源。3. 将图层添加到map。
openlayers加载arcgis发布的OGC WMS服务
01-09
openlayers加载arcgis发布的OGC WMS服务。。。。。。。。。
openlayers 调用 arcgis server wms服务简单图解
11-24
openlayers 调用 arcgis server wms服务简单图解 java net
openLayers添加geoserver服务wms图层（vue项目）
c6812的博客
04-14 812
8080的端口被占用 netstat -aon|findstr “8080” 找到pid 打开管理器-服务-找到对应pid结束任务。在使用wms图层的时候碰到了跨域的问题，可能大家也会碰到，给大家提供一下解决思路。我当时找了好半天，这里也给把链接给出来，直接按照他的方法弄就可以了。我是直接使用了火狐的浏览器，安装了插件，可以参考下面这篇。贴代码 如果TileWMS出不来可以试试ImageWMS。可以直接使用高德，百度或者天地图，这里有大佬进行了汇总。
OpenLayers加载GeoServer发布的WMS图层
孙霸天的专栏
03-25 1044
矢量服务 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" type="text/css"> <script src="https://cdn.bootcdn.net/a
Openlayers 7.3.0版本，加载Geoserver的WMS服务
2301_78464687的博客
06-01 509
Openlayers 7.3.0版本，加载Geoserver的WMS服务
Openlayers加载Geoserver WFS
weixin_30344131的博客
07-24 272
1、环境说明： 操作系统：Window 7 64位 GeoServer：GeoServer 2.1.2，端口8090 Openlayers：OpenLayers-2.12 Tomcat：apache-tomcat-7.0.22，端口8080 2、数据准备及发布 本文用到的数据为一面状数据，本地shapefile文件（Continents.shp），预览图如下： 2.1、...
【WebGIS初学到入职】（六）用OpenLayers加载GeoServer发布的WMS服务
ReBeX
10-08 922
一、前言 我在学习过程中，是租了一台服务器在上面搭建配置相关的服务，然后通过QGIS向PostgreSQL数据库添加数据，然后有向GeoServer中添加图层，之后用OpenLayers加载GeoServer根据WMS规范发布的图层。 大家可以自己在本地搭建GeoServer，然后直接向里面添加图层数据，也可以自己租一台服务器来弄。 可选准备： 【配置PostGIS】Ubuntu20.04+PostgreSQL+pgAdmin4+PostGIS 【配置Geoserver】Ubuntu 20.04+J
221：vue+openlayers 加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息
大剑师兰特的GIS世界
03-14 730
第221个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的WMS数据，其核心目标是在地图上显示瓦片，点击瓦片层，可以获取到瓦片上的信息。https://xiaozhuanlan.com/topic/8026571943 这是另外的一种方法。
openlayers加载geoserver图层
04-04
OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图应用程序。它支持加载各种地图图层，包括Geoserver图层。下面是使用OpenLayers加载Geoserver图层的一般步骤： 1. 引入OpenLayers库文件。你可以从OpenLayers官方网站下载最新版本的库文件，并将其引入到你的HTML文件中。 ```html <script src="path/to/openlayers.js"></script> ``` 2. 创建地图容器。在HTML文件中创建一个具有唯一ID的`<div>`元素，用于容纳地图。 ```html <div id="map"></div> ``` 3. 初始化地图对象。在JavaScript代码中，使用OpenLayers的`Map`类来创建一个地图对象，并指定地图容器的ID。 ```javascript var map = new ol.Map({ target: 'map' }); ``` 4. 创建Geoserver图层。使用OpenLayers的`TileLayer`类来创建一个Geoserver图层，并指定Geoserver的图层URL。 ```javascript var geoserverLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://your-geoserver-url.com/geoserver/wms', params: { 'LAYERS': 'your-layer-name' } }) }); ``` 5. 将Geoserver图层添加到地图中。使用`addLayer`方法将Geoserver图层添加到地图对象中。 ```javascript map.addLayer(geoserverLayer); ``` 6. 设置地图视图。使用`View`类来设置地图的中心点和缩放级别。 ```javascript var view = new ol.View({ center: ol.proj.fromLonLat([longitude, latitude]), zoom: 10 }); map.setView(view); ``` 以上是使用OpenLayers加载Geoserver图层的基本步骤。你可以根据自己的需求进行进一步的定制和配置。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值