心血来潮,花1小时安装软件写代码+复习api,顺便熟悉一波wms

再次强化认知了wms获取要素的能力没有wfs强,有待考究

原文链接(转载请声明@秋意正寒  博客园/知乎/B站/csdn/小专栏):https://www.cnblogs.com/onsummer/p/12178830.html

心血来潮,本机除了postgresql/postgis安装好了并发布了几个4326坐标的广东数据,安装了node环境之外,其他什么都没准备。

突然就想用ol6+node环境+parcel打包,通过geoserver发布postgis数据并实现前端返回单击点位的行政区信息。

分析一下需求:

  • 需要安装geoserver→分解步骤,需要安装tomcat,需要启用跨域,需要安装geoserver的war包
  • 需要熟悉ol6一些api
  • 需要熟悉geoserver+wms服务的发布及相关概念

1. 安装tomcat

下载tomcat9_windows_64bit.gz,解压完事。配置新端口为8095,干掉webapps下不需要的app。

使用windows服务的方式启动tomcat。

2. 安装geoserver

下载2.16.x最新版war包,丢到webapps下,自动解压(请勿解压后删除war包!!!)

如果没启动起来,请稍等一会儿,或者手动重启tomcat服务。手动重启会在“stopping”那卡一会儿,等着就行了。

3. 启用跨域

在geoserver.war解压的app目录下,找到WEB-INF文件夹,找到web.xml,找到CORS的filter和filter-map标签,解注释它们:

这两段配置如果是2.15以上的geoserver,在web.xml文档里默认是注释的。

在WEB-INF目录下的lib目录下,添加两个war包:

这两个war包应该要与tomcat版本对应,具体我也不知道,我这两个和tomcat9是适配的。

此时重启一次tomcat服务即可(保险起见)。

4. openlayers 6 有关api

map和view对象必须熟悉。

本例中,wms服务用到的图层是ol/layer/Tile,用到的数据源是ol/layer/Image。

5. node环境+es6语法+parcel打包

项目目录和包信息。

html代码(文件:index.html):

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>001 WMS</title>
<link rel="stylesheet" href="./node_modules/ol/ol.css">
<style>
html, body, #mainframe {
height: 100%;
}
#mapframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mainframe">
<div id="topframe"> <!-- 这个div暂时无用 -->
</div>
<div id="mapframe"> </div>
</div>
<script src="./index.js"></script>
</body>
</html>

js代码(文件:index.js):

 import 'normalize.css'
import {Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import WMSSource from 'ol/source/ImageWMS'
import WMSLayer from 'ol/layer/Image'
import OSM from 'ol/source/OSM' var gzWms = new WMSSource({
url: "http://localhost:8095/geoserver/c_GuangdongBase/wms", // 是工作区的URL+/wms
params: {
layers: "c_GuangdongBase:province_gd" // layers参数是"工作区:图层名1, 工作区:图层名2, ...",而不是"数据源:图层名, ..."
},
serverType: "geoserver",
crossOrigin: "anonymous"
}) var gzWmsLayer = new WMSLayer({
source: gzWms,
opacity: 0.5 // 设置透明度必须是0~1之间,我写50没有半透明效果
}) var gzView = new View({
center: [113.23, 23.10],
projection: "EPSG:4326", // Projection类的另一种写法:“ProjectionLike”字符串,EPSG必须大写,冒号后必须没有空格
zoom: 10
}) var olmap = new Map({
target: 'mapframe',
layers: [
new TileLayer({
source: new OSM()
}),
gzWmsLayer
],
view: gzView
}) olmap.on('click', function (evt) {
console.log(evt.coordinate);
let infoUrl = gzWms.getFeatureInfoUrl(evt.coordinate, gzView.getResolution(), "EPSG:4326", {
INFO_FORMAT: 'text/html',
QUERY_LAYERS: 'c_GuangdongBase:province_gd'
})
if (infoUrl) {
fetch(infoUrl)
.then(res=>res.text())
.then(data=>console.log(data))
}
})

在index.html所在目录下运行npm start即可

6. 发布服务

使用admin/geoserver默认账户密码登录geoserver页面(localhost:你tomcat的端口/geoserver)

①创建工作区(workspace的概念,使用名称:c_GuangdongBase)

②在此工作区上新建数据存储(数据源)

其中,工作区必选选刚才创建那个;

数据存储名称,自己填;

连接参数。主机名、端口指的是postgresql的。

database是指postgis数据库名称,schema是该数据库下需要发布的某个数据集(直译是模式,但是我觉得叫数据集更好)

user和password是指这个数据库的登录名称和密码。

③发布数据源图层

从刚刚创建的数据源里发布图层。

发布的时候计算一下四至范围,选一下style即可。

网上发布的资料很多,不说多了。

7. 前端访问效果

因为是直接返回html的文本格式我没有处理,所以有点难看。

有需要的可以更改getFeaturesInfoUrl里的params参数里的格式参数

效果如图:

大功告成!睡觉去

OpenLayers 6 学习笔记2 WMS服务避坑记录的更多相关文章

  1. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  2. OpenLayers 6 学习笔记

    这个是真的学习笔记!不是教程 转载请声明:https://www.cnblogs.com/onsummer/p/12159366.html 基于openlayers 6.x api不太好查,就基于腾讯 ...

  3. Android(java)学习笔记227:服务(service)之服务的生命周期 与 两种启动服务的区别

    1.之前我们在Android(java)学习笔记171:Service生命周期 (2015-08-18 10:56)说明过,可以回头看看: 2.Service 的两种启动方法和区别: (1)Servi ...

  4. Netty学习笔记(二) 实现服务端和客户端

    在Netty学习笔记(一) 实现DISCARD服务中,我们使用Netty和Python实现了简单的丢弃DISCARD服务,这篇,我们使用Netty实现服务端和客户端交互的需求. 前置工作 开发环境 J ...

  5. Dubbo -- 系统学习 笔记 -- 示例 -- 静态服务

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 静态服务 有时候希望人工管理服务提供者的上线和下线,此时需将注册中心标识为非动态管 ...

  6. Android(java)学习笔记170:服务(service)之服务的生命周期 与 两种启动服务的区别

    1.之前我们在Android(java)学习笔记171:Service生命周期 (2015-08-18 10:56)说明过,可以回头看看: 2.Service 的两种启动方法和区别: (1)Servi ...

  7. laravel 学习笔记 — 神奇的服务容器

     2015-05-05 14:24 来自于分类 笔记 Laravel PHP开发 竟然有人认为我是抄 Laravel 学院的,心塞.世界观已崩塌. 容器,字面上理解就是装东西的东西.常见的变量.对象属 ...

  8. Laravel 学习笔记 —— 神奇的服务容器 [转]

    容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于你对该容器的定义.当然,有这样一种容器,它存放的不是文本.数值,而是对象.对象的描述(类.接口)或 ...

  9. laravel 学习笔记 —— 神奇的服务容器

    转载自:https://www.insp.top/learn-laravel-container 容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于 ...

随机推荐

  1. 造轮子-toast组件的实现(下)

    1.解决 toast 中传入 html 的问题,通过假的 slot 来实现 // plugins.js toast.$slots.default = [message] // toast.vue &l ...

  2. [bzoj1070] [洛谷P2053] [SCOI2007] 修车

    Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同 的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序, ...

  3. 在eclipse中导入源码

    因为初学java有一个源码项目想要导入,在网上找了很多方法试了都不行,后来发现其实是想多了,这里说一个很简洁的方法.* 1.首先点eclipse中的File然后点import, 2. 然后选Gener ...

  4. windows系统中如何找到某程序运行的本地文件

    主要通过window自带的服务功能来查询: 比如:

  5. SonarQube代码管理

    一 搭建过程不详细说 二 配合jenkins使用,jenkins搭建过程这里不详细说 三 jenkins项目配置,需要安装sonarqube-jenkins插件 sonar.projectKey=a6 ...

  6. 2019年,我花了3个月时间备考PMP

    ​ 经过几个月的准备,终于在2019年12月7日完成了PMP的考试,并于1月21日查到了成绩,喜获5A,意料之中.总结这次考试的具体情况:涉及题型虽然都没有超出大纲的范围,但是原题出现的概率似乎不高, ...

  7. react FileReader读取TXT文件并保存 split切割字符串 map()分别渲染切割后的数组内的所有字符串

    //class my_fileReader( e ) {         console.log(e.target.files[0]);         const reader = new File ...

  8. scrapy-redis分布式爬虫实战

    Scrapy-Redis代码实战 Scrapy 是一个通用的爬虫框架,但是不支持分布式,Scrapy-redis是为了更方便地实现Scrapy分布式爬取,而提供了一些以redis为基础的组件(仅有组件 ...

  9. eclipse 连接sql sever

    https://www.cnblogs.com/newen/p/4428541.html 和eclipse连接mysql相似,只是 String url="jdbc:sqlserver:// ...

  10. Excel VBA: 自动生成巡检报表并通过邮件定时发送

    目录 环境说明逻辑结构效果说明及截图①.安装SecureCRT②. 自动巡检脚本③. 数据检索并FTP传送④. 安装Excel 2013⑤. 安装Serv-U⑥. 自动生成图表并邮件发送 环境说明 系 ...