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
       })
   })
};

完整代码如下：

说明：

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:[email protected]

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)