<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>风场可视化</title>
<!-- 加载框架 -->
<script type="text/javascript" src="js/jquery/jquery-2.1.1.min.js"></script>
<link href="js/colorpicker/css/colorpicker.css" rel="stylesheet" />
<script src="js/colorpicker/colorpicker.js"></script>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
<script type="text/javascript" type="text/javascript" src="js/layer3.0/layer.js"></script>
<!-- 风向图js -->
<script src="js/Windy.js"></script>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/******
***创建风场就是第38-50行，其他都是业务逻辑
******/
var windy = null,
windycanvas=null;
$(function(){
//初始化canvas的长宽
windycanvas = document.getElementById("windycanvas");
//加载风场数据
$.ajax({
type: "get",
url: "data/windydata.json",
dataType: "json",
success: function (response) {
resizeCanvas();
window.onresize=resizeCanvas;
//风场的参数配置，除了canvas是必传项，其他可以不传，参数含义见windy.js，以下配置了所有参数
var params = {
// extent:[73.6666,135.0416,3.86666,53.55],//中国范围
canvas:windycanvas,
canvasWidth:window.innerWidth,
canvasHeight:window.innerHeight,
speedRate:0.15,
particlesNumber:10000,
maxAge:120,
frameRate:10,
color:'#e0761a',
lineWidth:2,
};
windy = new CanvasWindy(response, params);
},
error: function (errorMsg) {
console.log("请求数据失败!");
}
});
var canrefresh = -1,canrefresh2 = -1;//拖动粒子个数和存活时间滑块时，不能随时刷新，需要隔一段时间刷新，避免卡顿
layui.use('slider', function(){
var slider = layui.slider;
slider.render({
elem: '#windy_count',
min:100,
max:100000,
value:12000,
tips:false,
input:true,
theme:'#3b86ca',
change: function(value){
if(windy){
clearTimeout(canrefresh);
windy.particlesNumber = value;
canrefresh = setTimeout(function(){
windy.redraw();
},500);
}
}
});
});
layui.use('slider', function(){
var slider = layui.slider;
slider.render({
elem: '#windy_linewidth',
min:1,
max:10,
value:1,
tips:false,
input:true,
theme:'#3b86ca',
change: function(value){
if(windy){
windy.lineWidth = value;
}
}
});
});
layui.use('slider', function(){
var slider = layui.slider;
slider.render({
elem: '#windy_speed',
min:1,
max:100,
value:5,
tips:false,
input:true,
theme:'#3b86ca',
change: function(value){
if(windy){
windy.speedRate = value/100;
}
}
});
});
layui.use('slider', function(){
var slider = layui.slider;
slider.render({
elem: '#windy_age',
min:10,
max:500,
value:120,
tips:false,
input:true,
theme:'#3b86ca',
change: function(value){
if(windy){
clearTimeout(canrefresh2);
windy.maxAge = value;
canrefresh2 = setTimeout(function(){
windy.redraw();
},500);
}
}
});
});
// 颜色选择插件初始化
$('.windycanvas_picker').each(function(inx,dom){
$(dom).ColorPicker({
color: $(dom).val(),
pickerDom:$(dom),
pickerDomInx:0,
onShow: function (colpkr) {
$(colpkr).fadeIn(300);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(300);
return false;
},
//onchange方法改过，pickerdom,inx是新增的属性
//pickerdom：当前点击节点，inx就是pickerDomInx属性，跟for循环中i相同，用来更新颜色之后同步修改颜色数组
onChange: function (hsb, hex, rgb,pickerdom,inx) {
var colorvl = '#' + hex;
$(pickerdom).val(colorvl);
$(pickerdom).next().css({ "background-color": colorvl});
if(windy){
windy.color = colorvl;
}
}
});
});
//范围切换
$('.extentWindy').on('click',function(){
var dtype = $(this).attr('data-type');
if(dtype=='world'){
windy.extent = [];
}else{
windy.extent = [73.6666,135.0416,3.86666,53.55];
}
windy.redraw();
});
//canvas尺寸改变
$('.resizeSize').on('click',function(){
var dtype = $(this).attr('data-type');
if(dtype=='1'){
windy.canvasWidth = window.innerWidth;
windy.canvasHeight = window.innerHeight;
canvas绘制风场效果
4星 · 超过85%的资源 需积分: 0 168 浏览量
2020-03-22
03:24:18
上传
评论 3
收藏 2.06MB RAR 举报 
canvas绘制风场效果 （152个子文件） 
layui.css 73KB layer.css 14KB layer.css 14KB layui.mobile.css 10KB style.css 9KB laydate.css 7KB layer.css 5KB colorpicker.css 3KB code.css 1KB iconfont.eot 46KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 48.gif 3KB 0.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB 35.gif 2KB 15.gif 2KB loading-2.gif 2KB loading-2.gif 2KB 37.gif 1KB 68.gif 1KB 52.gif 777B loading-1.gif 701B loading-1.gif 701B colorpicker_indic.gif 86B custom_indic.gif 86B colorpicker_select.gif 78B blank.gif 49B
index.html 13KB layui.all.js 272KB jquery.js 95KB jquery-2.1.1.min.js 82KB table.js 31KB mobile.js 31KB laydate.js 27KB layer.js 22KB共 152 条
- 1
- 2
资源评论
maydayilike2023-04-06绘制的不对
