基于VectorGrid加载GeoServer发布的矢量瓦片实例

目录

前言

一、关于VectorGrid

1、开源地址

2、本地示例

二、与LeafLet集成

1、新建html页面

2、地图初始化

3、pbf瓦片地址配置

4、pbf初始化

 三、GeoServer跨域问题

1、web.xml配置

2、重启tomcat

总结


前言

        回望10月,发生了一些变动,面向未来的选择,因此这个月几乎没有怎么输出。随着一些未知逐渐尘埃落定,依然选择在这里输出一些知识。

        闲言少叙,在之前的博文中GeoServer扩展功能之发布矢量瓦片,简单介绍了如何在Geoserver中进行矢量瓦片的发布以及预览。在当时的场景下,在Geoserver默认的数据浏览框架下,进行了矢量瓦片的瓦片浏览。那么如果您需要在其他场景,比如Leaflet中进行矢量瓦片的展示,又该如何做呢?本文即解决这个问题,重点讲解在LeafLet中使用VectorGrid如何加载 Geoserver发布的矢量瓦片,以及在GeoServer中进行跨域访问设置的 基本操作,让您在实践时遇到同样问题有地方参考。

一、关于VectorGrid

        了解Leaflet的朋友应该清楚,在LeafLet中,它的插件是丰富应用开发的良好方式。使用者可以按照自己的需求进行定制加载,扩展能力比较强。这里简单介绍VectorGrid插件,以及其它可以选择的矢量瓦片展示插件。

·在Leaflet的官方网站上可以看到以下的介绍瓦片的介绍,其中有一个是关于Vector Tiles的介绍。

1、开源地址

        Vector grid可以基于Leaflet进行GeoJson、TopoJson、pbf瓦片等矢量瓦片的加载展示。开源地址:Vector Grid 官网地址。将Vector Grid下载到本地后可以看到如下目录(受文章篇幅限制,不在此赘述):

2、本地示例

        在下载的docs目录下,有其自带的演示示例,是用于加载geojson的例子。geojson官网地址。可以直接在浏览器中进行浏览查看。打开效果如下:

二、与LeafLet集成

1、新建html页面

 在文件夹中创建index_vectorgrid.html网页,示例代码如下:

<!DOCTYPE html>
<html>
<head><title>VectorGrid矢量瓦片加载演示</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script><style>#map {margin: 0;padding: 0;position: absolute;width: 99%;height: 98%;}</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

        需要注意的是,这里引用的VectorGridjs是在线js,您也可以使用下载下来的js。作用是一样的。需要注意的是,这里我采用的leaflet.js是之前下载好的,如果本地没有可以选择引用在线的。在上述的代码中,定义了一个展现地图的Map容器。

2、地图初始化

        还是老套路,采用如下的方法进行底图初始化。关键代码如下所示:

var mymap = L.map('map').setView([29.052934, 104.0625], 3);var tileLayer = L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png', {maxZoom: 7,minZoom:0
});tileLayer.addTo(mymap);

3、pbf瓦片地址配置

        在查看pbf瓦片之前,需要在GeoServer中找到其地址的参考。操作步骤如下,打开GeoServer管理页面如下如所示:

        用鼠标点击图中红色框中的超链接,TMS 1.0.0 进入如下的界面。

 由于本文使用的是pbf的瓦片格式,因此找到以pbf后缀结束的瓦片(这个地址要记住,在后面会用到)。

http://localhost:8083/geoserver/gwc/service/tms/1.0.0/gisdev%3A2019_province_4326@EPSG%3A4326@pbf

4、pbf初始化

经过pbf瓦片配置后,就可以采用框架进行集成配置。关键代码如下:

const pbfUrl = "http://localhost:8083/geoserver/gwc/service/tms/1.0.0/gisdev%3A2019_province_4326@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";var vectorTileOptions = {layerURL: pbfUrl,rendererFactory: L.canvas.tile,           tms: true, 
};      
var vectorTile = new L.vectorGrid.protobuf(pbfUrl, vectorTileOptions).addTo(mymap)

到此,在Leaflet中将VectorGrid进行集成展示的例子就完成了。下面来看效果。

 三、GeoServer跨域问题

        在使用框架配置的同时,在Leaflet中可能会遇到瓦片加载不成功的问题。比如您的Geoserver是采用war与Tomcat进行部署的模式,极有可能会遇到瓦片跨域请求的问题导致您无法看到以上的效果。下面来讲解一下如何解决跨域。

1、web.xml配置

        首先找到部署Geoserver的tomcat容器,这里仅讲解已war包部署的geoserver,其它的方式暂时没有尝试,后面如果有时间可以专门讲解一下。找到Geoserver部署工程的Web.xml文件。

打开web.xml文件,以tomcat8.5为例,大概是在194行左右,有以下的代码,被注释了,需要将注释打开。

<!-- 允许跨域访问><!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the second config block further down.--><filter><filter-name>cross-origin</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.allowed.methods</param-name><param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value></init-param><init-param><param-name>cors.allowed.headers</param-name><param-value>*</param-value></init-param></filter>

同时还有以下的过滤器配置:

<!-- 允许跨域访问 --><!-- Uncomment following filter to enable CORS  --><filter-mapping><filter-name>cross-origin</filter-name><url-pattern>/*</url-pattern></filter-mapping>

2、重启tomcat

        将web.xml配置后,保存配置文件后,需要重启整个tomcat,如果没有大的问题后,大概率是没有问题的。可以看到正常的功能展示。

总结

以上就是本文的主要内容,本文重点讲解在LeafLet中使用VectorGrid如何加载 Geoserver发布的矢量瓦片,以及在GeoServer中进行跨域访问设置的 基本操作,让您在实践时遇到同样问题有地方参考。行文仓促,如有不当,欢迎各位朋友在评论区中批评指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode--196. 删除重复的电子邮箱

文章目录 1 题目描述2 解题思路2.1 代码实现 1 题目描述 表: Person ---------------------- | Column Name | Type | ---------------------- | id | int | | email | varchar | ----------------------id 是该表的主键列(具有唯一值的列)。 该表的每…

OpenCV官方教程中文版 —— Hough 直线变换

OpenCV官方教程中文版 —— Hough 直线变换 前言一、原理二、OpenCV 中的霍夫变换三、Probabilistic Hough Transform 前言 目标 • 理解霍夫变换的概念 • 学习如何在一张图片中检测直线 • 学习函数&#xff1a;cv2.HoughLines()&#xff0c;cv2.HoughLinesP() 一、原理…

贪心算法总结(未完结)

贪心的定义&#xff08;摘自百度百科&#xff09; 贪心算法&#xff08;greedy algorithm&#xff0c;又称贪婪算法&#xff09;是指&#xff0c;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择。也就是说&#xff0c;不从整体最优上加以考虑&#xff0c;算法得到的…

Hive常用DDL操作

本专栏案例数据集链接: https://download.csdn.net/download/shangjg03/88478038 1. Database 1.1 查看数据库列表 show databases; 1.2 使用数据库 USE database_name;

设计模式(2)-创建型模式

1&#xff0c;创建型模式 4.1 单例设计模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类&#xff0c;该类负责创建自己…

有所期待的日子,就是幸福的。

打开了手机屏幕&#xff0c;开始码字&#xff0c;手指敲打出文字的霎那&#xff0c;像是高中时期最后一节晚自习时抬起的笔&#xff0c;在厚厚的日记本上&#xff0c;写下一段时间的感受。文字是有力量的&#xff0c;我从来都相信。 大三那年&#xff0c;我总是会习惯而又阶段…

初次学习dubbo记录

---------------------------------------10.17---------------------------------------- 集群和分布式概念 集群&#xff1a;很多"人"做的相同的一件事&#xff0c;即使有一个人挂掉了&#xff0c;也不会对系统造成致命影响 分布式&#xff1a;很多"人"…

ruoyi vue前后端分离功能介绍

文章目录 内置功能:用户管理&#xff1a;部门管理&#xff1a;岗位管理&#xff1a;菜单管理&#xff1a;角色管理&#xff1a;字典管理&#xff1a;参数管理&#xff1a; 可以设置是否开启验证码功能通知公告&#xff1a;操作日志&#xff1a;登录日志&#xff1a;在线用户&am…

Think-Queue3一直提示[Exception]redis扩展未安装

场景 tp6tq3实现的任务队列&#xff0c;使用redis作为数据驱动&#xff0c;目前是tp6可以正常使用redis了&#xff0c;但tq3不行&#xff0c;一直提示[Exception]redis扩展未安装。 解决思路 1.分析tq3源码 定位到是这一行出了问题 if (!extension_loaded(redis)) {throw n…

PAT 乙级1070结绳

题目&#xff1a; 给定一段一段的绳子&#xff0c;你需要把它们串成一条绳。每次串连的时候&#xff0c;是把两段绳子对折&#xff0c;再如下图所示套接在一起。这样得到的绳子又被当成是另一段绳子&#xff0c;可以再次对折去跟另一段绳子串连。每次串连后&#xff0c;原来两…

【ChatGPT系列】ChatGPT:创新工具还是失业威胁?

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

香港服务器如何做负载均衡?

​  在现代互联网时代&#xff0c;随着网站访问量的不断增加&#xff0c;服务器的负载也越来越重。为了提高网站的性能和可用性&#xff0c;负载均衡成为了一种常见的解决方案。 什么是负载均衡? 负载均衡是一种技术解决方案&#xff0c;用于在多个服务器之间分配负载&#…

【C】想练习C语言?通讯录的实现了解一下

目录 实现思路 开始实现 添加增加联系人功能 添加显示联系人信息的功能 添加删除联系人功能 添加查找指定联系人的功能 添加修改指定联系人的功能 测试 代码 Test.c Contact.c Contact.h 实现思路 1.通讯录中保存人的信息&#xff1a;名字、年龄、性别、电话、住址…

音视频常见问题(六):视频黑边或放大

摘要 本文介绍了视频黑边或放大的原因和解决方案。主要原因包括视频分辨率与显示视图尺寸不一致、摄像头采集、美颜滤镜格式兼容和分辨率。为了解决这些问题&#xff0c;开发者可以选择合适的渲染模式、动态调整分辨率、处理视频旋转和使用自定义视频渲染。 即构音视频SDK提供…

每日一道算法题:26. 删除有序数组中的重复项

难度 简单 题目 给你一个 非严格递增排列 的数组 nums &#xff0c;请你原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为…

Winform 多语言化快速解析替换工具-1分钟一个界面

随着业务的扩展&#xff0c;有的软件有多语言化的需求。那么如果软件已经很多写死的文字内容如何快速进行语言化替换呢&#xff0c;一个一个去改工作量太大。 于是开发了个小工具用来替换现有内容并生成语音包&#xff0c;原理就是采用正则表达式进行匹配控件关键字以及中文进…

基础数据类型和引用数据类型区别?

基础数据类型和引用数据类型的区别如下&#xff1a; 存储上的区别&#xff1a;基础数据类型是存放在栈中的简单数据段&#xff1b;引用数据类型是存放在堆内存中的对象&#xff0c;在栈内存中存放的是堆内存中具体内容的引用地址&#xff0c;通过这个地址可以快速查找到对象。…

AS/400简介

AS400 AS400 简介AS/400操作系统演示 AS400 简介 在 AS400 中&#xff0c;AS代表“应用系统”。它是多用户、多任务和非常安全的系统&#xff0c;因此用于需要同时存储和处理敏感数据的行业。它最适合中级行业&#xff0c;因此用于制药行业、银行、商场、医院管理、制造业、分销…

基于长短期神经网络的可上调容量PUP预测,基于长短期神经网络的可下调容量PDO预测,LSTM可调容量预测

目录 背影 摘要 代码和数据下载:基于长短期神经网络的可上调容量PUP预测,基于长短期神经网络的可下调容量PDO预测,LSTM可调容量预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88230834 LSTM的基本定义 LSTM实现的步骤 基于长短…

使用FastAPI部署Ultralytics YOLOv5模型

YOLO是You Only Look Once(你只看一次)的缩写&#xff0c;它具有识别图像中的物体的非凡能力&#xff0c;在日常应用中会经常被使用。所以在本文中&#xff0c;我们将介绍如何使用FastAPI的集成YOLOv5&#xff0c;这样我们可以将YOLOv5做为API对外提供服务。 Python有几个web框…