GEOServer-OpenLayer-矢量切片2：矢量切片展示

0  前言

       上一篇博客中整理了如何利用Geoserver发布矢量切片服务，同时，也介绍了如何也在Geoserver中对矢量切片进行简单的浏览。此篇博客，则主要介绍如何利用OpenLayer进行GeoJson矢量切片的定制化展示

1 准备工作

1.  WEB IDE：HBuilder ，由于此次不实现后台交互，因此采用Hbuilder作为前端代码开发集成环境
2.  类库支持：
   1.  OpenLayer 3.20.1 用于地图服务的可视化展示
      
   2.  ProJ4 用于支持更多的坐标系统
      
3.  Geoserver 服务器中已经发布的矢量切片地图服务
   1.  图层名：VTPK:Line_VTpk
   2.  地图坐标系：EPSG:4326
   3.  切片方案：EPSG:4326
   4.  支持切片格式：GEOJSON

特别说明：由于HBuilder在运行HTML时，会自动将其放置于内置的服务器中，为了防止在开发过程中的跨域问题，本文在开发时，将HTML服务器改为了Geoserver所在Tomcat，并按照“ 如何利用HBuilder快速设置外部web服务器来测试移动web”一文中的修改方法，对HBuilder相关参数进行了修改。

2 HTML页面编写

本例中HTML文件主要提供了以名为Map的DIV标签，用于存放地图控件。同时实现相关JS、css文件的引用。对于OpenLayer地图控件的初始化过程，主要放在了LoadMapDemo.js 文件中定义init()方法实现，并在标签的onLoad方法中进行调用。实现源代码如下所示

3 地图控件JS代码实现

该JS代码主要模仿Geoserver服务器中地图预览的代码实现，写法上和“矢量切片”博文中的写法略有不同，但经过测试，在当前运行环境中可以正确执行。源代码如下所示

function LoadLine_VTpk() 
{
	//格网方案(方案名称，层次名称以及层次分辨率)
	var gridsetName = 'EPSG:4326';
	var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
	var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
	//基础请求Url
	var baseUrl = '../geoserver/gwc/service/wmts';
	var style = '';
	//切片参数（切片格式，图层名）
	var format = 'application/json;type=geojson';
	var layerName = 'VTPK:Line_VTpk';

	var projection = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu'});
	//固定参数，为了满足WMS请求格式
	params =
	{
		'REQUEST': 'GetTile',
		'SERVICE': 'WMTS',
		'VERSION': '1.0.0',
		'LAYER': layerName,
		'STYLE': style,
		'TILEMATRIX': gridsetName + ':{z}',
		'TILEMATRIXSET': gridsetName,
		'FORMAT': format,
		'TILECOL': '{x}',
		'TILEROW': '{y}'
	};
	//构建地图资源对象
	function constructSource() 
	{
		var url = baseUrl + '?'
		for(var param in params) 
		{
			url = url + param + '=' + params[param] + '&';
		}
		url = url.slice(0, -1);
		//需要指定URL，格网准则，切片格式以及地图投影
		var source = new ol.source.VectorTile
		({
			url: url,
			format: new ol.format.GeoJSON({}),
			projection: projection,
			tileGrid: new ol.tilegrid.WMTS({tileSize: [256, 256],origin: [-180.0, 90.0],resolutions: resolutions,matrixIds: gridNames}),
			wrapX: true
		});
		return source;
	}
	//构建矢量切片图层
	var layer = new ol.layer.VectorTile({source: constructSource()});
	//构建控制器
	var view = new ol.View({center: [0, 0],	zoom: 9,projection: projection,	extent: [-180.0, -90.0, 180.0, 90.0]});
	//构建地图对象
	var map = new ol.Map
	({
		controls: ol.control.defaults({attribution: false}).extend([new ol.control.MousePosition()]),
		layers: [layer],
		target: 'map',
		view: view
	});
	//地图适屏操作
	map.getView().fit([113.27197888884864, 21.914746549198444, 114.64968681122437, 23.29483393258001], map.getSize());
}

4 关于JS代码的理解

 本文在JS代码编写过程中，为了方便理解，依据个人能力水平对代码功能进行一定程度的分层，其分层模型如下图所示。特别说明，该层次模型不是OpenLayer官方认证的模型，仅为了加深个人理解。

4.1  请求URL

1. 固定参数：网络请求URL中和主机地址、图层属性、坐标系统、切片类型等信息无关的参数
2. 网络参数：网络请求中和主机地址和请求类型的参数
3. 切片参数：标识切片数据图层、切片类型的参数。对于矢量切片，Geoserver支持pbf，topojson，geojson三个类型，具体的format参数取值如表1所示。
4. 格网方案：即金字塔构建方案的名称，对于请求URL而言只需要提供格网方案名称，但该格网方案必须在Geoserver中存在且与地图服务采用的方案一致。实际图层的格网方案，可以在Geoserver-TileCache的图层列表中查看。而对于自定义的格网方案可参考“xxxxx”一文进行设置。

4.2  格网方案

         即格网金字塔层数、每层分辨率规则的集合文档，可以理解成ArcGIS中的切片准则。包括格网方案名称，分层名称，分层分辨率或者分层比例尺三个必要参数。另外，格网方法必须依托于某一个特定的坐标系统才能实现。在OneLayer前端展示构建Source时，必须提供格网方案的分层名称和分层分辨率，注意，geoServer默认提供了4个格网方案，如果要自定义切片方案，可参考“”实现。

4.3 地图投影

        即地图服务发布时采用的坐标系统。Geoserver中包含绝大部分常用的坐标系统，而OneLayer则只默认支持WGS4和xxxx两个坐标系统，如果过要显示其他坐标系统的数据，则应该使用proj4.js定义新的坐标系统。具体实现可参考“矢量切片（Vector tile）番外一：Proj4js”。

4.4 切片格式

        即调用的矢量切片的返回返回格式，现阶段GeoServer支持GEOJson、pbf、topoJson三种类型，OpenLayer都提供显示支持。使用时应注意，URL中切片格式为HTML请求字符串，而构建Source时，则需要构建JavaScript对象，其对应关系如表1所示。只有在发布地图服务时勾选了指定切片格式选项，在调用时才能申请访问指定类型的切片。

切片格式	JS对象类型	URL字符串
GeoJson	ol.format.GeoJSON({})	application/json;type=geojson
pbf	ol.format.MVT({})	application/x-protobuf;type=mapbox-vector
topoJson	ol.format.TopoJSON({})	application/json;type=topojson

4.5 显示参数

即地图控制中，地图中心点、缩放比例等信息的参数。

4.6 地图资源

即对地图服务的进行JavaScript对象封装，类似于Adapter模式中的适配器对象。

4.7 控制器

即对地图所有操作的统一访问对象，OneLayer采用了类似MVC的架构，因此所有地图的操作不是直接操作Map对象，而是操作地图控制。

        总体说来，利用OneLayer进行地图展示必须要创建Map对象，而Map对象又必须包含Layer，UIControls，View三个组件，因此LoadLine_VTpk()方法的主要功能，就是将地图服务个各种参数合理的组装成这三个组件。特别说明，本文在实践测试过程中仅实现了GEOJSON格式的矢量切片数据加载，对于pbf格式的矢量切片，总是会返回null数据，其原因暂不明确。

总结

        本文针对Geoserver服务器和OpenLayer组件，介绍了GeoJson格式的矢量切片。由于个人知识、精力限制，难免有纰漏之处，还望大家斧正。再次感谢http://www.cnblogs.com/escage/p/6387529.html 博文的作者，在该项技术上的前期总结和整理。大家也可以移步到此博客，进一步补充学习。