Openlayers3中如何优雅的表示等值面

概述:

等值面,顾名思义,就是值相等的面,在水文或气象中会有很多这样的需求。本文不讲如何做等值面,本文将如何展示等值面。

效果:

栅格表达

矢量表达

实现:

等值面的实现,无外乎两种:矢量和栅格。栅格是将数据做成png等位图的格式,矢量是将数据做成json等矢量的格式。

1、栅格的展示

var image = new ol.layer.Image({
   source: new ol.source.ImageStatic({
       url: "skimg/7.png",
       imageExtent: bounds
   }),
   opacity:0.6
});

2、矢量的展示

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojson)
});
var styleFunc = function(feature){
   var color = feature.get("color");
   var colors = {
       "0":"255,255,255,0",
       "25":"0, 0, 255, 0",
       "50":"255, 255, 0, 255",
       "100":"255, 0, 0, 255"
   };
   color = "rgba("+color+")";
   return new ol.style.Style({
       fill: new ol.style.Fill({
           color: color
       })
   })
};

完整代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 draw</title>
	<link rel="stylesheet" type="text/css" href="../../../plugin/ol3/css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
	</style>
	<script type="text/javascript" src="../../../plugin/ol3/build/ol.js"></script>
	<script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		function init(){
			var untiled = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://192.168.10.185:8086/geoserver/lzugis/wms',
					params: {'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:province',
						STYLES: ''
					},
					serverType: 'geoserver'
				})
			});
			var vector = new ol.layer.Vector({
				source: null
			});
			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [untiled,vector],
				view: new ol.View({
					projection: new ol.proj.Projection({
						code: 'EPSG:4326',
						units: 'degrees'
					}),
					center: [103.847, 36.0473],
        			zoom: 4
				})
			});

			$.get("data/rainfall.json",function(result){
                console.log(result);
			    var geojson = {
                    "type": "FeatureCollection",
                    "totalFeatures": result.contours.length,
                    "features": []
				};

				for(var i=0;i<result.contours.length;i++){
				    var contour = result.contours[i];
				    var coords = [];
				    for(var j=0;j<contour.latAndLong.length;j++){
				        var latlon = contour.latAndLong[j];
                        coords.push([latlon[1], latlon[0]]);
					}
                    var feature = {
                        "type": "Feature",
                        "geometry_name": "geom",
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [coords]
                        },
                        "properties": {
                            "color":contour.color,
							"symbol":contour.symbol
                        }
                    };
				    geojson.features.push(feature);
				}
				console.log(geojson);
                var vectorSource = new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(geojson)
                });
                var styleFunc = function(feature){
                    var color = feature.get("color");
					var colors = {
					    "0":"255,255,255,0",
						"25":"0, 0, 255, 0",
						"50":"255, 255, 0, 255",
						"100":"255, 0, 0, 255"
					};
//					var color = colors[feature.get("symbol")];
                    color = "rgba("+color+")";
                    return new ol.style.Style({
//                        stroke: new ol.style.Stroke({
//                            color: '#000000',
//                            width: 1
//                        }),
                        fill: new ol.style.Fill({
                            color: color
                        })
                    })
				};

                vector.setSource(vectorSource);
                vector.setStyle(styleFunc);
                vector.setOpacity(0.8);
			})
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>

说明:

1、矢量或栅格都可优雅的表示等值线,栅格的数据量小,矢量的展示不失真。

2、矢量的数据源于中央气象台台风网,降水预报。

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

技术博客

CSDN:http://blog.csdn.NET/gisshixisheng

博客园:http://www.cnblogs.com/lzugis/

在线教程

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)

转载自:https://blog.csdn.net/GISShiXiSheng/article/details/77547484

You may also like...