m10_canvasWindLayer.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  6. <meta name="author" content="火星科技 http://mars3d.cn " />
  7. <meta name="apple-touch-fullscreen" content="yes" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <meta name="format-detection" content="telephone=no" />
  11. <meta name="x5-fullscreen" content="true" />
  12. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  13. <!-- 标题及搜索关键字 -->
  14. <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  15. <meta
  16. name="description"
  17. content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型 gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包 地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
  18. />
  19. <link rel="shortcut icon" type="image/x-icon" href="" />
  20. <title>风向图(canvas方式) </title>
  21. <!--第三方lib-->
  22. <script
  23. type="text/javascript"
  24. src="../lib/include-lib.js"
  25. libpath="../lib/"
  26. include="jquery,jquery.minicolors,font-awesome,bootstrap,bootstrap-slider,layer,haoutil,turf,mars3d,mars3d-wind"
  27. ></script>
  28. <link href="css/style.css" rel="stylesheet" />
  29. </head>
  30. <body class="dark">
  31. <!--加载前进行操作提示,优化用户体验-->
  32. <div id="mask" class="signmask" onclick="removeMask()"></div>
  33. <div id="mars3dContainer" class="mars3d-container"></div>
  34. <!-- 面板 -->
  35. <div class="infoview">
  36. <div>
  37. 演示数据:
  38. <input type="button" class="btn btn-primary" value="全球区域" onclick="loadEarthData()" />
  39. <input type="button" class="btn btn-primary" value="局部区域" onclick="loadDongnanData()" />
  40. </div>
  41. <table class="mars-table">
  42. <tr>
  43. <td class="nametd">粒子个数:</td>
  44. <td>
  45. <input id="txt_count" title="粒子个数" />
  46. </td>
  47. </tr>
  48. <tr>
  49. <td class="nametd">存活时间:</td>
  50. <td>
  51. <input id="txt_age" title="存活时间" />
  52. </td>
  53. </tr>
  54. <tr>
  55. <td class="nametd">移动速率:</td>
  56. <td>
  57. <input id="txt_speed" title="移动速率" />
  58. </td>
  59. </tr>
  60. <tr>
  61. <td class="nametd">线宽度:</td>
  62. <td>
  63. <input id="txt_linewidth" title="线宽度" />
  64. </td>
  65. </tr>
  66. <tr>
  67. <td class="nametd">线颜色:</td>
  68. <td>
  69. <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#4696db" />
  70. </td>
  71. </tr>
  72. </table>
  73. </div>
  74. <script src="./js/common.js"></script>
  75. <script type="text/javascript">
  76. "use script"; //开发环境建议开启严格模式
  77. var map;
  78. var canvasWindLayer;
  79. function initMap(options) {
  80. //合并属性参数,可覆盖config.json中的对应配置
  81. var mapOptions = mars3d.Util.merge(options, {
  82. scene: {
  83. center: { lat: 17.262069, lng: 118.610529, alt: 21466323, heading: 359, pitch: -89 },
  84. },
  85. });
  86. //创建三维地球场景
  87. map = new mars3d.Map("mars3dContainer", mapOptions);
  88. map.basemap = 2017; //蓝色底图
  89. //风场
  90. canvasWindLayer = new mars3d.layer.CanvasWindLayer({
  91. color: "#ffffff", //颜色
  92. frameRate: 20, //每秒刷新次数
  93. speedRate: 60, //风前进速率
  94. particlesNumber: 5000,
  95. maxAge: 120,
  96. lineWidth: 1,
  97. });
  98. map.addLayer(canvasWindLayer);
  99. //滑动条
  100. $("#txt_count")
  101. .slider({ min: 1000, max: 90000, step: 1, value: 5000 })
  102. .on("change", (e) => {
  103. if (e?.value) {
  104. canvasWindLayer.particlesNumber = e.value.newValue;
  105. }
  106. });
  107. $("#txt_age")
  108. .slider({ min: 10, max: 500, step: 1, value: 120 })
  109. .on("change", (e) => {
  110. if (e?.value) {
  111. canvasWindLayer.maxAge = e.value.newValue;
  112. }
  113. });
  114. $("#txt_speed")
  115. .slider({ min: 1, max: 100, step: 1, value: 60 })
  116. .on("change", (e) => {
  117. if (e?.value) {
  118. canvasWindLayer.speedRate = e.value.newValue;
  119. }
  120. });
  121. $("#txt_linewidth")
  122. .slider({ min: 1, max: 10, step: 0.1, value: 1 })
  123. .on("change", (e) => {
  124. if (e?.value) {
  125. canvasWindLayer.lineWidth = e.value.newValue;
  126. }
  127. });
  128. $("#txtColor").minicolors({
  129. position: "bottom left",
  130. control: "saturation",
  131. change: function (hex) {
  132. canvasWindLayer.color = hex;
  133. },
  134. });
  135. loadEarthData();
  136. }
  137. //加载全球数据
  138. var earthWindData;
  139. function loadEarthData() {
  140. map.flyHome();
  141. canvasWindLayer.speedRate = 50;
  142. canvasWindLayer.reverseY = false; //false时表示 纬度顺序从大到小
  143. queryWindyuvApiData()
  144. .then(function (res) {
  145. earthWindData = res;
  146. canvasWindLayer.data = earthWindData;
  147. })
  148. .catch(function (err) {
  149. console.log("请求数据失败!", err);
  150. });
  151. }
  152. //加载气象
  153. var dongnanWindData;
  154. // 访问windyuv.json后端接口,取数据
  155. function queryWindyuvApiData() {
  156. return new Promise(function (resolve, reject) {
  157. if (earthWindData) {
  158. canvasWindLayer.data = earthWindData;
  159. } else {
  160. $.ajax({
  161. url: "//data.mars3d.cn/file/apidemo/windyuv.json",
  162. type: "get",
  163. dataType: "json",
  164. success: function (result) {
  165. resolve(result);
  166. },
  167. error: function (data) {
  168. reject(data);
  169. },
  170. });
  171. }
  172. });
  173. }
  174. // 访问windpoint.json后端接口,取数据
  175. function queryWindpointApiData() {
  176. return new Promise(function (resolve, reject) {
  177. if (dongnanWindData) {
  178. canvasWindLayer.data = dongnanWindData;
  179. } else {
  180. $.ajax({
  181. url: "//data.mars3d.cn/file/apidemo/windpoint.json",
  182. type: "get",
  183. dataType: "json",
  184. success: function (result) {
  185. resolve(result);
  186. },
  187. error: function (data) {
  188. reject(data);
  189. },
  190. });
  191. }
  192. });
  193. }
  194. function loadDongnanData() {
  195. map.setCameraView({
  196. y: 30.484229,
  197. x: 116.627601,
  198. z: 1719951,
  199. heading: 0,
  200. pitch: -90,
  201. roll: 0,
  202. });
  203. canvasWindLayer.speedRate = 85;
  204. canvasWindLayer.reverseY = true; //true时表示 纬度顺序从小到到大
  205. queryWindpointApiData()
  206. .then(function (res) {
  207. dongnanWindData = convertWindData(res.data);
  208. canvasWindLayer.data = dongnanWindData;
  209. })
  210. .catch(function (err) {
  211. haoutil.msg("实时查询气象信息失败,请稍候再试");
  212. });
  213. }
  214. //将数据转换为需要的格式:风向转UV
  215. function convertWindData(arr) {
  216. var arrU = [];
  217. var arrV = [];
  218. var xmin = arr[0].x;
  219. var xmax = arr[0].x;
  220. var ymin = arr[0].y;
  221. var ymax = arr[0].y;
  222. // 风向是以y轴正方向为零度顺时针转,0度表示北风。90度表示东风。
  223. // u表示经度方向上的风,u为正,表示西风,从西边吹来的风。
  224. // v表示纬度方向上的风,v为正,表示南风,从南边吹来的风。
  225. for (let i = 0, len = arr.length; i < len; i++) {
  226. const item = arr[i];
  227. if (xmin > item.x) {
  228. xmin = item.x;
  229. }
  230. if (xmax < item.x) {
  231. xmax = item.x;
  232. }
  233. if (ymin > item.y) {
  234. ymin = item.y;
  235. }
  236. if (ymax < item.y) {
  237. ymax = item.y;
  238. }
  239. var u = mars3d.WindUtil.getU(item.speed, item.dir);
  240. arrU.push(u);
  241. var v = mars3d.WindUtil.getV(item.speed, item.dir);
  242. arrV.push(v);
  243. }
  244. var rows = getKeyNumCount(arr, "y"); //计算 行数
  245. var cols = getKeyNumCount(arr, "x"); //计算 列数
  246. return {
  247. xmin: xmin,
  248. xmax: xmax,
  249. ymax: ymax,
  250. ymin: ymin,
  251. rows: rows,
  252. cols: cols,
  253. udata: arrU, //横向风速
  254. vdata: arrV, //纵向风速
  255. };
  256. }
  257. function getKeyNumCount(arr, key) {
  258. var obj = {};
  259. arr.forEach((item) => {
  260. obj[item[key]] = true;
  261. });
  262. var count = 0;
  263. for (let col in obj) {
  264. count++;
  265. }
  266. return count;
  267. }
  268. </script>
  269. </body>
  270. </html>