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、矢量的数据源于中央气象台台风网,降水预报。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

R语言可视化——REmap(路径图)

今天紧接昨天的内容,跟大家分享如何使用REmap函数制作路径图。 路径图所需要的数据结构非常简单,两列数据,左侧是起点,右侧是终点,并且每一行的终点是下一行的起...

3715
来自专栏YG小书屋

Query Auto Completion自动完成查询(一)

当我们用搜索引擎或其他工具搜索内容时,输入框下方的提示内容会根据你的输入进行调整展示。这个过程我们称之为Query Auto Completion(QAC)。用...

1501
来自专栏大数据挖掘DT机器学习

一个强化学习 Q-learning 算法的简明教程

本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为...

5468
来自专栏数据小魔方

标注特定日期的折线图

今天给大家分享的标注特定日期的折线图! ▽▼▽ 有时候我们拿到的数据存在特定日气的波动,比如股市、衍生品等指数会存在星期(周末)的波动,如果能够在图表中标注出特...

4257
来自专栏人工智能头条

EC2上的深度学习:CUDA 7/cuDNN/caffe/DIGITS实战教程

2074
来自专栏数据小魔方

excel数据转置——一维表与二维表之间的转化!

今天跟大家分享excel数据转置——一维表与二维表之间的转化! ▽ 我们在做数据搜集整理的时候 通常会遇到要将原始数据做转置处理 如下图案例所示 ? 这是一张典...

4435
来自专栏人工智能头条

技术 | 机器学习中Python库的3个简单实践——你的图片将由你来创造

【导读】今天为大家介绍机器学习、深度学习中一些优秀、有意思的 Python 库,以及这些库的 Code 实践教程。涉及到的理论与学术内容会附上相应的论文与博客,...

1874
来自专栏AI研习社

发掘 ARM GPU 的全部深度学习性能,TVM 优化带来高达 2 倍性能提升

本文是由来自上海交通大学 Apex 实验室的本科生 Lianmin Zheng 发表于 TVM 的一篇博客,文中阐述了如何使用 TVM 优化移动端上的 ARM...

1.2K10
来自专栏数据小魔方

不等宽柱形图

今天要跟大家分享的图表是不等宽柱形图! ▽▼▽ 基础等柱形图一般只能展示一个维度的数据,但是如果想要在柱形图中同时展示两个维度的数据(柱高一个维度、柱宽另一个维...

3105
来自专栏数值分析与有限元编程

可视化 | Tecplot绘制散点图

Tecplot是功能强大的数据可视化工具,可以将计算中得到的大量数据形成直观图形。Tecplot的功能包括绘制XY曲线、轮廓图、云线、等值线、向量图、离散点等。...

9685

扫码关注云+社区

领取腾讯云代金券