Openlayers3中实现台风风圈绘制算法

概述:

台风的风圈的NE、NW、SW、SE四个方位的影响范围是不一致,本文介绍一种简单的风圈的绘制方法,并在OL3中展示。

实现效果:

实现代码:

1、数据格式

			var Configs = {
                CIRCLE_CENTER_X:104.21390114106414,
                CIRCLE_CENTER_Y:35.847595169932646,
                CIRCLE_R:{
                    "SE":0.5,
					"NE":0.3,
					"NW":0.2,
					"SW":0.5
				}
            };

2、关键代码

            var wkt = "POLYGON((";
            var wkt0 = "", _interval = 6;
            for(var i=0;i<360/_interval;i++){
                var _r = 0;
                var _ang = i*_interval;
                if(_ang>0&&_ang<=90){
                    _r = Configs.CIRCLE_R.NE;
                }
				else if(_ang>90&&_ang<=180){
                    _r = Configs.CIRCLE_R.NW;
				}
                else if(_ang>180&&_ang<=270){
                    _r = Configs.CIRCLE_R.SW;
                }
                else{
                    _r = Configs.CIRCLE_R.SE;
                }

                var x = Configs.CIRCLE_CENTER_X + _r * Math.cos(_ang * 3.14 /180);
                var y = Configs.CIRCLE_CENTER_Y + _r  * Math.sin(_ang * 3.14/180);

                wkt = wkt+""+x+" "+y+", ";
                if(i===0){
                    wkt0 = ""+x+" "+y+"";
				}
            }
            wkt = wkt+wkt0+"))";

3、完整代码

<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">
		var wktformat = new ol.format.WKT();
		function init(){
			var untiled = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://localhost:8080/geoserver/lzugis/wms',
					params: {'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:province',
						STYLES: ''
					},
					serverType: 'geoserver'
				})
			});

			var Configs = {
                CIRCLE_CENTER_X:104.21390114106414,
                CIRCLE_CENTER_Y:35.847595169932646,
                CIRCLE_R:{
                    "SE":0.5,
					"NE":0.3,
					"NW":0.2,
					"SW":0.5
				}
            };
            var wkt = "POLYGON((";
            var wkt0 = "", _interval = 6;
            for(var i=0;i<360/_interval;i++){
                var _r = 0;
                var _ang = i*_interval;
                if(_ang>0&&_ang<=90){
                    _r = Configs.CIRCLE_R.NE;
                }
				else if(_ang>90&&_ang<=180){
                    _r = Configs.CIRCLE_R.NW;
				}
                else if(_ang>180&&_ang<=270){
                    _r = Configs.CIRCLE_R.SW;
                }
                else{
                    _r = Configs.CIRCLE_R.SE;
                }

                var x = Configs.CIRCLE_CENTER_X + _r * Math.cos(_ang * 3.14 /180);
                var y = Configs.CIRCLE_CENTER_Y + _r  * Math.sin(_ang * 3.14/180);

                wkt = wkt+""+x+" "+y+", ";
                if(i===0){
                    wkt0 = ""+x+" "+y+"";
				}
            }
            wkt = wkt+wkt0+"))";
            var features = new Array();
            features.push(wktformat.readFeature(wkt));
            features.push(wktformat.readFeature("POINT("+Configs.CIRCLE_CENTER_X+" "+Configs.CIRCLE_CENTER_Y+")"));

            var styleFunc = function(feature, resolution){
                var index = feature.get("index");
                return new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 0, 0, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 4,
                        fill: new ol.style.Fill({
                            color: '#ff0000'
                        })
                    })
                });
            };
			var vector = new ol.layer.Vector({
				source: new ol.source.Vector({
					features: features
				}),
				style:styleFunc
			});
			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
				})
			});
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

OpenGL ES实践教程(二)摄像头采集数据和渲染

教程 这一篇教程是摄像头采集数据和渲染,包括了三部分内容,渲染部分-OpenGL ES,摄像头采集图像部分-AVFoundation和图像数据创建纹理部分-G...

4405
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

1.3K4
来自专栏数据结构与算法

欧拉回路与欧拉路径

欧拉回路与欧拉路径 如果图G中的一个路径包括每个边恰好一次,则该路径称为欧拉路径(欧拉通路)。 如果一个回路是欧拉路径,则称为欧拉回路(Euler circui...

4009
来自专栏空间大数据可视化

GIS基础算法之Kruskal算法(2015.10.15)

1235
来自专栏GIS讲堂

ArcGIS Image Server简介以及OL2中的加载

本文讲述Arcgis Image Server相关以及在OL2中如何加载Arcgis Server发布的影像服务。

1142
来自专栏图形学与OpenGL

3.6.2 编程实例-河南地图绘制

#include <iostream> #include <fstream> #include<vector> #include <GL/glut.h> usi...

1161
来自专栏一棹烟波

OpenGL进行简单的通用计算实例

博主作为OpenGL新手,最近要用OpenGL进行并行的数据计算,突然发现这样的资料还是很少的,大部分资料和参考书都是讲用OpenGL进行渲染的。好不容易找到一...

2827
来自专栏HansBug's Lab

算法模板——单个值欧拉函数

输入N,输出phi(N) 这样的单个值欧拉函数程序一般见于部分数论题,以及有时候求逆元且取模的数不是质数的情况(逆元:A/B=A*Bphi(p)-1 (mod ...

3555
来自专栏技术随笔

LIDC-IDRI肺结节公开数据集Dicom和XML标注详解数据来源解析结果数据分析

8438
来自专栏用户2442861的专栏

Python-OpenCV 处理图像(二):滤镜和图像运算

喜欢自拍的人肯定都知道滤镜了,下面代码尝试使用一些简单的滤镜,包括图片的平滑处理、灰度化、二值化等:

2271

扫码关注云+社区

领取腾讯云代金券