From 7578c3ff65329b2269f099475eb687e963efac1c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 27 二月 2024 17:13:29 +0800
Subject: [PATCH] 地图3D模型、折线图和表格三者点击联动效果
---
lib/map.js | 202 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 198 insertions(+), 4 deletions(-)
diff --git a/lib/map.js b/lib/map.js
index e4a9a35..a643493 100644
--- a/lib/map.js
+++ b/lib/map.js
@@ -322,7 +322,7 @@
if (windSpeed > 10) {
return;
}
- if (MapUtil._sectorViews3['text10'] != undefined) {
+ if (this._sector != undefined) {
this.clearSector3();
}
@@ -525,13 +525,207 @@
SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
},
+ drawSector4: function (lnglat, windDir, windSpeed) {
+ if (windSpeed > 10) {
+ return;
+ }
+
+ var sector = new AMap.Object3D.Mesh();
+ sector.transparent = true;
+ sector.backOrFront = 'both';
+
+ var unit = 5;
+
+ var sDeg = windDir - this._defaultDeg; //鎵囧舰璧峰瑙掑害锛堜互涓婃柟浣滀负0搴︼級
+ var eDeg = windDir + this._defaultDeg; //鎵囧舰缁撴潫瑙掑害
+
+ var distance = windSpeed * 10 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2 = this._getLatLon(lnglat, distance, sDeg);
+ var lnglat3 = this._getLatLon(lnglat, distance, windDir);
+ var lnglat4 = this._getLatLon(lnglat, distance, eDeg);
+ var list = this.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]);
+
+ var distance2 = windSpeed * 5 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2_2 = this._getLatLon(lnglat, distance2, sDeg);
+ var lnglat2_3 = this._getLatLon(lnglat, distance2, windDir);
+ var lnglat2_4 = this._getLatLon(lnglat, distance2, eDeg);
+ var list2 = this.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]);
+
+ var p0 = this.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 = this._getLatLon(lnglat, distance, angle1);
+ var l2 = this._getLatLon(lnglat, distance, angle2);
+ var l3 = this._getLatLon(lnglat, distance2, angle1);
+ var l4 = this._getLatLon(lnglat, distance2, angle2);
+
+ var coors = this.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);
+
+ // 鍐呮祴鎵囧舰棰滆壊
+ 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 (this._sector != undefined) {
+ this._object3Dlayer.remove(this._sector);
+ }
+ this._object3Dlayer.add(sector);
+ this._sector = sector;
+
+ distance = distance.toFixed(0);
+ distance2 = distance2.toFixed(0);
+ //10鍒嗛挓鎵囧舰
+ if (MapUtil._sectorViews3['text10-a'] == undefined) {
+ var text15 = new AMap.Text({
+ text: '10鍒嗛挓',
+ position: list[2],
+ 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',
+ },
+ });
+ MapUtil._map.add(text15);
+ MapUtil._sectorViews3['text10-a'] = text15;
+ var textM = new AMap.Text({
+ text: distance + 'm',
+ position: list[1],
+ 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',
+ },
+ });
+ MapUtil._map.add(textM);
+ MapUtil._sectorViews3['text10M-a'] = textM;
+ } else {
+ MapUtil._sectorViews3['text10-a'].setPosition(list[2]);
+ MapUtil._sectorViews3['text10M-a'].setPosition(list[1]);
+ MapUtil._sectorViews3['text10M-a'].setText(distance + 'm');
+ }
+
+ //5鍒嗛挓鎵囧舰
+ pList = list2;
+ path = [
+ [pList[0].lng, pList[0].lat],
+ [pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
+ ];
+
+ if (MapUtil._sectorViews3['textM5-a'] == undefined) {
+ var bezierCurve = new AMap.BezierCurve({
+ path: path,
+ // isOutline: true,
+ // outlineColor: '#ffeeff',
+ borderWeight: 1,
+ strokeColor: '#ffeeff',
+ strokeOpacity: 1,
+ // strokeWeight: 6,
+ // 绾挎牱寮忚繕鏀寔 'dashed'
+ strokeStyle: 'solid',
+ // strokeStyle鏄痙ashed鏃舵湁鏁�
+ strokeDasharray: [10, 10],
+ lineJoin: 'round',
+ lineCap: 'round',
+ zIndex: 50,
+ });
+ // bezierCurve.setMap(MapUtil._map)
+ // MapUtil._sectorViews3['bezierCurve'] = bezierCurve
+
+ var text5 = new AMap.Text({
+ text: '5鍒嗛挓',
+ position: pList[1],
+ 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',
+ },
+ // animation: "AMAP_ANIMATION_DROP"
+ });
+ MapUtil._map.add(text5);
+ MapUtil._sectorViews3['text5-a'] = text5;
+ var textM5 = new AMap.Text({
+ text: distance2 + 'm',
+ position: pList[0],
+ 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',
+ },
+ // animation: "AMAP_ANIMATION_DROP"
+ });
+ MapUtil._map.add(textM5);
+ MapUtil._sectorViews3['textM5-a'] = textM5;
+ } else {
+ // MapUtil._sectorViews3['bezierCurve'].setPath(path)
+ MapUtil._sectorViews3['text5-a'].setPosition(pList[1]);
+ MapUtil._sectorViews3['textM5-a'].setPosition(pList[0]);
+ MapUtil._sectorViews3['textM5-a'].setText(distance2 + 'm');
+ }
+ },
+
clearSector3: function () {
var list = [];
for (const key in this._sectorViews3) {
list.push(this._sectorViews3[key]);
}
- this.removeViews(list);
- this._object3Dlayer.remove(this._sector);
+ if (list.length > 0) {
+ this.removeViews(list);
+ this._sectorViews3 = {};
+ }
+ if (this._sector) {
+ this._object3Dlayer.remove(this._sector);
+ }
},
parse2LngLat: function (lnglats) {
@@ -973,7 +1167,7 @@
*/
_getScale(minH, maxH) {
var zoom = MapUtil._map.getZoom();
- console.log(`zoom: ${zoom}`);
+ // console.log(`zoom: ${zoom}`);
if (this._lastZoom == -1) {
this._lastZoom = zoom;
} else if (this._lastZoom <= 8) {
--
Gitblit v1.9.3