热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

GEOServer-OpenLayer-矢量切片3:PBF格式格式展示(tms服务)

0前言在上一篇博客中,本文通过参考GeoServer示例代码,实现了GeoJSON格式的矢量切片展示。但在主要存在以下两个方面的问题,PBF格式的矢量切片不能成功展示自定义

0 前言

在上一篇博客中,本文通过参考GeoServer示例代码,实现了GeoJSON格式的矢量切片展示。但在主要存在以下两个方面的问题,

  1. PBF格式的矢量切片不能成功展示
  2. 自定义坐标系统和格网方案描述混乱

该篇博客将对其进行进一步的改进和说明。

1 PBF格式切片展示

1.1 问题原因:

  1.  可能是由于 行列号计算错误或行列号与格网方案不匹配
  2.  也可能是WMTS服务在支持PBF格式时,默认的行列号计算方法和Geoserver不兼容

1.2 解决方法:

本文没有具体探究PBF格式行列号计算方法,只是通过改用tms服务,并手工计算行列号的方式修正了PBF展示异常的问题。主要还是参考了“矢量切片”一文。

1.3 实例代码

function initMVT()
{  
//图层名
  var layerName = 'VTPK:Line2_VTPK';
//投影1 Geoserver和OpenLayer都支持的4326坐标系
var projection4326 = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu'});
//切片资源1 基于4326坐标系统
var source4326 = new ol.source.VectorTile
({
format: new ol.format.MVT(),
projection: projection4326,
//切片格网直接有4326坐标系统的坐标范围与缩放大小指定,因此每一级的都是固定的
tileGrid: ol.tilegrid.createXYZ({extent: ol.proj.get('EPSG:4326').getExtent() , maxZoom: 22}),
tilePixelRatio:1,
  tileUrlFunction: function(tileCoord)
{
return '/geoserver/gwc/service/tms/1.0.0/'+layerName+'@EPSG%3A4326@pbf/'+(tileCoord[0]-1)
+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.pbf';
}
  })
//控制器
var defaultView = new ol.View
({
projection: projection4326,
center: [114.15, 22.65],
zoom: 12
});
//地图样式
var initStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgb(163,204,25)',width: 5})});
//图层
var vectorTile = new ol.layer.VectorTile
({
style: initStyle,
projection: projection4326,
source: source4326
  });
//地图
  map = new ol.Map
({
target: 'map',
layers: [vectorTile],
view:defaultView,
controls:[new ol.control.Zoom()],
});
}

1.4 代码说明

1. 格网方案创建,在此实例中本文采用了更为通用ol.tilegrid.createXYZ()方法构建格网方案,这里只需要提供格网范围和切片层数连个参数就可以,进而大大的简化了ol.tilegrid.WMTS()方法构建的参数量。

  1.  createXYZ的调用:ol.tilegrid.createXYZ({extent: ol.proj.get('EPSG:4326').getExtent() , maxZoom: 22}),
  2. ol.tilegrid.WMTS的调用:new ol.tilegrid.WMTS ({ tileSize: [256, 256], origin: [-180.0, 90.0],  resolutions: resolutions, matrixIds: gridNames })

2. tileUrlFunction回调,在此实例中本文没有使用还有{z}/{y}{x}占位符的静态URL,而改用了调用tileUrlFunction回调拼接一个切片满足wms服务格式URL。

  1.  WMS服务的URL格式(模拟):http://localhost:8080/geoserver/gwc/service/tms/1.0.0/VTPK:Line2_VTPK@EPSG%3A4326@pbf/11/3346/1281.pbf
  2. WMTS服务的URL格式(模拟):http://localhost:8080/geoserver/gwc/service/wmts?format=application/x-protobuf;type=mapbox-vector&styles=&tileMatrixSET=EPSG:4326&request=GetTile&layer=VTPK:Line2_VTPK&TILEMATRIX=EPSG:4326:18&TileROW=214193&TILECOL=49042

而为什么在tileUrlFunction中这样计算行列号,通过参考“矢量切片”一文,并利用OpenLayer自身的TileDebug图层进行了如下测试。

为了简化测试过程,方便结果查看,测试用例使用了调用的时PNG格式栅格切片,TileDebug的图层创建代码下:

//资源
var source= new ol.source.XYZ
(
{
projection: projection4326,
tileGrid: ol.tilegrid.createXYZ({extent: projection4326.getExtent() , maxZoom: 22}),
  tileUrlFunction: function(tileCoord)
{
return '/geoserver/gwc/service/tms/1.0.0/'+layerName+'@EPSG%3A4326@png/'+(tileCoord[0]-1)
+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.png';
}
}
);
//图层
var layer= new ol.layer.Tile
(
{
source:source,
projection: projection4326
}
);
//测试图层
  var layer_Debug = new ol.layer.Tile
(
{
source: new ol.source.TileDebug
({
projection: 'EPSG:3857',
tileGrid: source.getTileGrid()
})
}
)

firebug获取的结果来看:


从图层结果中可以分析出以下结果:

  1. Open Layer中直接通过CreateXYZ方法创建的格网方法与Geoserver中默认的格网方案在z,y,x的取值方法上存在不同
  2. Z值----geoserver.z=openlayer.z-1
  3. X值----geoserver.x=openlayer.x
  4. Y值----geoserver.y=pow(2,geoserver.z)+openlayer.y
显然这个规律满足tileUrlFunction中的计算方法

2 其他坐标系统和格网方案的地图展示

2.1  格网方案和坐标系统

  1.  格网方案:表示切片层数、每层个数、每层分辨率等各种切片准则的集合,相当于框架式房屋的架子,它决定了每一张切片应该放置在什么位置
  2.  坐标系统:是数据自身相对于显示世界的位置关系
  3.  两者联系: 格网方案必须指定坐标系统,才能从经纬度或其他地理坐标计算出切片的行列号。

2.2 OpenLayer中的格网方案和坐标系统

  1. 格网方案:
    1. 作用:构建Source
    2. 使用方式:不能通过OpenLayer创建有具体数值的格网方案
  2. 坐标系统:
    1. 构建Source、构建View、构建Layer
    2. 使用方式:
      1. 直接调用 内置的WGS84或墨卡托坐标系统
      2. 通过Pro4J定义新的坐标系统

2.3 在GeoServer中的格网方案和坐标系统

  1. 格网系统:
    1. 内置格网方案:EPSG:4236、GoogleCRS84Quad、 GlobalCRS84Pixel、GlobalCRS84Scale、EPSG:900913 共计5个默认格网,前四个基于WGS84坐标系,最后一个基于墨卡托坐标系。
    2. 通过GirdSet面板,定义新的格网方案。
  2. 坐标系统:提供绝大部分的坐标系统

2.4 简单总结

  1.  Geoserver可以为地图服务提供很多坐标系统,但OpenLayer只有两个坐标系统,若遇到不是WGS84和墨卡托的坐标则必须通过ProJ4库定义
  2.  Geoserver可以为地图服务提供四个默认的格网方案,当地图服务的坐标系统不是WGS84和墨卡托坐标系统的地图服务时,必须定义新的格网系统
  3.  OpenLayer中通用的格网方案一般由CreateXYZ方案创建,但这个格网方案和Geoserver所创建格网方案,可能存在一定的不对应,因此必须通过tileUrlFunction回调进行一定的处理。
  4. 地图展示失败的且没有任何提示信息的绝大部分原因基本都是格网方案以及坐标系统不匹配引起。因此一定要仔细检查以下对应关系。
    1.  地图服务的发布坐标系统一定和Geoserver使用的格网方案的坐标系统一致
    2.  OpenLayer中Source,View 以及layer对象中的坐标系统应与地图服务发布的坐标系统一致
    3. OpenLayer中的格网方案,一定要和GeoServer使用的切片方案一致。

2.5 实例代码

function initMVT2000()
{  
//图层名
  var layerName = 'VTPK:Line2_VTPK';
//投影2 Geoserver支持但OpenLayer不支持的4490(即国家2000)坐标系
proj4.defs("china2000","+proj=longlat +ellps=GRS80 +no_defs");
var projection4490 = new ol.proj.get('china2000');
projection4490.setExtent([-180,-90,180,90]);
//切片资源2 基于4490坐标系统
var source4490 = new ol.source.VectorTile
({
format: new ol.format.MVT(),
projection: projection4490,
//切片格网直接有4326坐标系统的坐标范围与缩放大小指定
tileGrid: ol.tilegrid.createXYZ({extent: projection4490.getExtent() , maxZoom: 22}),
tilePixelRatio:1,
  tileUrlFunction: function(tileCoord)
{
//这里使用的是tms服务而不是wmts服务
//注意URL中的格网名应该是Geoserver中配置给切片的格网名而不是坐标系名
return '/geoserver/gwc/service/tms/1.0.0/'+layerName+'@CGSC2000@pbf/'+(tileCoord[0]-1)
+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.pbf';
}
  })
//控制器
var defaultView = new ol.View
({
projection: projection4490,
center: [114.15, 22.65],
zoom: 12
});

//地图样式
var initStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgb(163,204,25)',width: 5})});
//图层
var vectorTile = new ol.layer.VectorTile
({
style: initStyle,
projection: projection4490,
source: source4490
  });
//地图
  map = new ol.Map
({
target: 'map',
layers: [vectorTile],
view:defaultView,
controls:[new ol.control.Zoom()],
});
}

2.6 代码说明

1.  坐标系名称

        本例中VTPK:Line2_VTPK采用了EPSG:4490(即国家2000)坐标系统,因为OpenLayer不支持该坐标系统因此必须通过ProJ4定义,这里China2000只是一个自定义名称,具体的坐标系统定义准则字符串可以在http://epsg.io/网页获取

2. 格网名称

       本例通过CreateXYZ创建了一个格网准则,但具体的准则数值是由URL中的CGSC2000常量标志的标志的,而CGSC2000常量所对应的具体格网方案准则已经在Geoserver中成功定义,并配置给了VTPK:Line2_VTPK地图服务。具体情况如图所示:



3 总结

本文主要通过采用了TMS服务的方式,解决了PBF格式矢量切片加载异常的问题,同时,对自定义坐标系统和格网方案的使用进行了进一步的梳理。

但目前仍然没有调试出基于WMTS服务方式的PBF格式矢量切片加载用例,后期也将继续进行测试。

最后十分感谢矢量切片(http://www.cnblogs.com/escage/p/6387529.html)一文作者在该项技术上的前驱探究与总结。


推荐阅读
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文详细介绍如何使用arm-eabi-gdb调试Android平台上的C/C++程序。通过具体步骤和实用技巧,帮助开发者更高效地进行调试工作。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 解决PHP与MySQL连接时出现500错误的方法
    本文详细探讨了当使用PHP连接MySQL数据库时遇到500内部服务器错误的多种解决方案,提供了详尽的操作步骤和专业建议。无论是初学者还是有经验的开发者,都能从中受益。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 在当前众多持久层框架中,MyBatis(前身为iBatis)凭借其轻量级、易用性和对SQL的直接支持,成为许多开发者的首选。本文将详细探讨MyBatis的核心概念、设计理念及其优势。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • PHP 编程疑难解析与知识点汇总
    本文详细解答了 PHP 编程中的常见问题,并提供了丰富的代码示例和解决方案,帮助开发者更好地理解和应用 PHP 知识。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
author-avatar
淡月如水夜宿雨
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有