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>
----------------------------------------------------------------------------------------------- 技术博客 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)
Openlayers3中实现台风风圈绘制算法的更多相关文章
- C#中的GDI+图形绘制方法
GDI+图形绘制方法 1.首先对于绘制图形,必须的先将命名空间导入:using System.Drawing.Drawing2D; 2.然后在一个事件中写入程序 首先先将Graphics这个对象实例化 ...
- 【CImg】三角形绘制算法实现
这周的CV基础练习是简单的图形绘制:比如说矩形.三角形和圆心什么的.会发现其实矩形和圆形的实现思路都很直白,矩形只需要确认两个对角坐标就可以了,圆心只需要确认圆心和半径,接着就是简单的遍历各个像素点判 ...
- 如何在3D场景中在模型上面绘制摄取点
有些时候,我们在屏幕上面绘制一个摄取点,在单屏玩游戏的模式下,我们并不能觉得有什么不妥.但是最近VR的热火朝天,我们带上眼镜看双屏的时候,总觉得这个摄取点看着很不舒服. 这个问题该怎么解决?在这里我首 ...
- [BS-28] iOS中分页的几种算法
iOS中分页的几种算法 总记录数:totalRecord 每页最大记录数:maxResult 算法一: totalPage = totalRecord % maxResult == 0 ? total ...
- mahout中kmeans算法和Canopy算法实现原理
本文讲一下mahout中kmeans算法和Canopy算法实现原理. 一. Kmeans是一个很经典的聚类算法,我想大家都非常熟悉.虽然算法较为简单,在实际应用中却可以有不错的效果:其算法原理也决定了 ...
- 数据结构笔记01：编程面试过程中常见的10大算法（java）
以下是在编程面试中排名前10的算法相关的概念,我会通过一些简单的例子来阐述这些概念.由于完全掌握这些概念需要更多的努力,因此这份列表只是作为一个介绍.本文将从Java的角度看问题,包含下面的这些概念: ...
- 在WPF中自定义你的绘制（五）
原文:在WPF中自定义你的绘制(五) 在WPF中自定义你的绘制(五) ...
- 在WPF中自定义你的绘制（三）
原文:在WPF中自定义你的绘制(三) 在WPF中自定义你的绘制(三) ...
- 在WPF中自定义你的绘制（四）
原文:在WPF中自定义你的绘制(四) 在WPF中自定义你的绘制(四) ...
随机推荐
- 20145312 《Java程序设计》第六周学习总结
20145312 <Java程序设计>第六周学习总结 学习笔记 Chapter10 输入 /输出 10.1InputStream 与 OutputStream 10.1.1 串流设计的概念 ...
- linux c开发环境构成
1.编辑器:VI.VIM 2.编译器:GNU C/C++编译器gcc 3.调试器:gdb 4.函数库:glibc 5.系统头文件:glibc_header
- 通俗易懂讲解IO模型
前言 说到IO模型,都会牵扯到同步.异步.阻塞.非阻塞这几个词.从词的表面上看,很多人都觉得很容易理解.但是细细一想,却总会发现有点摸不着头脑.自己也曾被这几个词弄的迷迷糊糊的,每次看相关资料弄明白了 ...
- Unique Binary Search Trees,Unique Binary Search Trees2 生成二叉排序树
Unique Binary Search Trees:求生成二叉排序树的个数. Given n, how many structurally unique BST's (binary search t ...
- codeforces741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- Android自定义圆形ProgressBar
闲来无事做了一个自定义的进度条,大致效果图如下: progressbar.gif 废话不多说,下面直接上代码: 自定义控件代码CircleProgressBar.java: public class ...
- 为什么U盘在拔出之前需要“安全弹出”？
前言 我们不知道从什么时候开始有一个观念:U盘一定要点击“安全弹出”才能拔.那么是不是在任何情况下都必须要这样呢? 介绍 U盘的传输策略有两种: 写入缓存:这种策略在windows中称为“更好的性能” ...
- Java的序列化机制
1. 所有实现序列化的类都必须实现Serializable接口,序列化有如下两个特点: 如果一个类可以被序列化,那么它的子类也可以被序列化 由于static代表类成员,trasient代表对象的临时数 ...
- C#/Java 程序员转GO/golang程序员笔记大全（day 01）
前言: 整理一下学习 Go 语言的笔记,作为一名老程序,学习一名新的开发语言自然不需要像小白那样从 HelloWorld 看起. 简单整理一下 Go 的一些差异处,希望对大家学习 go 有点帮助,不正 ...
- UVA-10047 The Monocycle （图的BFS遍历）
题目大意:一张图,问从起点到终点的最短时间是多少.方向转动也消耗时间. 题目分析:图的广度优先遍历... 代码如下: # include<iostream> # include<cs ...