zoukankan      html  css  js  c++  java

  • 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. <html xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. 	<title>Ol3 draw</title>
    5. 	<link rel="stylesheet" type="text/css" href="../../../plugin/ol3/css/ol.css"/>
    6. 	<style type="text/css">
    7. 		body, #map {
    8. 			border: 0px;
    9. 			margin: 0px;
    10. 			padding: 0px;
    11. 			width: 100%;
    12. 			height: 100%;
    13. 			font-size: 13px;
    14. 		}
    15. 	</style>
    16. 	<script type="text/javascript" src="../../../plugin/ol3/build/ol.js"></script>
    17. 	<script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script>
    18. 	<script type="text/javascript">
    19. 		function init(){
    20. 			var untiled = new ol.layer.Image({
    21. 				source: new ol.source.ImageWMS({
    22. 					ratio: 1,
    23. 					url: 'http://192.168.10.185:8086/geoserver/lzugis/wms',
    24. 					params: {'FORMAT': 'image/png',
    25. 						'VERSION': '1.1.1',
    26. 						LAYERS: 'lzugis:province',
    27. 						STYLES: ''
    28. 					},
    29. 					serverType: 'geoserver'
    30. 				})
    31. 			});
    32. 			var vector = new ol.layer.Vector({
    33. 				source: null
    34. 			});
    35. 			var map = new ol.Map({
    36. 				controls: ol.control.defaults({
    37. 					attribution: false
    38. 				}),
    39. 				target: 'map',
    40. 				layers: [untiled,vector],
    41. 				view: new ol.View({
    42. 					projection: new ol.proj.Projection({
    43. 						code: 'EPSG:4326',
    44. 						units: 'degrees'
    45. 					}),
    46. 					center: [103.847, 36.0473],
    47.         			zoom: 4
    48. 				})
    49. 			});
    50.  
    51. 			$.get("data/rainfall.json",function(result){
    52.                 console.log(result);
    53. 			    var geojson = {
    54.                     "type": "FeatureCollection",
    55.                     "totalFeatures": result.contours.length,
    56.                     "features": []
    57. 				};
    58.  
    59. 				for(var i=0;i<result.contours.length;i++){
    60. 				    var contour = result.contours[i];
    61. 				    var coords = [];
    62. 				    for(var j=0;j<contour.latAndLong.length;j++){
    63. 				        var latlon = contour.latAndLong[j];
    64.                         coords.push([latlon[1], latlon[0]]);
    65. 					}
    66.                     var feature = {
    67.                         "type": "Feature",
    68.                         "geometry_name": "geom",
    69.                         "geometry": {
    70.                             "type": "Polygon",
    71.                             "coordinates": [coords]
    72.                         },
    73.                         "properties": {
    74.                             "color":contour.color,
    75. 							"symbol":contour.symbol
    76.                         }
    77.                     };
    78. 				    geojson.features.push(feature);
    79. 				}
    80. 				console.log(geojson);
    81.                 var vectorSource = new ol.source.Vector({
    82.                     features: (new ol.format.GeoJSON()).readFeatures(geojson)
    83.                 });
    84.                 var styleFunc = function(feature){
    85.                     var color = feature.get("color");
    86. 					var colors = {
    87. 					    "0":"255,255,255,0",
    88. 						"25":"0, 0, 255, 0",
    89. 						"50":"255, 255, 0, 255",
    90. 						"100":"255, 0, 0, 255"
    91. 					};
    92. //					var color = colors[feature.get("symbol")];
    93.                     color = "rgba("+color+")";
    94.                     return new ol.style.Style({
    95. //                        stroke: new ol.style.Stroke({
    96. //                            color: '#000000',
    97. //                             1
    98. //                        }),
    99.                         fill: new ol.style.Fill({
    100.                             color: color
    101.                         })
    102.                     })
    103. 				};
    104.  
    105.                 vector.setSource(vectorSource);
    106.                 vector.setStyle(styleFunc);
    107.                 vector.setOpacity(0.8);
    108. 			})
    109. 		}
    110. 	</script>
    111. </head>
    112. <body onLoad="init()">
    113. <div id="map">
    114. </div>
    115. </body>
    116. </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)


  • 相关阅读:
    熔断器Hystrix
    面向对象
    基础语法
    为什么需要定义数据类型？？？
    集成Ribbon的客户端调用工具——Feign
    Ribbon实现客户端负载均衡
    入门神经网络-Python 实现(下)
    代码视角-神经网络-Python 实现(上)
    归纳方法
    神经网络-反向传播BP算法推导
  • 原文地址：https://www.cnblogs.com/hustshu/p/14769656.html
Copyright © 2011-2022 走看看