概述：
等值面，顾名思义，就是值相等的面，在水文或气象中会有很多这样的需求。本文不讲如何做等值面，本文将如何展示等值面。
效果：
栅格表达
矢量表达
实现：
等值面的实现，无外乎两种：矢量和栅格。栅格是将数据做成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',
- // 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)
