AnimationPanel.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. var plottingLayer;
  2. var plotting;
  3. var animationManager;
  4. var selectGeo, goAnimationName;
  5. var point3dsArray = [];
  6. var handlerLine;
  7. function InitPlot(viewer, serverUrl) {
  8. if (!viewer) {
  9. return;
  10. }
  11. var campos = SuperMap3D.Cartesian3.fromDegrees(121.58041176757547, 38.859240850898405, 500);
  12. scene.camera.setView({
  13. destination: campos,
  14. orientation: {
  15. heading: SuperMap3D.Math.toRadians(0),
  16. pitch: -0.20917672793046682,
  17. roll: 2.708944180085382e-13
  18. }
  19. });
  20. plottingLayer = new SuperMap3D.PlottingLayer(scene, "plottingLayer");
  21. scene.plotLayers.add(plottingLayer);
  22. plotting = SuperMap3D.Plotting.getInstance(serverUrl, scene);
  23. plotEditControl = new SuperMap3D.PlotEditControl(scene, plottingLayer);//编辑控件
  24. plotEditControl.activate();
  25. animationManager = plotting.getGOAnimationManager();
  26. var tooltip = createTooltip(document.body);
  27. handlerLine = new SuperMap3D.DrawHandler(viewer,SuperMap3D.DrawMode.Line);
  28. handlerLine.activeEvt.addEventListener(function(isActive){
  29. if(isActive == true){
  30. viewer.enableCursorStyle = false;
  31. viewer._element.style.cursor = '';
  32. $('body').removeClass('drawCur').addClass('drawCur');
  33. }
  34. else{
  35. viewer.enableCursorStyle = true;
  36. $('body').removeClass('drawCur');
  37. }
  38. });
  39. handlerLine.movingEvt.addEventListener(function(windowPosition){
  40. if(handlerLine.isDrawing){
  41. tooltip.showAt(windowPosition,'<p>右键单击结束绘制</p>');
  42. }
  43. else{
  44. tooltip.showAt(windowPosition,'<p>点击绘制第一个点</p>');
  45. }
  46. });
  47. var linePoints;//存储画线的节点
  48. var geometries = [];
  49. var point3ds = new SuperMap3D.Point3Ds();
  50. handlerLine.drawEvt.addEventListener(function(result){
  51. point3dsArray = [];
  52. tooltip.setVisible(false);
  53. linePoints = result.object.positions;
  54. for (var i = 0; i < linePoints.length; i++) {
  55. var position = linePoints[i];
  56. var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
  57. var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
  58. var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
  59. var height = cartographic.height;
  60. var point3d = new SuperMap3D.PlotPoint3D(longitude, latitude, height);
  61. point3dsArray.push(point3d);
  62. }
  63. });
  64. $('#drawWay').click(function(){
  65. deactiveAll();
  66. handlerLine.activate();
  67. });
  68. $('#toolbar').show();
  69. $('#loadingbar').remove();
  70. function deactiveAll(){
  71. handlerLine.deactivate();
  72. }
  73. $('#animationType').change(function() {
  74. var value = $(this).val();
  75. switch(value) {
  76. case "NONE":
  77. $('#pannel').hide();
  78. break;
  79. case "ATTRIBUTE":
  80. $('#pannel').show();
  81. $('#AttributePannel').show();
  82. $('#BlinkPannel').hide();
  83. $('#GrowPannel').hide();
  84. $('#RotatePannel').hide();
  85. $('#ScalePannel').hide();
  86. $('#ShowPannel').hide();
  87. $('#WayPannel').hide();
  88. break;
  89. case "BLINK":
  90. $('#pannel').show();
  91. $('#AttributePannel').hide();
  92. $('#BlinkPannel').show();
  93. $('#GrowPannel').hide();
  94. $('#RotatePannel').hide();
  95. $('#ScalePannel').hide();
  96. $('#ShowPannel').hide();
  97. $('#WayPannel').hide();
  98. break;
  99. case "GROW":
  100. $('#pannel').show();
  101. $('#AttributePannel').hide();
  102. $('#BlinkPannel').hide();
  103. $('#GrowPannel').show();
  104. $('#RotatePannel').hide();
  105. $('#ScalePannel').hide();
  106. $('#ShowPannel').hide();
  107. $('#WayPannel').hide();
  108. break;
  109. case "ROTATE":
  110. $('#pannel').show();
  111. $('#AttributePannel').hide();
  112. $('#BlinkPannel').hide();
  113. $('#GrowPannel').hide();
  114. $('#RotatePannel').show();
  115. $('#ScalePannel').hide();
  116. $('#ShowPannel').hide();
  117. $('#WayPannel').hide();
  118. break;
  119. case "SCALE":
  120. $('#pannel').show();
  121. $('#AttributePannel').hide();
  122. $('#BlinkPannel').hide();
  123. $('#GrowPannel').hide();
  124. $('#RotatePannel').hide();
  125. $('#ScalePannel').show();
  126. $('#ShowPannel').hide();
  127. $('#WayPannel').hide();
  128. break;
  129. case "SHOW":
  130. $('#pannel').show();
  131. $('#AttributePannel').hide();
  132. $('#BlinkPannel').hide();
  133. $('#GrowPannel').hide();
  134. $('#RotatePannel').hide();
  135. $('#ScalePannel').hide();
  136. $('#ShowPannel').show();
  137. $('#WayPannel').hide();
  138. break;
  139. case "WAY":
  140. $('#pannel').show();
  141. $('#AttributePannel').hide();
  142. $('#BlinkPannel').hide();
  143. $('#GrowPannel').hide();
  144. $('#RotatePannel').hide();
  145. $('#ScalePannel').hide();
  146. $('#ShowPannel').hide();
  147. $('#WayPannel').show();
  148. break;
  149. default:
  150. $('#pannel').show();
  151. break;
  152. }
  153. });
  154. window.setInterval(function execute() {
  155. animationManager.execute();
  156. }, 10);
  157. creatAnimation();
  158. }
  159. function creatAnimation() {
  160. var geoJGSZ = null;
  161. var geoTFXS = null;
  162. var geoLJXS = null;
  163. var geoTFXS2 = null;
  164. var geoZYSS = null;
  165. var geoLJZY = null;
  166. var geoZYSS2 = null;
  167. var geoJC = null;
  168. var geoSJ = null;
  169. var geoLJJL = null;
  170. var geoJGJL = null;
  171. var pointsJGSZ = [];
  172. pointsJGSZ[0] = new SuperMap3D.PlotPoint3D(13.0486416724835, 47.827217402435, 0);
  173. pointsJGSZ[1] = new SuperMap3D.PlotPoint3D(13.0484530291208, 47.8273069046719, 0);
  174. pointsJGSZ[2] = new SuperMap3D.PlotPoint3D(13.0498576145008, 47.8282734633643, 0);
  175. pointsJGSZ[3] = new SuperMap3D.PlotPoint3D(13.0513393769035, 47.8287206684327, 0);
  176. pointsJGSZ = MoveSymbol(pointsJGSZ);
  177. plottingLayer.createSymbol(22, 1004, pointsJGSZ);
  178. var pointsSJ = [];
  179. pointsSJ[0] = new SuperMap3D.PlotPoint3D(13.0522206845731, 47.8287075057692, 0);
  180. pointsSJ = MoveSymbol(pointsSJ);
  181. plottingLayer.createSymbol(421, 20100, pointsSJ, function (even) {
  182. geoSJ = even.feature;
  183. geoSJ.symbolStyle.lineColor = {red: 1, green: 1, blue: 0, alpha: 1};//"#ffff00"
  184. geoSJ.textContent = "事件";
  185. });
  186. var pointsJGJL = [];
  187. pointsJGJL[0] = new SuperMap3D.PlotPoint3D(13.0485470948225, 47.8271255667932, 10000);
  188. pointsJGJL = MoveSymbol(pointsJGJL);
  189. plottingLayer.createSymbol(421, 9, pointsJGJL, function (even) {
  190. geoJGJL = even.feature;
  191. geoJGJL.showMode = 2;
  192. geoJGJL.modelPath = "./SampleData/plot/SuperMap3D_Air.gltf";
  193. geoJGJL.modelScale.x = 10;
  194. geoJGJL.textContent = "进攻警力";
  195. });
  196. }
  197. function preAnimation() {
  198. selectGeo = plottingLayer.selectedFeature;
  199. if (!selectGeo) {
  200. return;
  201. }
  202. goAnimationName = selectGeo.id + Math.ceil(Math.random() * 1000);
  203. }
  204. function createAttributeAnimation() {
  205. preAnimation();
  206. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_ATTRIBUTE, goAnimationName, selectGeo);
  207. if (document.getElementById("lineColorAnimationFlag").selectedIndex === 0) {
  208. goAnimation.lineColorAnimation = false;
  209. } else {
  210. goAnimation.lineColorAnimation = true;//线色动画
  211. var starLineColor = colorConvert(document.getElementById("a_startLineColor").value);
  212. var endLineColor = colorConvert(document.getElementById("a_endLineColor").value);
  213. goAnimation.startLineColor = starLineColor;
  214. goAnimation.endLineColor = endLineColor;
  215. }
  216. if (document.getElementById("lineWidthFlag").selectedIndex === 0) {
  217. goAnimation.lineWidthAnimation = false;
  218. } else {
  219. goAnimation.lineWidthAnimation = true;//线宽动画
  220. var starLineWidth = parseFloat(document.getElementById("a_startLineWidth").value);
  221. var endLineWidth = parseFloat(document.getElementById("a_endLineWidth").value);
  222. goAnimation.startLineWidth = starLineWidth;//开始线宽
  223. goAnimation.endLineWidth = endLineWidth;//结束线宽
  224. }
  225. if (document.getElementById("surroundLineColorFlag").selectedIndex === 0) {
  226. goAnimation.surroundLineColorAnimation = false;
  227. } else {
  228. goAnimation.surroundLineColorAnimation = true;//衬线色动画
  229. var starSurroundLineColor = colorConvert(document.getElementById("a_startSurroundLineColor").value);
  230. var endSurroundLineColor = colorConvert(document.getElementById("a_endSurroundLineColor").value);
  231. goAnimation.startSurroundLineColor = starSurroundLineColor;
  232. goAnimation.endSurroundLineColor = endSurroundLineColor;
  233. }
  234. if (document.getElementById("surroundLineWidthFlag").selectedIndex === 0) {
  235. goAnimation.surroundLineWidthAnimation = false;
  236. } else {
  237. goAnimation.surroundLineWidthAnimation = true;//衬线宽动画
  238. var starSurroundLineWidth = parseFloat(document.getElementById("a_startSurroundLineWidth").value);
  239. var endSurroundLineWidth = parseFloat(document.getElementById("a_endSurroundLineWidth").value);
  240. goAnimation.startSurroundLineWidth = starSurroundLineWidth;
  241. goAnimation.endSurroundLineWidth = endSurroundLineWidth;
  242. }
  243. goAnimation.startTime = parseFloat(document.getElementById("a_startTime").value);//开始时间
  244. goAnimation.duration = parseFloat(document.getElementById("a_duration").value);//播放时长
  245. if (document.getElementById("a_repeatFlag").selectedIndex === 0) {
  246. goAnimation.repeat = false;
  247. } else {
  248. goAnimation.repeat = true;
  249. }
  250. }
  251. function createBlinkAnimation() {
  252. preAnimation();
  253. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_BLINK, goAnimationName, selectGeo);
  254. if (document.getElementById("blinkStyleFlag").selectedIndex === 0) {//频率
  255. goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Frequency;//频率闪烁
  256. goAnimation.blinkInterval = parseFloat(document.getElementById("blinkFrequency").value);//闪烁间隔
  257. } else {
  258. goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Number;//频率闪烁
  259. goAnimation.blinkNumber = parseFloat(document.getElementById("blinkNumber").value);//闪烁间隔
  260. }
  261. if (document.getElementById("b_replaceColorFlag").selectedIndex === 0) {
  262. goAnimation.replaceStyle = SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_NoColor;
  263. } else {
  264. goAnimation.replaceStyle = SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_Color;//颜色交替类型
  265. var starColor = colorConvert(document.getElementById("startLineColor").value);
  266. var endColor = colorConvert(document.getElementById("endLineColor").value);
  267. goAnimation.startColor = starColor;
  268. goAnimation.endColor = endColor;
  269. }
  270. goAnimation.startTime = parseFloat(document.getElementById("blinkStartTime").value);//开始时间
  271. goAnimation.duration = parseFloat(document.getElementById("blinkDuration").value);//播放时长
  272. if (document.getElementById("b_repeatFlag").selectedIndex === 0) {
  273. goAnimation.repeat = false;
  274. } else {
  275. goAnimation.repeat = true;
  276. }
  277. }
  278. function createGrowAnimation() {
  279. preAnimation();
  280. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_GROW, goAnimationName, selectGeo);
  281. goAnimation.startScale = parseFloat(document.getElementById("g_startScale").value);
  282. goAnimation.endScale = parseFloat(document.getElementById("g_endScale").value);
  283. goAnimation.startTime = parseFloat(document.getElementById("g_startTime").value);//开始时间
  284. goAnimation.duration = parseFloat(document.getElementById("g_duration").value);//播放时长
  285. if (document.getElementById("g_repeatFlag").selectedIndex === 0) {
  286. goAnimation.repeat = false;
  287. } else {
  288. goAnimation.repeat = true;
  289. }
  290. }
  291. function createRotateAnimation() {
  292. preAnimation();
  293. var startAngle, endAngle;
  294. startAngle = new SuperMap3D.PlotPoint3D(parseFloat(document.getElementById("r_xStartAngle").value), parseFloat(document.getElementById("r_yStartAngle").value), parseFloat(document.getElementById("r_zStartAngle").value));
  295. endAngle = new SuperMap3D.PlotPoint3D(parseFloat(document.getElementById("r_xEndAngle").value), parseFloat(document.getElementById("r_yEndAngle").value), parseFloat(document.getElementById("r_zEndAngle").value));
  296. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_ROTATE, goAnimationName, selectGeo);
  297. if (document.getElementById("rotateDirectionFlag").selectedIndex === 0) {
  298. goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.ClockWise;//顺时针旋转
  299. } else {
  300. goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.AntiClockWise;//逆时针旋转
  301. }
  302. goAnimation.startAngle = startAngle;
  303. goAnimation.endAngle = endAngle;
  304. goAnimation.startTime = parseFloat(document.getElementById("r_startTime").value);//开始时间
  305. goAnimation.duration = parseFloat(document.getElementById("r_duration").value);//播放时长
  306. if (document.getElementById("r_repeatFlag").selectedIndex === 0) {
  307. goAnimation.repeat = false;
  308. } else {
  309. goAnimation.repeat = true;
  310. }
  311. }
  312. function createScaleAnimation() {
  313. preAnimation();
  314. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_SCALE, goAnimationName, selectGeo);
  315. goAnimation.startScale = parseFloat(document.getElementById("s_startScale").value);
  316. goAnimation.endScale = parseFloat(document.getElementById("s_endScale").value);
  317. goAnimation.startTime = parseFloat(document.getElementById("s_startTime").value);//开始时间
  318. goAnimation.duration = parseFloat(document.getElementById("s_duration").value);//播放时长
  319. if (document.getElementById("s_repeatFlag").selectedIndex === 0) {
  320. goAnimation.repeat = false;
  321. } else {
  322. goAnimation.repeat = true;
  323. }
  324. }
  325. function createShowAnimation() {
  326. preAnimation();
  327. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_SHOW, goAnimationName, selectGeo);
  328. if (document.getElementById("finalDisplayFlag").selectedIndex === 0) {
  329. goAnimation.finalDisplay = false;
  330. } else {
  331. goAnimation.finalDisplay = true;
  332. }
  333. if (document.getElementById("showEffectFlag").selectedIndex === 0) {
  334. goAnimation.showEffect = false;
  335. } else {
  336. goAnimation.showEffect = true;
  337. }
  338. goAnimation.startTime = parseFloat(document.getElementById("show_startTime").value);//开始时间
  339. goAnimation.duration = parseFloat(document.getElementById("show_duration").value);//播放时长
  340. if (document.getElementById("show_repeatFlag").selectedIndex === 0) {
  341. goAnimation.repeat = false;
  342. } else {
  343. goAnimation.repeat = true;
  344. }
  345. }
  346. function createWayAnimation() {
  347. preAnimation();
  348. var goAnimation = animationManager.createGOAnimation(SuperMap3D.GOAnimationType.ANIMATION_WAY, goAnimationName, selectGeo);
  349. if (document.getElementById("tangentDirectionFlag").selectedIndex === 0) {
  350. goAnimation.tangentDirection = false;
  351. } else {
  352. goAnimation.tangentDirection = true;
  353. }
  354. if (document.getElementById("showPathFlag").selectedIndex === 0) {
  355. goAnimation.showPath = 0;
  356. } else {
  357. goAnimation.showPath = 1;
  358. }
  359. if (document.getElementById("pathTypeFlag").selectedIndex === 0) {
  360. goAnimation.pathType = false;
  361. } else {
  362. goAnimation.pathType = true;
  363. }
  364. goAnimation.pathWidth = parseFloat(document.getElementById("pathWidth").value);
  365. var wayLineColor = colorConvert(document.getElementById("wayLineColor").value);
  366. goAnimation.pathColor = wayLineColor;
  367. goAnimation.wayPoints = point3dsArray;
  368. goAnimation.startTime = parseFloat(document.getElementById("w_startTime").value);//开始时间
  369. goAnimation.duration = parseFloat(document.getElementById("w_duration").value);//播放时长
  370. if (document.getElementById("w_repeatFlag").selectedIndex === 0) {
  371. goAnimation.repeat = false;
  372. } else {
  373. goAnimation.repeat = true;
  374. }
  375. handlerLine.clear();
  376. }
  377. function MoveSymbol(pts) {
  378. var oldCentre = new SuperMap3D.PlotPoint3D(13.0516048702177, 47.8283304498449, 0);
  379. var newCentre = new SuperMap3D.PlotPoint3D(121.57979595322007, 38.8818637949741, 0);
  380. for (var i = 0; i < pts.length; i++) {
  381. pts[i].x = newCentre.x + (pts[i].x - oldCentre.x);
  382. pts[i].y = newCentre.y + (pts[i].y - oldCentre.y);
  383. pts[i].z = 10;
  384. }
  385. return pts;
  386. }
  387. function play() {
  388. animationManager.play();
  389. }
  390. function pause() {
  391. animationManager.pause();
  392. }
  393. function stop() {
  394. animationManager.stop();
  395. }
  396. function reset() {
  397. animationManager.reset();
  398. }
  399. function deleteSelectedFeaturesAnimation() {
  400. if (0 === animationManager.getAllAnimations().length) {
  401. return;
  402. }
  403. var selectGeo = plottingLayer.selectedFeature;
  404. animationManager.removeGOAnimationByFeature(selectGeo);
  405. }
  406. function deleteAllAnimation() {
  407. if (0 === animationManager.getAllAnimations().length) {
  408. return;
  409. }
  410. animationManager.reset();
  411. animationManager.removeAllGOAnimation();
  412. }
  413. //删除指定标号
  414. function deleteSeleGeo() {
  415. plottingLayer.removeGeoGraphicObject(plottingLayer._selectedFeature);
  416. }
  417. function lineColorChanges() {
  418. if (document.getElementById("lineColorAnimationFlag").selectedIndex === 0) {
  419. return false;
  420. } else {
  421. return true;
  422. }
  423. }
  424. function colorConvert(colorString) {
  425. var red = parseInt(colorString.slice(1, 3), 16) / 255;
  426. var green = parseInt(colorString.slice(3, 5), 16) / 255;
  427. var blue = parseInt(colorString.slice(5, 7), 16) / 255;
  428. var color = new SuperMap3D.Color( red, green, blue, 1);
  429. return color;
  430. }
  431. function colorGeometryToString(color) {
  432. var value = color.value;
  433. var red, green, blue;
  434. if (undefined !== value && null !== value) {
  435. red = value[2] > 15 ? value[2].toString(16) : "0" + value[2].toString(16);
  436. green = value[1] > 15 ? value[2].toString(16) : "0" + value[1].toString(16);
  437. blue = value[0] > 15 ? value[0].toString(16) : "0" + value[0].toString(16);
  438. } else {
  439. red = color.red * 255;
  440. red = red > 15 ? red.toString(16) : "0" + red;
  441. green = color.green * 255;
  442. green = green > 15 ? green.toString(16) : "0" + green;
  443. blue = color.blue * 255;
  444. blue = blue > 15 ? blue.toString(16) : "0" + blue;
  445. }
  446. return "#" + red + green + blue;
  447. };