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