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 | 359 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 312 insertions(+), 47 deletions(-)
diff --git a/lib/map.js b/lib/map.js
index 5bf7a0d..a643493 100644
--- a/lib/map.js
+++ b/lib/map.js
@@ -50,18 +50,49 @@
this._map.remove(views);
},
- addMarkers(markers) {
+ addElasticMarkers(markers) {
+ const zoomStyleMapping = {
+ 14: 0,
+ 15: 0,
+ 16: 0,
+ 17: 0,
+ 18: 0,
+ 19: 0,
+ 20: 0,
+ };
const mList = [];
markers.forEach((m) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(m.lng, m.lat), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
+ let name = m.name;
+ if (m.name.length > 9) {
+ const i = m.name.length / 2;
+ const str1 = m.name.slice(0, i + 1);
+ const str2 = m.name.slice(i + 1, m.name.length);
+ name = `${str1}<br />${str2}`;
+ }
+ var marker = new AMap.ElasticMarker({
title: m.name,
- offset: new AMap.Pixel(-13, -12),
- // anchor: 'center',
- icon: new AMap.Icon({
- image: './asset/mipmap/c_level_no.png',
- // imageSize: [12, 12],
- }),
+ zoom: [14, 20],
+ position: new AMap.LngLat(m.lng, m.lat),
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/scene.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 14, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1.4, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${name}</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
});
mList.push(marker);
});
@@ -180,14 +211,14 @@
// 鍒涘缓鏍峰紡瀵硅薄
var styleObject = {
- url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
+ url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
// url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
anchor: new AMap.Pixel(5, 5), // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
};
var massMarks = new AMap.MassMarks(data, {
zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
- zooms: [3, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
+ zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
style: styleObject, // 璁剧疆鏍峰紡瀵硅薄
});
massMarks.on('click', (event) => {
@@ -207,11 +238,10 @@
this.drawSector3(lnglats[i], windDir, windSpeed);
// 2. 缁樺埗瀵硅瘽妗�
- const window = DialogUtil.createInfoWindow(fDatas, i, () => {
+ DialogUtil.openNewWindow(fDatas, i, MapUtil._map, lnglats[i], () => {
// 绉婚櫎鎵囧舰鍖哄煙
- this.clearSector3();
+ // this.clearSector3();
});
- window.open(MapUtil._map, lnglats[i]);
// 3. 瓒嬪娍鍥捐烦杞畾浣�
const progress = FChart.locate(
@@ -289,10 +319,11 @@
_sector: undefined,
_sectorViews3: {},
drawSector3: function (lnglat, windDir, windSpeed) {
- // this._map.remove(MapUtil._sectorViews)
- // MapUtil._sectorViews = []
if (windSpeed > 10) {
return;
+ }
+ if (this._sector != undefined) {
+ this.clearSector3();
}
var sector = new AMap.Object3D.Mesh();
@@ -364,6 +395,207 @@
geometry.faces.push(index + 3, index + 4, index + 5);
geometry.faces.push(index + 4, index + 5, index + 6);
}
+ this._object3Dlayer.add(sector);
+ this._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鍒嗛挓鎵囧舰
+ 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,
+ });
+ MapUtil._sectorViews3['text10'] = text15;
+ 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,
+ });
+ MapUtil._sectorViews3['textM'] = textM;
+ MapUtil._map.add(MapUtil._sectorViews3['text10']);
+ MapUtil._map.add(MapUtil._sectorViews3['textM']);
+
+ //5鍒嗛挓鎵囧舰
+ pList = list2;
+ path = [
+ [pList[0].lng, pList[0].lat],
+ [pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
+ ];
+
+ 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,
+ });
+ MapUtil._sectorViews3['text5'] = text5;
+ 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,
+ });
+ MapUtil._sectorViews3['textM5'] = textM5;
+ MapUtil._map.add(MapUtil._sectorViews3['textM5']);
+ MapUtil._map.add(MapUtil._sectorViews3['text5']);
+
+ // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣
+ 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);
@@ -374,42 +606,53 @@
distance = distance.toFixed(0);
distance2 = distance2.toFixed(0);
//10鍒嗛挓鎵囧舰
- if (MapUtil._sectorViews3['text10'] == undefined) {
+ if (MapUtil._sectorViews3['text10-a'] == undefined) {
var text15 = new AMap.Text({
text: '10鍒嗛挓',
position: list[2],
- // animation: "AMAP_ANIMATION_DROP"
+ 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._sectorViews3['text10'] = text15;
+ MapUtil._map.add(text15);
+ MapUtil._sectorViews3['text10-a'] = text15;
var textM = new AMap.Text({
text: distance + 'm',
position: list[1],
- // animation: "AMAP_ANIMATION_DROP"
+ 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._sectorViews3['textM'] = textM;
+ MapUtil._map.add(textM);
+ MapUtil._sectorViews3['text10M-a'] = textM;
} else {
- MapUtil._sectorViews3['text10'].setPosition(list[2]);
- MapUtil._sectorViews3['textM'].setPosition(list[1]);
- MapUtil._sectorViews3['textM'].setText(distance + 'm');
+ MapUtil._sectorViews3['text10-a'].setPosition(list[2]);
+ MapUtil._sectorViews3['text10M-a'].setPosition(list[1]);
+ MapUtil._sectorViews3['text10M-a'].setText(distance + 'm');
}
- MapUtil._map.add(MapUtil._sectorViews3['text10']);
- MapUtil._map.add(MapUtil._sectorViews3['textM']);
-
- // 缂╂斁鍦板浘鍒板悎閫傜殑瑙嗛噹绾у埆
- // if (animation != false) {
- // MapUtil._map.setFitView([bezierCurve, line1, line2])
- // }
//5鍒嗛挓鎵囧舰
-
pList = list2;
- // MapUtil._map.setCenter(pList[0])
path = [
[pList[0].lng, pList[0].lat],
[pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
];
- if (MapUtil._sectorViews3['textM5'] == undefined) {
+ if (MapUtil._sectorViews3['textM5-a'] == undefined) {
var bezierCurve = new AMap.BezierCurve({
path: path,
// isOutline: true,
@@ -432,26 +675,43 @@
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._sectorViews3['text5'] = text5;
+ 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._sectorViews3['textM5'] = textM5;
+ MapUtil._map.add(textM5);
+ MapUtil._sectorViews3['textM5-a'] = textM5;
} else {
// MapUtil._sectorViews3['bezierCurve'].setPath(path)
- MapUtil._sectorViews3['text5'].setPosition(pList[1]);
- MapUtil._sectorViews3['textM5'].setPosition(pList[0]);
- MapUtil._sectorViews3['textM5'].setText(distance2 + 'm');
+ MapUtil._sectorViews3['text5-a'].setPosition(pList[1]);
+ MapUtil._sectorViews3['textM5-a'].setPosition(pList[0]);
+ MapUtil._sectorViews3['textM5-a'].setText(distance2 + 'm');
}
- MapUtil._map.add(MapUtil._sectorViews3['textM5']);
- MapUtil._map.add(MapUtil._sectorViews3['text5']);
-
- // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣
- SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
},
clearSector3: function () {
@@ -459,8 +719,13 @@
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) {
@@ -902,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