在此前我写过一个关于风场的一个文章今天的这个是在区域风场的基础上做的一个案例可以动态改变例子个数、线宽度、移动速度、颜色和存活时间先看效果风场进阶版代码实现div classwindycanvas_list div classwindycanvas_row div classname粒子个数/div div classslidercont div idwindy_count classsliderbaritem/div /div /div div classwindycanvas_row div classname线宽度/div div classslidercont div idwindy_linewidth classsliderbaritem/div /div /div div classwindycanvas_row div classname移动速率/div div classslidercont div idwindy_speed classsliderbaritem/div /div /div div classwindycanvas_row div classname存活时间/div div classslidercont div idwindy_age classsliderbaritem/div /div /div div classwindycanvas_row div classwindycanvas_formcont span classwindycanvas_span颜色/span input idpoint_color value#FFFFFF classwindycanvas_formitem windycanvas_picker readonly div classwindycanvas_colorpanelbg stylebackground-color:#FFFFFF/div /div /div /divvar windy null, windycanvas null; var resizeCanvas function () { if (windycanvas null) { return; } windycanvas.width $(#mapDivWrap).width(); windycanvas.height $(#mapDivWrap).height(); if (windy) { windy._resize(windycanvas.width, windycanvas.height); } } var drawCanvas function () { windycanvas document.createElement(canvas); windycanvas.setAttribute(id, windycanvas); windycanvas.style.position absolute windycanvas.style[pointer-events] none; windycanvas.style[left] 0px; windycanvas.style[top] 0px; windycanvas.style[z-index] 10; windycanvas.style.width window.innerWidth; windycanvas.style.height window.innerHeight; document.getElementById(mapDivWrap).appendChild(windycanvas); $.ajax({ type: get, url: windy/data/data2.json, dataType: json, success: function (response) { resizeCanvas(); window.onresize resizeCanvas; //风场的参数配置除了canvas/viewer是必传项其他可以不传参数含义见windy.js var params { viewer: viewer, canvas: windycanvas, canvasWidth: $(#mapDivWrap).width(), canvasHeight: $(#mapDivWrap).height(), speedRate: 5000, particlesNumber: 3000, maxAge: 120, frameRate: 10, color: #FFFFFF, lineWidth: 1, }; windy new CanvasWindy(response, params); }, error: function (errorMsg) { console.log(请求数据失败!); } }); }; //加载暗黑背景底图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ url: http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer, baseLayerPicker: false })); viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(105.00000, 35.95551, 18654200), orientation: { heading: Cesium.Math.toRadians(360), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); //加载风场图 setTimeout(function () { drawCanvas(); }, 500); var canrefresh -1, canrefresh2 -1;//拖动粒子个数和存活时间滑块时不能随时刷新需要隔一段时间刷新避免卡顿 layui.use(slider, function () { var slider layui.slider; slider.render({ elem: #windy_count, min: 100, max: 20000, value: 3000, 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: 50, tips: false, input: true, theme: #3b86ca, change: function (value) { if (windy) { windy.speedRate (100 - (value 99 ? 99 : value)) * 100; windy._calcStep(); } } }); }); 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; } } }); });