太阳光

.history/public/config_20230831155359.json

+{
+    "SERVICE_IP": "172.16.0.114:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831155458.json

+{
+    "SERVICE_IP": "172.16.0.104:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831155524.json

+{
+    "SERVICE_IP": "172.16.0.130:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831160006.json

+{
+    "SERVICE_IP": "172.16.0.104:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831160007.json

+{
+    "SERVICE_IP": "172.16.0.104:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831160051.json

+{
+    "SERVICE_IP": "172.16.0.114:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

.history/public/config_20230831160052.json

+{
+    "SERVICE_IP": "172.16.0.114:1234",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.3"
+}
\ No newline at end of file

public/config.json

 {
-    "SERVICE_IP": "172.16.0.104:1234",
+    "SERVICE_IP": "172.16.0.114:1234",
     "MAP_CENTER": [39.74441007068,111.24544532751],
     "version": "1.1.3"
 }
\ No newline at end of file

src/tools/Deck.js

@@ -2,14 +2,29 @@
  * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
  * gaoxf
  */
-import { Deck } from '@deck.gl/core';
-import { GeoJsonLayer, PathLayer, TextLayer, IconLayer, PolygonLayer } from '@deck.gl/layers';
+import { Deck, _SunLight as SunLight, AmbientLight, LightingEffect } from '@deck.gl/core';
+import { GeoJsonLayer, PathLayer, TextLayer, IconLayer, PolygonLayer, ScatterplotLayer } from '@deck.gl/layers';
 import { ScenegraphLayer } from '@deck.gl/mesh-layers';
 import { PathStyleExtension, CollisionFilterExtension } from '@deck.gl/extensions';
 import * as turf from '@turf/turf'
 export default class DeckNew {
     constructor(props) {
-        this.deck =new Deck({ ...props })
+        const Light = new SunLight({
+            timestamp: 1554927200000,
+            color: [234, 186, 55],
+            intensity: 4
+        })
+        this.deck = new Deck({
+            ...props, effects: [
+                new LightingEffect({ Light })
+            ]
+        })
+
+        // new SunLight({
+        //     timestamp: 1554927200000,
+        //     color: [255, 0, 0],
+        //     intensity: 1
+        // })
         this.initProps = { initialViewState: props.initialViewState };
         this.rotate = props.initialViewState.rotate || 0;
         this.pitch = props.initialViewState.pitch || 0
@@ -25,8 +40,8 @@ export default class DeckNew {
             textLayer: [],
             markerLayer: [],
             polygonLayer: [],
-            pathLayer: ['avoidancePath','currentPath', 'nextPath'],
-            bufferLayer: ['avoidancePathBuffer', 'pathBuffer', 'obstacleBuffer', 'currentCarBuffer', 'nextPathBuffer','currentPathBuffer'],
+            pathLayer: ['avoidancePath', 'currentPath', 'nextPath'],
+            bufferLayer: ['avoidancePathBuffer', 'pathBuffer', 'obstacleBuffer', 'currentCarBuffer', 'nextPathBuffer', 'currentPathBuffer'],
             baseLayer: ['dynamicLine', 'obstacle', 'dealSingle', 'barricade', 'lane', 'lanenode', 'centerLine', 'electronicFence', 'obstacles', 'staticobjs', 'wetArea', 'dumparea', 'parkspot', 'diggingworkarea', 'stationarea', 'runablearea'],
 
         }
@@ -44,7 +59,7 @@ export default class DeckNew {
     initLayer() {
         this.layerSort()
         this.deck.setProps({
-            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers,...this.mapLayers, ...this.pathLayers]
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
         })
     }
 
@@ -60,7 +75,7 @@ export default class DeckNew {
                 pitch: this.pitch,
                 bearing: -this.rotate,
                 // pickingRadius:5,
-                controller:true
+                controller: true
             }
         })
     }
@@ -76,11 +91,11 @@ export default class DeckNew {
         }
         return this.deck.viewState.pitch
     }
-    clearLayer(key){
+    clearLayer(key) {
 
         switch (key) {
             case 'marker':
-                this.markerLayers=[]
+                this.markerLayers = []
                 break;
             case 'car':
                 this.carLayers = [];
@@ -93,13 +108,13 @@ export default class DeckNew {
                 })
                 break;
             case 'text':
-                this.textLayers=[]
+                this.textLayers = []
                 break;
             case 'polygon':
-                this.polygonLayers=[]
+                this.polygonLayers = []
                 break;
             case 'path':
-                this.pathLayers=[]
+                this.pathLayers = []
         }
     }
     setLayerSortName(key, name, sort) {
@@ -107,13 +122,13 @@ export default class DeckNew {
             if (this.layerSortArray[key].includes(name)) {
                 this.layerSortArray[key].forEach((m, i) => {
                     if (m === name) {
-                        if (sort){
+                        if (sort) {
                             this.layerSortArray[key].splice(i, 1)
                             this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
                         }
                     }
                 })
-            }else{
+            } else {
                 if (sort) {
                     this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
                 } else {
@@ -139,23 +154,34 @@ export default class DeckNew {
         this.initLayer()
     }
     creatCircle(data, option, layerName) {
-        let cicleList = []
-        data.forEach(item => {
-            var radius = option.radius;
-            var options = { steps: 20, units: 'meters', properties: { foo: 'bar' } };
-            var circle = turf.circle(item.coordinates, radius, options);
-            cicleList.push(circle)
-        })
-        const obj = {
-            type: "FeatureCollection",
-            features: [...cicleList]
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
         }
-        this.createGeoJsonLayer(obj, option, layerName)
+        let layer = new ScatterplotLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+        // let cicleList = []
+        // data.forEach(item => {
+        //     var radius = option.radius;
+        //     var options = { steps: 20, units: 'meters', properties: { foo: 'bar' } };
+        //     var circle = turf.circle(item.coordinates, radius, options);
+        //     cicleList.push(circle)
+        // })
+        // const obj = {
+        //     type: "FeatureCollection",
+        //     features: [...cicleList]
+        // }
+        // this.createGeoJsonLayer(obj, option, layerName)
     }
     creatPolygon(data, option, layerName) {
         let defalutOprion = {
             id: layerName,
-            data:[data],
+            data: [data],
             pickable: true,
             stroked: true,
             filled: true,
@@ -177,10 +203,10 @@ export default class DeckNew {
             // widthScale: 20,
             // widthMinPixels: 2,
             getDashArray: [3, 3],
-            getOffset:0,
+            getOffset: 0,
             dashJustified: false,
             // dashGapPickable: true,
-            highPrecisionDash:true,
+            highPrecisionDash: true,
             extensions: [new PathStyleExtension({ dash: true, offset: true })],
             // getPath: d => d.path,
             getColor: d => d.color,
@@ -223,18 +249,19 @@ export default class DeckNew {
             getTextAnchor: 'middle',
             getAlignmentBaseline: 'bottom',
             fontSettings: {
-                buffer: 2,
+                buffer: 1,
                 sdf: true,
                 smoothing: 0.2
             },
             fontWeight: 100,
-            // billboard:false,
+            billboard: true,
             collisionEnabled: true,
             collisionTestProps: {
                 sizeScale: 6 * 2,
                 sizeMaxPixels: 40 * 2,
                 sizeMinPixels: 1 * 2
             },
+            getPixelOffset: [0, -5],
             extensions: [new CollisionFilterExtension()],
         }
         const layer = new TextLayer(Object.assign(defalutOprion, option));
@@ -258,7 +285,7 @@ export default class DeckNew {
         this.markerLayers.push(layer)
         this.initLayer()
     }
-    setRoll(coor){
+    setRoll(coor) {
         let zoom = this.getZoom() || 15
         let pitch = this.getPitch() || 40
         this.deck.setProps({ initialViewState: {} })
@@ -270,7 +297,7 @@ export default class DeckNew {
                 pitch: pitch,
                 bearing: -this.rotate,
                 // pickingRadius:5,
-                controller:true
+                controller: true
                 // * 180 / Math.PI + 60 + 180
             }
         })
@@ -288,7 +315,7 @@ export default class DeckNew {
                 pitch: pitch,
                 bearing: -rotate,
                 // pickingRadius:5,
-                controller:true
+                controller: true
                 // * 180 / Math.PI + 60 + 180
             }
         })
@@ -304,7 +331,7 @@ export default class DeckNew {
                 pitch: pitch,
                 bearing: -this.rotate,
                 // pickingRadius:5,
-                controller:true
+                controller: true
             }
         })
     }

src/views/map/MapLeaflet.vue

@@ -265,7 +265,7 @@ function dealDivIcon(value, layerName) {
         let texData = {
             name: name,
             id: id,
-            coordinates: [markerCoor[1], markerCoor[0], 1],
+            coordinates: [markerCoor[1], markerCoor[0]],
         }
         if (markerLayerGroupLists[`${layerName}${id}`]) {
             markerLayerGroupLists[`${layerName}${id}`] = texData
@@ -282,7 +282,7 @@ function dealDivIcon(value, layerName) {
         getFillColor: f => map.convertColor('#2aa1fa', 1),
         getLineColor: f => map.convertColor('#2aa1fa', 0.5),
         getLineWidth: 0.5,
-        radius: 1.5
+        getRadius: 1.5
     }, 'marker')
 
     mapStore.setData(layerName, null)
@@ -319,11 +319,11 @@ function dealSafe(vehicleID, safe) {
                 getLineWidth: 0.4
             }, vehicleID + i)
         } else {
-            map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            map.creatCircle({coordinates:[vehicleLongtitude, vehicleLatitude]}, {
                 getFillColor: f => map.convertColor(safe_color, 0.4),
                 getLineColor: f => map.convertColor(safe_color),
                 getLineWidth: 0.4,
-                radius: data[i]
+                getRadius: data[i]
             }, vehicleID + i)
         }
         safeObjects[vehicleID][i] = vehicleID + i
@@ -341,11 +341,11 @@ function dealTraj(vehicleID, traj) {
 
     const zIndex = LAYER_PROPOITY['traj']
     if ([1, 20, 21].includes(vehicleType) && radius) {
-        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+        map.creatCircle({coordinates:[vehicleLongtitude, vehicleLatitude]}, {
             getFillColor: f => map.convertColor('#FFA500'),
             getLineColor: f => map.convertColor('#FFA500'),
             getLineWidth: 1,
-            radius: radius
+            getRadius: radius
         }, vehicleID)
         safeTrajs[vehicleID]['circle'] = vehicleID
     } else {
@@ -481,11 +481,11 @@ function dealObtacleData(value) {
             }, 'obstacle')
 
             map.setLayerSortName('buffer', 'obstacleBuffer')
-            map.creatCircle([centerLon, centerLat], {
+            map.creatCircle({coordinates:[centerLon, centerLat]}, {
                 getFillColor: f => map.convertColor(centerColor, 0.5),
                 getLineColor: f => map.convertColor(centerColor, 0.5),
                 getLineWidth: 0,
-                radius: centerRadius
+                getRadius: centerRadius
             }, 'obstacleBuffer')
         }
     }