【第22期】观点:IT 行业加班,到底有没有价值?

Geoserver2.11矢量切片与OL3中的调用展示

原创 2017年02月16日 07:59:21

概述:

本文讲述在Geoserver2.11中如何进行矢量切片以及OL3中的调用展示。


矢量切片简介:

一、提出

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,这通常需要先获取矢量地理数据,然后通过前端将其绘制成不同元素便能通过鼠标进行响应交互了。

这种GIS组织方式在数据量比较小的时候并没有什么大问题,但是在数据量比较大时(例如全国的详细街区数据)存在以下几个问题。

1、同一套数据的展示在不同的需求下可能需要不同的样式(例如,白天和夜间模式)而对于传统栅格切片对此需求必须重新进行切片;

2、由于切片的分辨率固定,分辨率过高切片体积过大,分辨率过低高清屏无法清晰显示。

3、矢量数据的请求如果是按需请求每次都向服务器请求数据加重服务器压力,如果一次请求按需展示,当矢量数据过大时(例如全国的水系数据)对于前端的压力过大。


二、矢量切片的定义

矢量切片是一种利用协议缓冲(Protocol Buffers)技术的紧凑的二进制格式用来传递信息。当渲染地图时矢量切片使用一系列储存的内部数据进行制图。被组织到矢量切片的图层(比如道路、水、区域),每一层都有包含几何图形和可变属性的独立要素(例如姓名、类型等等)。通俗的说,就是将矢量数据以建立金字塔的方式,像栅格切片那样分割成一个一个描述性文件,以GeoJson格式或者以pbf等自定义格式组织,然后在前端根据显示需要按需请求不同的矢量瓦片数据进行Web绘图。


三、常见格式

GeoJson、TopoJson、pbf(Arcgis格式)、KML、 GeoRSS等


四、优势


矢量切片的优势


五、栅格切片与矢量切片的对比


矢量切片


栅格切片


Geoserver中矢量切片的发布:

在geoserver中可发布单个图层,也可发布一个图层组,上述的示例是发布的一个图层组。

1、选择发布图层(组)


选择发布图层组

2、切换到“Tile Cache”面板,设置切片参数


设置切片参数


设置切片网格

注意:

1、切片网格系统默认了几个,也是可以自定义的,具体的设置为GridSets->Create a new gridset。


设置切片网格

OL3的调用与展示:

1、代码

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON切片</title>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <script src="js/ol.js"></script>
	<script src="js/jquery-1.8.3.js"></script>
    <style>
		body,html,#map{
			padding:0px;
			margin:0px;
			height:100%;
			overflow:hidden;
			background:#ffffff;
		}
		.ol-mouseposition{
			position:absolute;
			bottom:20px;
			left:45%;
			padding:5px;
			background:#fff;
			border:1px solid #ccc;
			font-size:12px;
		}
		ul{
        	list-style: none;
        	position: absolute;
        	right:10px;
        	top:10px;
        	font-size: 14px;
			z-index:99;
        }
        ul li{
        	line-height: 28px;
        	height: 28px;
        	text-align: center;
        	width:40px;
        	float:left;
			cursor:pointer;
			background: #ffffff;
        }
        ul li.active{
        	background: #007AC2;
        	opacity: 0.8;
        	color:#ffffff;
        }
        ul li.day{
        	border:1px solid #007AC2;
        	border-right: none;
        	border-top-left-radius: 3px;
        	border-bottom-left-radius: 3px;
        }
        ul li.night{
        	border:1px solid #007AC2;
        	border-left: none;
        	border-top-right-radius: 3px;
        	border-bottom-right-radius: 3px;
        }
    </style>
</head>
<body>
	<ul id="lyrstyle">
		<li class="day active">白天</li>
		<li class="night">黑夜</li>
	</ul>
    <div id="map" class="map" tabindex="0"></div>
    <script>
		var projection4326 = new ol.proj.Projection({
			code: 'EPSG:4326',
			units: 'degrees',
		});
		var lyr = "lzugis:china";
		var dayStyle = function(feature,resolution){
			var stroke = new ol.style.Stroke({color: "rgba(0,0,255,0.4)", width: 2});
			var fill = new ol.style.Fill({color:"rgba(0,0,255,0)"});				
			var lyr = feature.f.split(".")[0];
			if(lyr=="province"){
				return new ol.style.Style({
					fill: fill,
					stroke: stroke
				});
			}
			else{
				var name = feature.get("name");
				return new ol.style.Style({
					image: new ol.style.Circle({
						radius: 5,
						fill: new ol.style.Fill({
							color: 'rgba(0,0,255,0.4)'
						})
					}),
					text: new ol.style.Text({ //文本样式
						font: '15px Calibri,sans-serif',
						fill: new ol.style.Fill({
							color: '#000000'
						}),
						text:name,
						offsetX:0,
						offsetY:12
					})
				});
			}
		};
		var nightStyle = function(feature,resolution){
			var stroke = new ol.style.Stroke({color: "rgba(255,255,255,0.4)", width: 2});
			var fill = new ol.style.Fill({color:"rgba(0,0,0,0.8)"});				
			var lyr = feature.f.split(".")[0];
			if(lyr=="province"){
				return new ol.style.Style({
					fill: fill,
					stroke: stroke
				});
			}
			else{
				var name = feature.get("name");
				return new ol.style.Style({
					image: new ol.style.Circle({
						radius: 5,
						fill: new ol.style.Fill({
							color: 'rgba(255,255,255,1)'
						})
					}),
					text: new ol.style.Text({ //文本样式
						font: '15px Calibri,sans-serif',
						fill: new ol.style.Fill({
							color: '#ffffff'
						}),
						text:name,
						offsetX:0,
						offsetY:12
					})
				});
			}
		};
		// 行政区划图层
		var vector = new ol.layer.VectorTile({
			// 矢量切片的数据源
			source: new ol.source.VectorTile({
				projection: projection4326,
				format: new ol.format.GeoJSON(),
				tileGrid: ol.tilegrid.createXYZ({
					extent: ol.proj.get('EPSG:4326').getExtent(),
					maxZoom: 22
				}),
				tilePixelRatio: 1,
				// 矢量切片服务地址
				tileUrlFunction: function(tileCoord){
					return 'http://127.0.0.1:8088/geoserver/gwc/service/tms/1.0.0/'
						+lyr+'@EPSG%3A4326@geojson/'+(tileCoord[0]-1)
						+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.geojson';
				}			
			}),
			style:dayStyle
		});
		var tiled = new ol.layer.Tile({
			visible: true,
			source: new ol.source.TileWMS({
				url: 'http://localhost:8088/geoserver/lzugis/wms',
				params: {'FORMAT': 'image/png', 
					'VERSION': '1.1.1',
					tiled: true,
					STYLES: '',
					LAYERS: 'lzugis:province',
					tilesOrigin: 73.4510046356223 + "," + 18.1632471876417
				}
			})
		  });
        var map = new ol.Map({
            layers: [
				//tiled,
				vector
			],
            target: 'map',
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition({
					className:"ol-mouseposition",
					coordinateFormat: ol.coordinate.createStringXY(5)
				})
            ]),
            view: new ol.View({
                projection: projection4326,
				minZoom:4,
				maxZoom:18,
                center: [103.2921875, 38.581640625],
                zoom: 4
            })
        });
		
		$("#lyrstyle li.day").on("click",function(){
			$("#lyrstyle li").removeClass("active");
			$(this).addClass("active");
			vector.setStyle(dayStyle);
			var zoom = map.getView().getZoom();
			map.getView().setZoom(zoom-1);
			$("#map").css("background","#ffffff");
		});
		$("#lyrstyle li.night").on("click",function(){
			$("#lyrstyle li").removeClass("active");
			$(this).addClass("active");
			vector.setStyle(nightStyle);
			var zoom = map.getView().getZoom();
			map.getView().setZoom(zoom+1);
			$("#map").css("background","rgba(0,0,0,0.8)");
		});
    </script>
</body>
</html>
2、运行效果


从上图看出,可以很方便的对地图的风格样式进行重新定义。

---------------------------------------------------------------------------------------------------------------

技术博客

http://blog.csdn.NET/gisshixisheng

在线教程

http://edu.csdn.Net/course/detail/799

Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)

版权声明:本文为LZUGIS原创文章,未经允许不得转载。 举报

相关文章推荐

WebGL高级编程-- 开发Web 3D 图形

WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTM...

Cesium 概述 (一)

Cesium是一个基于JavaScript的开源框架,可用于在浏览器中绘制3D的地球,并在其上绘制地图(支持多种格式的瓦片服务),该框架不需要任何插件支持,但是浏览器必须支持WebGL。 Ces...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

Cesium (六) 3D地形图

3D地形图 Cesium支持3D地形图、水体特效,下面的代码添加该特性: var terrainProvider = new Cesium.CesiumTerrainProvider( {...

Cesium (五) 栅格图层

Cesium支持多种标准化格式的GIS瓦片服务,可以把栅格图层绘制到地球的表面。这些图层的亮度、对比度、色相均可以动态调整: //初始化一个查看器,并且提供一个栅格图层 var viewer = n...

从Mapbox的开源工具看Web GIS的发展

mapbox一直是我很喜欢的公司之一。它的自由开放态度,前沿研究方向,让很多GISer眼前一亮,让他们找到学习或者工作的方向。 其实,mapbox.js是leaflet.js的一个超集,所以不要再问...

WebGL可视化地球和地图引擎:Cesium.js

Cesium 是一个JavaScript 库用于在Web浏览器创建 3D 地球和 2D 地图,无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化;跨平台;跨浏览器;实现真正的动态数据进...

Cesium 概述 (二) 空间数据可视化

空间数据可视化 Cesium提供Entity API来绘制空间数据,例如点、标记、标签、线、3D模型、形状、立体形状(volume)。 Entity API简介 Cesium提供两类...

Cesium(三) 几何图形与外观

几何图形与外观 我们可以通过Primitive API来操控几何图形及其外观,或者绘制各种特殊的形状。需要先得到Scene对象,然后在其上添加Primitive对象: var viewer = n...

开源技术浅谈

开源技术浅谈 “Apache、Linux、BSD、Mysql、BIND、Wordpress、Firefox…”或许你从未见过这些开源软件产品名词,甚至你还从没听说过开源软件的大名,但你一定会同意上网已...

Cesium (七) 镜头

镜头 Cesium提供了以下默认鼠标行为: (1)单击并拖拽球体:旋转地球,镜头俯角不变 (2)单击并拖拽空间:滚动roll、俯仰pitch镜头 (3)右击并拖拽、中键滚动:缩放镜...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)