From d277d770292df0a1266c07f4773d62edd70e6515 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期一, 13 五月 2024 17:59:16 +0800 Subject: [PATCH] 新增场景标注 --- src/utils/map/animation.js | 87 ++++++++++++++++++++++++++++++------------- 1 files changed, 61 insertions(+), 26 deletions(-) diff --git a/src/utils/map/animation.js b/src/utils/map/animation.js index 551b3bb..ed664c3 100644 --- a/src/utils/map/animation.js +++ b/src/utils/map/animation.js @@ -2,13 +2,16 @@ import calculate from '@/utils/map/calculate'; import Layer from '@/utils/map/3dLayer'; import sector from '@/utils/map/sector'; -import map from '@/utils/map/index_old'; +import { map } from '@/utils/map/index_old'; +import util from '@/utils/map/util'; +import car_driving from '@/assets/mipmap/car_driving.png'; +import boat_driving from '@/assets/mipmap/boat_driving.png'; function MapAnimation() { // 闈炶繛缁潗鏍囩偣鏈�澶ц窛绂�(绫�) this.maxD = 500; // 褰撳墠缁樺埗鐨勭洃娴嬪洜瀛愮被鍨� - this.factorType = 0; + this.factorType; this.factorDatas; // 杞藉叿绫诲瀷 this.vehicleType = 0; // 0: 杞﹁締锛�1锛氭棤浜烘満锛�2锛氭棤浜鸿埞 @@ -18,6 +21,7 @@ this._fps = this.frameAnimation.fps; // 缁樺埗鍥惧舰缂撳瓨 this.moveViews = {}; + this.clear = true; } MapAnimation.prototype = { @@ -113,7 +117,7 @@ var fData2 = factorDatas.getByIndex(i + 1, i + 2); // 璁$畻鍔ㄧ敾杞ㄨ抗 - for (let i = 0; i < count - 1; i++) { + for (let i = 0; i < count; i++) { // path var length = d * (i + 1); if (isNaN(angle)) { @@ -146,26 +150,25 @@ animationData, function (data, index, count) { var length = data.length(); - var start = length - count + 1; + var start = length - count; // 1.鑾峰彇鏁版嵁 var d = data.getByIndex(0, start + index + 1); - var f = d.factor[that.factorType + 1 + '']; + var f = d.factor[that.factorType]; // 2.缁樺埗鍥惧舰 if (length > count || index > 0) { // 3d鍥惧舰 - // var lnglat = d.lnglats_GD[d.lnglats_GD.length - 1]; Layer.drawMesh(d, f); - // MapUtil.drawLine(lnglat) - // 椋庡悜椋庨�� - sector.drawSector(d, start + index); - // if (d.factor['17'] != undefined && d.factor['16'] != undefined) { - // var windDir = d.factor['17'].datas; - // windDir = windDir[windDir.length - 1].factorData; - // var windSpeed = d.factor['16'].datas; - // windSpeed = windSpeed[windSpeed.length - 1].factorData; - // MapUtil.drawSector4(lnglat, windDir, windSpeed); - // } + sector.drawSectorAna(d, start + index); + // 鎵ц鐩戝惉鍑芥暟 + if (typeof that.OnEachFrameCallback === 'function') { + that.OnEachFrameCallback(d, start + index); + } + // 缁樺埗3D鍥惧舰鏃讹紝鏈�灏戦渶瑕�2涓偣鎵嶅彲缁樺埗鍥惧舰 + // 鍥犳姝ゅ绱㈠紩鍙埌鍊掓暟绗簩涓偣灏辩粨鏉燂紝姝ゆ椂鎵ц杩欐浠诲姟缁撴潫鐨勭洃鍚洖璋� + if (typeof that.OnEachTaskEndCallback === 'function') { + that.OnEachTaskEndCallback(d); + } } var pos = d.lnglats_GD[d.lnglats_GD.length - 1]; @@ -207,9 +210,27 @@ this.start(); }, + /** + * 璁剧疆姣忎竴甯х殑鐩戝惉鍑芥暟 + * @param {Function} callback + */ + setOnEachFrameCallback(callback) { + this.OnEachFrameCallback = callback; + }, + + /** + * 璁剧疆姣忎竴娈典换鍔$粨鏉熺殑鐩戝惉鍑芥暟 + * @param {Function} callback + */ + setOnEachTaskEndCallback(callback) { + this.OnEachTaskEndCallback = callback; + }, + /*******************************鍔ㄧ敾浠诲姟閫昏緫 -start ******************************/ start: function () { - sector.clearSector(); + if (this.frameAnimation.isStop) { + sector.clearSector(); + } this.frameAnimation.start(); }, changeSpeed: function (speed) { @@ -221,12 +242,14 @@ stop: function () { this.factorDatas = undefined; this.frameAnimation.addOnNextTasks(undefined); + // this.OnEachFrameCallback = undefined; + // this.OnEachTaskEndCallback = undefined; this.frameAnimation.stop(); + this._clearMap(); }, setOnStopCallback: function (callback) { this.frameAnimation.setOnStopCallback( function () { - this._clearMap(); callback(); }.bind(this) ); @@ -249,6 +272,8 @@ /*******************************鍔ㄧ敾浠诲姟閫昏緫 -end ******************************/ _clearMap: function () { + if (!this.clear) return; + var list = []; for (const key in this.moveViews) { list.push(this.moveViews[key]); @@ -264,16 +289,16 @@ var url; switch (this.vehicleType) { case 0: - url = './asset/mipmap/car_driving.png'; + url = car_driving; break; case 1: - url = './asset/mipmap/car_driving.png'; + url = car_driving; break; case 2: - url = './asset/mipmap/boat_driving.png'; + url = boat_driving; break; default: - url = './asset/mipmap/car_driving.png'; + url = car_driving; break; } // var url = "./asset/mipmap/car_offline.png"; @@ -292,26 +317,33 @@ // break; // } + // eslint-disable-next-line no-undef var icon = new AMap.Icon({ + // eslint-disable-next-line no-undef size: new AMap.Size(60, 30), + // eslint-disable-next-line no-undef imageSize: new AMap.Size(54, 21), image: url // imageOffset: new AMap.Pixel(-16, -16) // 鐩稿浜庡熀鐐圭殑鍋忕Щ浣嶇疆 }); + // eslint-disable-next-line no-undef var car = new AMap.Marker({ icon: icon, position: lnglat, // 鍩虹偣浣嶇疆 + // eslint-disable-next-line no-undef offset: new AMap.Pixel(-20, -15) // 鐩稿浜庡熀鐐圭殑鍋忕Щ浣嶇疆 }); - MapUtil._map.add(car); + map.add(car); this.moveViews['car'] = car; // 鏃堕棿 + // eslint-disable-next-line no-undef var text = new AMap.Text({ text: time, position: lnglat, + // eslint-disable-next-line no-undef offset: new AMap.Pixel(5, 20), style: { 'font-size': '13px', @@ -324,10 +356,10 @@ padding: '0 4px' } }); - MapUtil._map.add(text); + map.add(text); this.moveViews['text'] = text; } else { - MapUtil.setCenter(lnglat); + util.setCenter(lnglat); this.moveViews['car'].setPosition(lnglat); this.moveViews['text'].setPosition(lnglat); this.moveViews['text'].setText(time); @@ -386,4 +418,7 @@ } }; -export { MapAnimation }; +const realTimeMapAnimation = new MapAnimation(); +// realTimeMapAnimation.clear = false; + +export { realTimeMapAnimation, MapAnimation }; -- Gitblit v1.9.3