openlayers3 通过wfs请求方式添加矢量vector图层

简介:

通过wfs方式向后台geoserver请求矢量数据,然后在前端通过vectorlayer展示出来,增强交互效果。

function getParkingLayerFunc(mapUrl,parkingLayerName){
	//获取该坐标系下地图边界
	var projectionExtent = ****.projection.getExtent();
	var namespace = ****.mapSpace;
	//wfs请求获取矢量图层gml数据信息
	****.vectorSource = new ol.source.Vector({		
		loader : function(resolution, projection) {			
			var dataUrl = mapUrl+'/geoserver/wfs?'
					+ 'service=WFS&request=GetFeature&'
					+ 'version=1.1.0&typename='
					+namespace
					+ ':'
					+ parkingLayerName;

			$.ajax({
				url : dataUrl
			}).done(function(response) {
				var format = new ol.format.WFS({
					featureNS : 'http://www.'+namespace+'.com',
					featureType : parkingLayerName
				});
				var features = format.readFeatures(response,
						{featureProjection: projection}
				);
				****.vectorSource.addFeatures(features);
			});
		},
		strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
			maxZoom: 23
		}))		
	});
	
	var getText = function(feature, resolution) {
		var type = "normal";
		var maxResolution = 6.705522537231445e-7;
		var text = feature.get('number');
		
		if (resolution > maxResolution) {
			text = '';
		} else if (type == 'hide') {
			text = '';
		} else if (type == 'shorten') {
			text = text.trunc(12);
		} else if (type == 'wrap') {
			text = stringDivider(text, 16, '\n');
		}

		return text;
	};
	
    var createPolygonStyleFunction = function(){
		return function(feature,resolution){
			var style = new ol.style.Style({
				fill : new ol.style.Fill({
					color : ****.parkFillColor
				}),
				stroke : new ol.style.Stroke({
					color : ****.parkBorderColor,
					width : 1
				}),
				text:createTextStyle(feature,resolution)
				});
			return [style];	
		}
	};
	
	var createTextStyle = function(feature, resolution) {
		var align = "center";
		var baseline = "middle";
		var size = "14px";
		var offsetX = 0;
		var offsetY = 0;
		var weight = "bold";
		var rotation = feature.get('rotation');
		var font = weight + ' ' + size + ' ' + "Arial";
		var fillColor = 'black';
		var outlineColor = 'black';
		var outlineWidth = 1;

		return new ol.style.Text({
			textAlign: align,
			textBaseline: baseline,
			font: font,
			text: getText(feature, resolution),
			fill: new ol.style.Fill({color: fillColor}),
			stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
			offsetX: offsetX,
			offsetY: offsetY,
			rotation: rotation
		});
	};
	
	// 构建图层
	var parkingLayer = new ol.layer.Vector({
		source : ****.vectorSource,
		style : createPolygonStyleFunction(),
		name:'tingchewei'
	});
	
	//获取地图对象
	var map = ****.getMap();
	console.info(parkingLayer);
	//添加图层
	map.addLayer(parkingLayer);
}


相关文章
|
8月前
|
测试技术
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
|
3月前
|
开发框架 前端开发 定位技术
在Mars3d实现cesium的ImageryLayer自定义瓦片的层级与原点
通过上述步骤,您可以成功在Mars3D平台上集成Cesium,并实现自定义瓦片图层的层级与原点配置。这一过程不仅提升了地图应用的定制化程度,也为处理特定数据集和优化用户体验提供了灵活的解决方案。在实际开发过程中,不断测试和微调是确保图层展示效果与性能的关键。
198 0
|
算法 JavaScript 数据可视化
基于leaflet-velocity的二维动态风场展示
本文讲解了leaflet-velocity插件,并利用插件进行了模拟的动态风场、洋流等信息的综合展示,让读者掌握集成方式。
1175 0
基于leaflet-velocity的二维动态风场展示
|
定位技术
在地图上基于OpenLayers实现点/线/面静态的绘制显示
在地图上基于OpenLayers实现点/线/面静态的绘制显示
1230 0
在地图上基于OpenLayers实现点/线/面静态的绘制显示
|
定位技术
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
VTK 曲面构建+颜色映射
Vtk,(visualization toolkit)是一个开源的免费软件系统,主要用于三维计算机图形学、图像处理和可视化。 VTK编程中主要用到的几个对象 vtkRenderer ,vtkRenderWindow,vtkActor,vtkMapper,其渲染场景如下图所示(图片来自东灵工作室博客) 在VTK的封装类中有一个专门为用三维杂序点进行重建曲面的类:vtkSur
4525 1
|
定位技术
openlayers控制地图显示范围
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83108903 openlaye...
2894 0
openlayers5之聚合分析图层Cluster
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81805524 openlayer...
1736 0
|
定位技术
openlayers4+geoserver wfs实现空间分析、属性查询
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79500449 openlayers4,geoserver wfs实现空间分析、属性查询 http://www.
1998 0