Openlayers3中如何优雅的表示等值面
Openlayers3中如何优雅的表示等值面
lzugis
发布于 2018-10-23 11:27:26
发布于 2018-10-23 11:27:26
概述：
等值面，顾名思义，就是值相等的面，在水文或气象中会有很多这样的需求。本文不讲如何做等值面，本文将如何展示等值面。
效果：
栅格表达
矢量表达
实现：
等值面的实现，无外乎两种：矢量和栅格。栅格是将数据做成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、矢量的数据源于中央气象台台风网，降水预报。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年08月25日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读