From 75aeb4e63339b60f9559af984c7d9f87a7cba24a Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 09 五月 2024 17:40:47 +0800
Subject: [PATCH] 轨迹动画和任务管理
---
src/utils/map/sector.js | 446 +++++++++++++++++++++++++++++--------------------------
1 files changed, 232 insertions(+), 214 deletions(-)
diff --git a/src/utils/map/sector.js b/src/utils/map/sector.js
index 846eff2..0e3ced6 100644
--- a/src/utils/map/sector.js
+++ b/src/utils/map/sector.js
@@ -1,232 +1,250 @@
import { map, object3Dlayer } from './index_old';
import calculate from './calculate';
+import imgLocation from '@/assets/mipmap/location.png';
var _defaultDeg = 30,
_sector = undefined,
- _sectorViews = {};
+ _sectorViews = new Map(),
+ // 鍔ㄧ敾杞ㄨ抗
+ _sectorViewsAna = new Map();
-function clearSector() {
- var list = [];
- for (const key in _sectorViews) {
- list.push(_sectorViews[key]);
+const zoomStyleMapping = {
+ 14: 0,
+ 15: 0,
+ 16: 0,
+ 17: 0,
+ 18: 0,
+ 19: 0,
+ 20: 0
+};
+
+function sectorParams(fDatas, i) {
+ const lnglat = fDatas.lnglats_GD[i];
+ let windDir = fDatas.factor[17].datas[i].factorData;
+ let windSpeed = fDatas.factor[16].datas[i].factorData;
+ if (!windDir) windDir = 0;
+ if (!windSpeed) windSpeed = 0;
+
+ // if (windSpeed > 10) {
+ // return;
+ // }
+
+ var sDeg = windDir - _defaultDeg; //鎵囧舰璧峰瑙掑害锛堜互涓婃柟浣滀负0搴︼級
+ // sDeg = sDeg < 0 ? sDeg + 360 : sDeg
+ var eDeg = windDir + _defaultDeg; //鎵囧舰缁撴潫瑙掑害
+ // eDeg = eDeg < 0 ? eDeg + 360 : eDeg
+
+ var distance = windSpeed * 10 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2 = calculate.getLatLon(lnglat, distance, sDeg);
+ var lnglat3 = calculate.getLatLon(lnglat, distance, windDir);
+ var lnglat4 = calculate.getLatLon(lnglat, distance, eDeg);
+ var list = calculate.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]);
+
+ var distance2 = windSpeed * 5 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2_2 = calculate.getLatLon(lnglat, distance2, sDeg);
+ var lnglat2_3 = calculate.getLatLon(lnglat, distance2, windDir);
+ var lnglat2_4 = calculate.getLatLon(lnglat, distance2, eDeg);
+ var list2 = calculate.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]);
+
+ distance = distance.toFixed(0);
+ distance2 = distance2.toFixed(0);
+
+ return { sDeg, eDeg, lnglat, distance, distance2, list, list2 };
+}
+
+/**
+ * 鍙缉鏀剧殑鏍囪
+ * 鏃犳硶淇敼position锛堝畼缃戞湭鎵惧埌鐩稿叧api锛�
+ */
+function elasticMarker(position, content) {
+ // eslint-disable-next-line no-undef
+ return new AMap.ElasticMarker({
+ zoom: [14, 20],
+ position: position,
+ styles: [
+ {
+ icon: {
+ img: imgLocation,
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1 //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: content,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15
+ }
+ }
+ ],
+ zoomStyleMapping: zoomStyleMapping
+ });
+}
+
+/**
+ * 鏂囨湰鏍囪
+ * 鍙慨鏀筽osition
+ */
+function textMaker(position, text) {
+ // eslint-disable-next-line no-undef
+ return new AMap.Text({
+ text: text,
+ position: position,
+ style: {
+ 'font-size': '13px',
+ 'text-align': 'center',
+ color: 'white',
+ 'background-color': 'transparent',
+ 'text-shadow': 'black 2px 2px 2px',
+ 'border-radius': '2px',
+ border: '0px',
+ padding: '4px'
+ }
+ });
+}
+
+function drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2) {
+ // eslint-disable-next-line no-undef
+ var sector = new AMap.Object3D.Mesh();
+ sector.transparent = true;
+ sector.backOrFront = 'both';
+
+ var unit = 5;
+
+ var p0 = calculate.lngLatToGeodeticCoord([lnglat])[0];
+ var geometry = sector.geometry;
+
+ var count = distance / unit;
+ var unitDeg = (eDeg - sDeg) / count;
+
+ for (let i = 0; i < count; i++) {
+ var angle1 = sDeg + unitDeg * i;
+ var angle2 = sDeg + unitDeg * (i + 1);
+
+ var l1 = calculate.getLatLon(lnglat, distance, angle1);
+ var l2 = calculate.getLatLon(lnglat, distance, angle2);
+ var l3 = calculate.getLatLon(lnglat, distance2, angle1);
+ var l4 = calculate.getLatLon(lnglat, distance2, angle2);
+
+ var coors = calculate.lngLatToGeodeticCoord([l1, l2, l3, l4]);
+ l1 = coors[0];
+ l2 = coors[1];
+ l3 = coors[2];
+ l4 = coors[3];
+
+ // 鍐呮祴鎵囧舰
+ geometry.vertices.push(p0.x, p0.y, 0);
+ geometry.vertices.push(l3.x, l3.y, 0);
+ geometry.vertices.push(l4.x, l4.y, 0);
+ // 澶栦晶鎵囧舰
+ geometry.vertices.push(l3.x, l3.y, 0);
+ geometry.vertices.push(l4.x, l4.y, 0);
+ geometry.vertices.push(l1.x, l1.y, 0);
+ geometry.vertices.push(l2.x, l2.y, 0);
+ // console.log(l3.x + ',' + l3.y + ' | ' + l1.x + ',' + l1.y);
+
+ // 鍐呮祴鎵囧舰棰滆壊
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ //澶栦晶鎵囧舰棰滆壊
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+
+ var index = i * 7;
+ geometry.faces.push(index, index + 1, index + 2);
+ geometry.faces.push(index + 3, index + 4, index + 5);
+ geometry.faces.push(index + 4, index + 5, index + 6);
}
- if (list.length > 0) {
- map.remove(list);
- _sectorViews = {};
+ object3Dlayer.add(sector);
+ _sector = sector;
+}
+
+function drawTextMaker(list, list2, distance, distance2) {
+ //10鍒嗛挓鎵囧舰
+ const a = _sectorViews.get('text10-t');
+ if (a == undefined) {
+ const text10t = textMaker(list[2], '10鍒嗛挓');
+ _sectorViews.set('text10-t', text10t);
+ const textM10t = textMaker(list[1], distance + 'm');
+ _sectorViews.set('textM10-t', textM10t);
+ map.add([text10t, textM10t]);
+ } else {
+ _sectorViews.get('text10-t').setPosition(list[2]);
+ _sectorViews.get('textM10-t').setPosition(list[1]);
+ _sectorViews.get('textM10-t').setText(distance + 'm');
}
- if (_sector) {
- object3Dlayer.remove(_sector);
+ //5鍒嗛挓鎵囧舰
+ const b = _sectorViews.get('text5-t');
+ if (b == undefined) {
+ const text5t = textMaker(list2[1], '5鍒嗛挓');
+ _sectorViews.set('text5-t', text5t);
+ const textM5t = textMaker(list2[0], distance2 + 'm');
+ _sectorViews.set('textM5-t', textM5t);
+ map.add([text5t, textM5t]);
+ } else {
+ _sectorViews.get('text5-t').setPosition(list2[1]);
+ _sectorViews.get('textM5-t').setPosition(list2[0]);
+ _sectorViews.get('textM5-t').setText(distance2 + 'm');
}
}
+function drawElasticMarker(list, list2, distance, distance2) {
+ //10鍒嗛挓鎵囧舰
+ const text10 = elasticMarker(list[2], '<div>10鍒嗛挓</div>');
+ _sectorViews.set('text10', text10);
+ const textM = elasticMarker(list[1], `<div>${distance}m</div>`);
+ _sectorViews.set('textM10', textM);
+ map.add([text10, textM]);
+
+ //5鍒嗛挓鎵囧舰
+ const text5 = elasticMarker(list2[1], '<div>5鍒嗛挓</div>');
+ _sectorViews.set('text5', text5);
+ const textM5 = elasticMarker(list2[0], `<div>${distance2}m</div>`);
+ _sectorViews.set('textM5', textM5);
+ map.add([text5, textM5]);
+}
+
export default {
+ clearSector() {
+ var list = [];
+ for (const iterator of _sectorViews) {
+ list.push(iterator[1]);
+ }
+ for (const iterator of _sectorViewsAna) {
+ list.push(iterator[1]);
+ }
+ if (list.length > 0) {
+ map.remove(list);
+ _sectorViews.clear();
+ }
+ this.clearSectorMesh();
+ },
+ clearSectorMesh() {
+ if (_sector) {
+ object3Dlayer.remove(_sector);
+ }
+ },
drawSector(fDatas, i) {
- const lnglat = fDatas.lnglats_GD[i];
- let windDir = fDatas.factor[17].datas[i].factorData;
- let windSpeed = fDatas.factor[16].datas[i].factorData;
- if (!windDir) windDir = 0;
- if (!windSpeed) windSpeed = 0;
-
- if (windSpeed > 10) {
- return;
- }
if (_sector != undefined) {
- clearSector();
+ this.clearSector();
}
+ const { sDeg, eDeg, lnglat, distance, distance2, list, list2 } =
+ sectorParams(fDatas, i);
+ drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2);
+ drawElasticMarker(list, list2, distance, distance2);
+ },
- // eslint-disable-next-line no-undef
- var sector = new AMap.Object3D.Mesh();
- sector.transparent = true;
- sector.backOrFront = 'both';
-
- var unit = 5;
-
- var sDeg = windDir - _defaultDeg; //鎵囧舰璧峰瑙掑害锛堜互涓婃柟浣滀负0搴︼級
- // sDeg = sDeg < 0 ? sDeg + 360 : sDeg
- var eDeg = windDir + _defaultDeg; //鎵囧舰缁撴潫瑙掑害
- // eDeg = eDeg < 0 ? eDeg + 360 : eDeg
-
- var distance = windSpeed * 10 * 60; //鍗婂緞(椋庨��*鏃堕棿)
- var lnglat2 = calculate.getLatLon(lnglat, distance, sDeg);
- var lnglat3 = calculate.getLatLon(lnglat, distance, windDir);
- var lnglat4 = calculate.getLatLon(lnglat, distance, eDeg);
- var list = calculate.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]);
-
- var distance2 = windSpeed * 5 * 60; //鍗婂緞(椋庨��*鏃堕棿)
- var lnglat2_2 = calculate.getLatLon(lnglat, distance2, sDeg);
- var lnglat2_3 = calculate.getLatLon(lnglat, distance2, windDir);
- var lnglat2_4 = calculate.getLatLon(lnglat, distance2, eDeg);
- var list2 = calculate.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]);
-
- var p0 = calculate.lngLatToGeodeticCoord([lnglat])[0];
- var geometry = sector.geometry;
-
- var count = distance / unit;
- var unitDeg = (eDeg - sDeg) / count;
- for (let i = 0; i < count; i++) {
- var angle1 = sDeg + unitDeg * i;
- var angle2 = sDeg + unitDeg * (i + 1);
-
- var l1 = calculate.getLatLon(lnglat, distance, angle1);
- var l2 = calculate.getLatLon(lnglat, distance, angle2);
- var l3 = calculate.getLatLon(lnglat, distance2, angle1);
- var l4 = calculate.getLatLon(lnglat, distance2, angle2);
-
- var coors = calculate.lngLatToGeodeticCoord([l1, l2, l3, l4]);
- l1 = coors[0];
- l2 = coors[1];
- l3 = coors[2];
- l4 = coors[3];
-
- // 鍐呮祴鎵囧舰
- geometry.vertices.push(p0.x, p0.y, 0);
- geometry.vertices.push(l3.x, l3.y, 0);
- geometry.vertices.push(l4.x, l4.y, 0);
- // 澶栦晶鎵囧舰
- geometry.vertices.push(l3.x, l3.y, 0);
- geometry.vertices.push(l4.x, l4.y, 0);
- geometry.vertices.push(l1.x, l1.y, 0);
- geometry.vertices.push(l2.x, l2.y, 0);
- // console.log(l3.x + ',' + l3.y + ' | ' + l1.x + ',' + l1.y);
-
- // 鍐呮祴鎵囧舰棰滆壊
- geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
- geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
- geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
- //澶栦晶鎵囧舰棰滆壊
- geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
- geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
- geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
- geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
-
- var index = i * 7;
- geometry.faces.push(index, index + 1, index + 2);
- geometry.faces.push(index + 3, index + 4, index + 5);
- geometry.faces.push(index + 4, index + 5, index + 6);
- }
- object3Dlayer.add(sector);
- _sector = sector;
-
- distance = distance.toFixed(0);
- distance2 = distance2.toFixed(0);
- const zoomStyleMapping = {
- 14: 0,
- 15: 0,
- 16: 0,
- 17: 0,
- 18: 0,
- 19: 0,
- 20: 0
- };
- //10鍒嗛挓鎵囧舰
- // eslint-disable-next-line no-undef
- var text15 = new AMap.ElasticMarker({
- zoom: [14, 20],
- position: list[2],
- styles: [
- {
- icon: {
- img: './asset/mipmap/location.png',
- size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
- ancher: [8, 16], //閿氱偣
- fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
- scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
- maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
- minScale: 1 //鏈�灏忔斁澶ф瘮渚�
- },
- label: {
- content: '<div>10鍒嗛挓</div>',
- offset: [-35, 0],
- position: 'BM',
- minZoom: 15
- }
- }
- ],
- zoomStyleMapping: zoomStyleMapping
- });
- _sectorViews['text10'] = text15;
- // eslint-disable-next-line no-undef
- var textM = new AMap.ElasticMarker({
- zoom: [14, 20],
- position: list[1],
- styles: [
- {
- icon: {
- img: './asset/mipmap/location.png',
- size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
- ancher: [8, 16], //閿氱偣
- fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
- scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
- maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
- minScale: 1 //鏈�灏忔斁澶ф瘮渚�
- },
- label: {
- content: `<div>${distance}m</div>`,
- offset: [-35, 0],
- position: 'BM',
- minZoom: 15
- }
- }
- ],
- zoomStyleMapping: zoomStyleMapping
- });
- _sectorViews['textM'] = textM;
- map.add(_sectorViews['text10']);
- map.add(_sectorViews['textM']);
-
- //5鍒嗛挓鎵囧舰
- let pList = list2;
- // eslint-disable-next-line no-undef
- var text5 = new AMap.ElasticMarker({
- position: pList[1],
- styles: [
- {
- icon: {
- img: './asset/mipmap/location.png',
- size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
- ancher: [8, 16], //閿氱偣
- fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
- scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
- maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
- minScale: 1 //鏈�灏忔斁澶ф瘮渚�
- },
- label: {
- content: `<div>5鍒嗛挓</div>`,
- offset: [-35, 0],
- position: 'BM',
- minZoom: 15
- }
- }
- ],
- zoomStyleMapping: zoomStyleMapping
- });
- _sectorViews['text5'] = text5;
- // eslint-disable-next-line no-undef
- var textM5 = new AMap.ElasticMarker({
- position: pList[0],
- styles: [
- {
- icon: {
- img: './asset/mipmap/location.png',
- size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
- ancher: [8, 16], //閿氱偣
- fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
- scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
- maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
- minScale: 1 //鏈�灏忔斁澶ф瘮渚�
- },
- label: {
- content: `<div>${distance2}m</div>`,
- offset: [-35, 0],
- position: 'BM',
- minZoom: 15
- }
- }
- ],
- zoomStyleMapping: zoomStyleMapping
- });
- _sectorViews['textM5'] = textM5;
- map.add(_sectorViews['textM5']);
- map.add(_sectorViews['text5']);
+ drawSectorAna(fDatas, i) {
+ this.clearSectorMesh();
+ const { sDeg, eDeg, lnglat, distance, distance2, list, list2 } =
+ sectorParams(fDatas, i);
+ drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2);
+ drawTextMaker(list, list2, distance, distance2);
}
};
--
Gitblit v1.9.3