提交

src/pages/bigScreen/components/Map-l7.jsx

@@ -15,14 +15,26 @@ import "../../../assets/style/BigScreenHome.css"
 
 
 function Map(prop) {
-    let $canvas = undefined,
+    let anchorLayer = undefined,
+        textLayer = undefined,
         timeHome = undefined,
+        $canvas = undefined,
+        scene = undefined,
         source = [],
         index = 0,
-        anchorLayer = undefined,
-        textLayer = undefined,
         li = [],
-        scene = undefined;
+        cli = [
+            '#87CEFA',
+            '#00BFFF',
+            '#7FFFAA',
+            '#00FF7F',
+            '#32CD32',
+            '#F0E68C',
+            '#FFD700',
+            '#FF7F50',
+            '#FF6347',
+            '#FF0000'
+        ];
 
     // TODO: 高德地图
     /***
@@ -55,7 +67,7 @@ function Map(prop) {
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 30,
+                pitch: 40,
                 style: 'blank',
                 zoom: 5.6,
                 rotateEnable: true,
@@ -76,6 +88,7 @@ function Map(prop) {
             // });
             getMapfull().then(data => {
                 li = data && data.features && data.features.length ? data.features : [];
+                console.log(prop.li)
                 for (let i = 0; i < li.length; i++) {
                     const v = li[i].properties || { center: [] };
                     const Data = {
@@ -86,7 +99,6 @@ function Map(prop) {
                     };
                     source.push(Data);
                 }
-                console.log(source[index])
                 const layer = new PointLayer()
                     .source(source, {
                         parser: {
@@ -129,21 +141,7 @@ function Map(prop) {
                     .source(data)
                     .size(150000)
                     .shape('extrude')
-                    .color("name", [
-                        '#87CEFA',
-                        '#00BFFF',
-
-                        '#7FFFAA',
-                        '#00FF7F',
-                        '#32CD32',
-
-                        '#F0E68C',
-                        '#FFD700',
-
-                        '#FF7F50',
-                        '#FF6347',
-                        '#FF0000'
-                    ])
+                    .color("name", cli)
                     .style({
                         heightfixed: true,
                         pickLight: true,
@@ -152,7 +150,7 @@ function Map(prop) {
                     });
 
                 // 水波
-                const waveLayer = new PointLayer({ zIndex: 4, blend: 'normal' })
+                const waveLayer = new PointLayer({ zIndex: 3, blend: 'normal' })
                     .source(source,
                         {
                             parser: {
@@ -163,23 +161,19 @@ function Map(prop) {
                         }
                     )
                     .shape('circle')
-                    .color('rgb(22, 119, 255)')
-                    .size('size', v => v)
+                    .color("name", cli)
+                    .size('size', v => {
+                        let p = v / source[0].size;
+                        // p < 0.4 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                        return p * 100
+                    })
                     .animate(true)
-                    .style({
-                        raisingHeight: 10000,
-                        unit: 'meter'
-                    });
+                    .style({});
 
                 // 柱子
                 const barLayer = new PointLayer({ zIndex: 2, depth: false })
                     .source(
-                        [
-                            { lng: 113, lat: 29, size: 10000 },
-                            { lng: 113.5, lat: 29.5, size: 30000 },
-
-                            { lng: 110.23681640625, lat: 29.64509464986076, size: 74020.50373907911 }, { lng: 115.01586914062499, lat: 26.88777988202911, size: 22908.885529976185 }, { lng: 111.181640625, lat: 28.724313406473463, size: 73359.37302978932 }, { lng: 112.686767578125, lat: 29.257648503615542, size: 18500.90838085843 }, { lng: 114.664306640625, lat: 28.98892237190413, size: 20293.183968726793 }, { lng: 113.90075683593749, lat: 28.17855984939698, size: 18051.412077639496 }, { lng: 111.51123046875, lat: 27.45466493898314, size: 37645.94186119526 }, { lng: 110.67626953125, lat: 28.004101830368654, size: 4214.588023703825 }, { lng: 114.43359375, lat: 29.477861195816843, size: 61722.01580332115 }, { lng: 110.445556640625, lat: 26.96124577052697, size: 70806.75519747598 }, { lng: 113.75244140624999, lat: 27.88278388425912, size: 70930.24993464859 }
-                        ],
+                        source,
                         {
                             parser: {
                                 type: 'json',
@@ -189,22 +183,27 @@ function Map(prop) {
                         }
                     )
                     .shape('cylinder')
-                    .color('rgb(22, 119, 255)')
-                    .size('size', v => [5, 5, v / 350])
+                    .color("name", cli)
+                    .size('size', v => {
+                        let p = v / source[0].size;
+                        // p < 0.4 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                        return [5, 5, p * 300]
+                    })
                     .animate(true)
                     .style({
+                        raisingHeight: 200000,
                         opacityLinear: {
                             enable: true, // true - false
                             dir: 'up' // up - down
                         },
                         lightEnable: false
                     });
-                scene.addLayer(barLayer);
-                scene.addLayer(waveLayer);
                 scene.addLayer(gd);
                 scene.addLayer(bottomLayer);
                 scene.addLayer(layer);
                 scene.addLayer(lineUp);
+                scene.addLayer(waveLayer);
+                scene.addLayer(barLayer);
 
                 timeout()
                 mapFun();