fix

.history/src/tools/Deck_20230918101747.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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) {
+        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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103109.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { nameRgbMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if(nameRgbMap(color)){
+            color=nameRgbMap(color)
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103140.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { nameRgbMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if(nameRgbMap(color)){
+            color=nameRgbMap(color)
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103210.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { namergbaMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if(nameRgbMap(color)){
+            color=nameRgbMap(color)
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103322.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { namergbaMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if(namergbaMap(color)){
+            color=namergbaMap(color)
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103344.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { namergbaMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if(namergbaMap[color]){
+            color=namergbaMap[color]
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/Deck_20230918103631.js

+/**
+ * 关于deck.gl的二次封装，由于很多功能使用起来不方便，因此进行二次封装
+ * gaoxf
+ */
+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'
+import { namergbaMap } from './colorCode';
+export default class DeckNew {
+    constructor(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
+        this.zoom = props.initialViewState.zoom || 17
+        this.mapLayers = [];
+        this.carLayers = [];
+        this.markerLayers = [];
+        this.textLayers = [];
+        this.polygonLayers = [];
+        this.pathLayers = [];
+        this.layerSortArray = {
+            carLayer: [],
+            textLayer: [],
+            markerLayer: [],
+            polygonLayer: [],
+            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'],
+
+        }
+        this.createGeoJsonLayer = this.createGeoJsonLayer.bind(this);
+        this.createPathLayer = this.createPathLayer.bind(this);
+        this.setRotation = this.setRotation.bind(this);
+        this.createTextLayer = this.createTextLayer.bind(this);
+        this.creatMarker = this.creatMarker.bind(this);
+        this.creatCircle = this.creatCircle.bind(this);
+        this.creatPolygon = this.creatPolygon.bind(this);
+        this.setLayerSortName = this.setLayerSortName.bind(this);
+        this.setPitch = this.setPitch.bind(this);
+        this.removeLayer = this.removeLayer.bind(this);
+    }
+    initLayer() {
+        this.layerSort()
+        this.deck.setProps({
+            layers: [...this.textLayers, ...this.carLayers, ...this.markerLayers, this.polygonLayers, ...this.mapLayers, ...this.pathLayers]
+        })
+    }
+
+    setPitch(number) {
+        this.pitch = number;
+        let zoom = this.getZoom() || this.zoom
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: this.pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    getZoom() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].zoom
+        }
+        return this.deck.viewState.zoom
+    }
+    getPitch() {
+        if (this.deck.viewState.hasOwnProperty('default-view')) {
+            return this.deck.viewState['default-view'].pitch
+        }
+        return this.deck.viewState.pitch
+    }
+    clearLayer(key) {
+
+        switch (key) {
+            case 'marker':
+                this.markerLayers = []
+                break;
+            case 'car':
+                this.carLayers = [];
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers = []
+                break;
+            case 'polygon':
+                this.polygonLayers = []
+                break;
+            case 'path':
+                this.pathLayers = []
+        }
+    }
+    setLayerSortName(key, name, sort) {
+        if (this.layerSortArray.hasOwnProperty(key)) {
+            if (this.layerSortArray[key].includes(name)) {
+                this.layerSortArray[key].forEach((m, i) => {
+                    if (m === name) {
+                        if (sort) {
+                            this.layerSortArray[key].splice(i, 1)
+                            this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                        }
+                    }
+                })
+            } else {
+                if (sort) {
+                    this.layerSortArray[key].splice(sort >= 1 ? sort - 1 : 0, 0, name)
+                } else {
+                    this.layerSortArray[key].push(name)
+                }
+            }
+        }
+    }
+    createGeoJsonLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data: this.convert(data),
+            stroked: true,
+            filled: true,
+            extruded: false,
+            wireframe: true,
+            getElevation: 0,
+            pickable: true,
+        }
+        let layer = new GeoJsonLayer(Object.assign(defalutOprion, option));
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    creatCircle(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            radiusUnits: 'meters',
+            getPosition: d => d.coordinates,
+        }
+        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],
+            pickable: true,
+            stroked: true,
+            filled: true,
+            wireframe: true,
+            lineWidthMinPixels: 1,
+            getPolygon: d => d.coordinates,
+        }
+        let layer = new PolygonLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('polygonLayer', layerName)
+        this.removeLayer('map', layerName)
+        this.mapLayers.push(layer)
+        this.initLayer()
+    }
+    createPathLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            // widthScale: 20,
+            // widthMinPixels: 2,
+            getDashArray: [3, 3],
+            getOffset: 0,
+            dashJustified: false,
+            // dashGapPickable: true,
+            highPrecisionDash: true,
+            extensions: [new PathStyleExtension({ dash: true, offset: true })],
+            // getPath: d => d.path,
+            getColor: d => d.color,
+        }
+        const layer = new PathLayer(Object.assign(defalutOprion, option));
+        this.setLayerSortName('pathLayer', layerName)
+        this.removeLayer('path', layerName)
+        this.pathLayers.push(layer)
+        this.initLayer()
+    }
+    createCarModel(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            sizeScale: 1,
+            _lighting: 'pbr',
+            getTranslation: [0, 0, 0],
+            _dataDiff: (newData, oldData) => [{ startRow: 0, endRow: data.length + 1 }],
+            getOrientation: f => {
+                return [0, f.rotate * 180 / Math.PI + 90, 90]
+            },
+        }
+        const layer = new ScenegraphLayer(Object.assign(defalutOprion, option));
+        // this.setLayerSortName('carLayer', layerName)
+        this.removeLayer('car', layerName)
+        this.carLayers.push(layer)
+        this.initLayer()
+    }
+    createTextLayer(data, option, layerName) {
+        let defalutOprion = {
+            id: layerName,
+            data,
+            pickable: true,
+            getPosition: d => d.coordinates,
+            getText: d => d.name,
+            characterSet: 'auto',//这样设置支持中文
+            getAngle: 0,
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'bottom',
+            fontSettings: {
+                buffer: 1,
+                sdf: true,
+                smoothing: 0.2
+            },
+            fontWeight: 100,
+            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));
+        // this.setLayerSortName('textLayer', layerName)
+        this.removeLayer('text', layerName)
+        this.textLayers.push(layer)
+        this.initLayer()
+    }
+    creatMarker(data, option, layerName) {
+        const layer = new IconLayer({
+            id: layerName,
+            data,
+            pickable: true,
+            // iconAtlas and iconMapping are required
+            // getIcon: return a string
+            getPosition: d => d.coordinates,
+            ...option
+        });
+        this.setLayerSortName('markerLayer', layerName)
+        this.removeLayer('marker', layerName)
+        this.markerLayers.push(layer)
+        this.initLayer()
+    }
+    setRoll(coor) {
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    setRotation(rotate) {
+        this.rotate = rotate
+        let zoom = this.getZoom() || 15
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: document.location.mapCenter[0],
+                longitude: document.location.mapCenter[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -rotate,
+                // pickingRadius:5,
+                controller: true
+                // * 180 / Math.PI + 60 + 180
+            }
+        })
+    }
+    flyTo(coor, zoom) {
+        let pitch = this.getPitch() || 40
+        this.deck.setProps({ initialViewState: {} })
+        this.deck.setProps({
+            initialViewState: {
+                latitude: coor[0],
+                longitude: coor[1],
+                zoom: zoom,
+                pitch: pitch,
+                bearing: -this.rotate,
+                // pickingRadius:5,
+                controller: true
+            }
+        })
+    }
+    //根据页面中图层的顺序排序
+    layerSort() {
+        //图层的顺序
+        let obj = []
+        Object.values(this.layerSortArray).forEach(item => {
+            obj.push(...item)
+        })
+        let newArray = []
+        obj.forEach(item => {
+            this.mapLayers.forEach(m => {
+                if (item == m.id) {
+                    newArray.push(m)
+                }
+            })
+        })
+        this.mapLayers = newArray.reverse();
+    }
+    //根据图层名字从图层数组中移除对应图层
+    removeLayer(type, layerName) {
+        switch (type) {
+            case 'marker':
+                this.markerLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.markerLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'car':
+                this.carLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.carLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'map':
+                this.mapLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.mapLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'text':
+                this.textLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.textLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'polygon':
+                this.polygonLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.polygonLayers.splice(index, 1)
+                    }
+                })
+                break;
+            case 'path':
+                this.pathLayers.forEach((item, index) => {
+                    if (item.id == layerName) {
+                        this.pathLayers.splice(index, 1)
+                    }
+                })
+        }
+        this.initLayer();
+    }
+    /**
+     * 移除所有图层
+     **/
+    remove() {
+        this.deck.setProps({
+            layers: []
+        })
+    }
+    /**
+     * 坐标去掉高程
+     **/
+    convert(obj) {
+        let { features } = obj;
+        for (let i = 0; i < features.length; i++) {
+            let { geometry } = features[i];
+            let { coordinates, type } = geometry;
+            for (let j = 0; j < coordinates.length; j++) {
+                if (type == "Polygon") {
+                    for (let k = 0; k < coordinates[j].length; k++) {
+                        if (coordinates[j][k].length > 2) {
+                            coordinates[j][k] = coordinates[j][k].slice(0, 2)
+                        }
+                    }
+                } else {
+                    if (coordinates[j].length > 2) {
+                        coordinates[j] = coordinates[j].slice(0, 2)
+                    }
+                }
+            }
+
+        }
+        return obj
+    }
+    /**
+     * 经纬度互换
+     **/
+    coorReverse(data) {
+        return data.map(item => {
+            let list = [];
+            list = [item[1], item[0]]
+            return list
+        })
+    }
+    /**
+     * 颜色16进制转成rgba
+     **/
+    convertColor(color, opacity) {
+        if (!color) return;
+        if (namergbaMap[color]) {
+            color = namergbaMap[color]
+        }
+        if (color.indexOf('rgba') > -1) {
+            let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else if (color.indexOf('rgba') == -1 && color.indexOf('rgb') > -1) {
+            let colors = color.replace('rgb', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else {
+            let result = []
+            if (color.length === 4) {
+                result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
+                // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
+                let r = parseInt(result[1] + result[1], 16);
+                let g = parseInt(result[2] + result[2], 16);
+                let b = parseInt(result[3] + result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            } else {
+                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+                // 将分解出的分量转换为十进制数
+                let r = parseInt(result[1], 16);
+                let g = parseInt(result[2], 16);
+                let b = parseInt(result[3], 16);
+                return [r, g, b, opacity ? opacity * 225 : 225]
+            }
+        }
+    }
+
+    mergeOption(oldOption, newOption) {
+        Object.keys(newOption).forEach(key => {
+            if (typeof newOption[key] == "object") {
+                if (oldOption.hasOwnProperty(key)) {
+                    this.mergeOption(oldOption[key], newOption[key])
+                } else {
+                    oldOption[key] = newOption[key]
+                }
+            } else {
+                oldOption[key] = newOption[key]
+            }
+
+        })
+    }
+}
+

.history/src/tools/colorCode_20230918103000.js

+const nameRgbMap = {
+    'aliceblue': 'rgb(240,248,255)',
+    'antiquewhite': 'rgb(250,235,215)',
+    'aqua': 'rgb(0,255,255)',
+    'auqamarin': 'rgb(127,255,170)',
+    'azure': 'rgb(240,255,255)',
+    'beige': 'rgb(107,142,35)',
+    'bisque': 'rgb(255,228,196)',
+    'black': 'rgb(0,0,0)',
+    'blanchedalmond': 'rgb(255,235,205)',
+    'blue': 'rgb(0,0,255)',
+    'blueviolet': 'rgb(138,43,226)',
+    'brown': 'rgb(165,42,42)',
+    'brulywood': 'rgb(222,184,135)',
+    'cadetblue': 'rgb(95,158,160)',
+    'chartreuse': 'rgb(127,255,0)',
+    'chocolate': 'rgb(210,105,30)',
+    'coral': 'rgb(255,127,80)',
+    'cornflowerblue': 'rgb(100,149,237)',
+    'cornislk': 'rgb(255,248,220)',
+    'crimson': 'rgb(220,20,60)',
+    'cyan': 'rgb(0,255,255)',
+    'darkblue': 'rgb(0,0,139)',
+    'darkcyan': 'rgb(0,139,139)',
+    'darkgray': 'rgb(169,169,169)',
+    'darkgreen': 'rgb(0,100,0)',
+    'darkkhaki': 'rgb(189,183,107)',
+    'darkmagenta': 'rgb(139,0,139)',
+    'darkorange': 'rgb(255,140,0)',
+    'darkorchid': 'rgb(153,50,204)',
+    'darkred': 'rgb(139,0,0)',
+    'darksalmon': 'rgb(233,150,122)',
+    'darkseagreen': 'rgb(143,188,143)',
+    'darkslateblue': 'rgb(72,61,139)',
+    'darkslategray': 'rgb(47,79,79)',
+    'darkturquoise': 'rgb(0,206,209)',
+    'darkvoilet': 'rgb(148,0,211)',
+    'deeppink': 'rgb(255,20,147)',
+    'deepskyblue': 'rgb(0,191,255)',
+    'dimgray': 'rgb(105,105,105)',
+    'doderblue': 'rgb(30,144,255)',
+    'firebrick': 'rgb(178,34,34)',
+    'floralwhite': 'rgb(255,250,240)',
+    'forestgreen': 'rgb(34,139,34)',
+    'fuchsia': 'rgb(255,0,255)',
+    'gainsboro': 'rgb(220,220,220)',
+    'ghostwhite': 'rgb(248,248,255)',
+    'gold': 'rgb(255,215,0)',
+    'goldenrod': 'rgb(218,165,32)',
+    'gray': 'rgb(128,128,128)',
+    'green': 'rgb(0,128,0)',
+    'greenyellow': 'rgb(173,255,47)',
+    'honeydew': 'rgb(240,255,240)',
+    'hotpink': 'rgb(255,105,180)',
+    'indianred': 'rgb(205,92,92)',
+    'indigo': 'rgb(75,0,130)',
+    'ivory': 'rgb(255,255,240)',
+    'khaki': 'rgb(240,230,140)',
+    'lavender': 'rgb(230,230,250)',
+    'lavenderblush': 'rgb(255,240,245)',
+    'lawngreen': 'rgb(124,252,0)',
+    'lemonchiffon': 'rgb(255,250,205)',
+    'lightblue': 'rgb(173,216,230)',
+    'lightcoral': 'rgb(240,128,128)',
+    'lightcyan': 'rgb(225,255,255)',
+    'lightgoldenrodyellow': 'rgb(250,250,210)',
+    'lightgreen': 'rgb(144,238,144)',
+    'lightgrey': 'rgb(211,211,211)',
+    'lightpink': 'rgb(255,182,193)',
+    'lightsalmon': 'rgb(255,160,122)',
+    'lightseagreen': 'rgb(32,178,170)',
+    'lightskyblue': 'rgb(135,206,250)',
+    'lightslategray': 'rgb(119,136,153)',
+    'lightsteelblue': 'rgb(176,196,222)',
+    'lightyellow': 'rgb(255,255,224)',
+    'lime': 'rgb(0,255,0)',
+    'limegreen': 'rgb(50,205,50)',
+    'linen': 'rgb(250,240,230)',
+    'magenta': 'rgb(255,0,255)',
+    'maroon': 'rgb(128,0,0)',
+    'mediumaquamarine': 'rgb(0,250,154)',
+    'mediumblue': 'rgb(0,0,205)',
+    'mediumorchid': 'rgb(186,85,211)',
+    'mediumpurple': 'rgb(147,112,219)',
+    'mediumslateblue': 'rgb(123,104,238)',
+    'mediumspringgreen': 'rgb(245,255,250)',
+    'mediumturquoise': 'rgb(72,209,204)',
+    'mediumvioletred': 'rgb(199,21,133)',
+    'midnightblue': 'rgb(25,25,112)',
+    'mintcream': 'rgb(0,255,127)',
+    'mistyrose': 'rgb(255,228,225)',
+    'moccasin': 'rgb(255,228,181)',
+    'navajowhite': 'rgb(255,222,173)',
+    'navy': 'rgb(0,0,128)',
+    'oldlace': 'rgb(253,245,230)',
+    'olive': 'rgb(128,128,0)',
+    'olivedrab': 'rgb(85,107,47)',
+    'orange': 'rgb(255,165,0)',
+    'orangered': 'rgb(255,69,0)',
+    'orchid': 'rgb(218,112,214)',
+    'palegodenrod': 'rgb(238,232,170)',
+    'palegreen': 'rgb(152,251,152)',
+    'paleturquoise': 'rgb(175,238,238)',
+    'palevioletred': 'rgb(219,112,147)',
+    'papayawhip': 'rgb(255,239,213)',
+    'peachpuff': 'rgb(255,218,185)',
+    'peru': 'rgb(205,133,63)',
+    'pink': 'rgb(255,192,203)',
+    'plum': 'rgb(221,160,221)',
+    'powderblue': 'rgb(176,224,230)',
+    'purple': 'rgb(128,0,128)',
+    'red': 'rgb(255,0,0)',
+    'rosybrown': 'rgb(188,143,143)',
+    'royalblue': 'rgb(65,105,225)',
+    'saddlebrown': 'rgb(139,69,19)',
+    'salmon': 'rgb(250,128,114)',
+    'sandybrown': 'rgb(244,164,96)',
+    'seagreen': 'rgb(46,139,87)',
+    'seashell': 'rgb(255,245,238)',
+    'sienna': 'rgb(160,82,45)',
+    'silver': 'rgb(192,192,192)',
+    'skyblue': 'rgb(135,206,235)',
+    'slateblue': 'rgb(106,90,205)',
+    'slategray': 'rgb(112,128,144)',
+    'snow': 'rgb(255,250,250)',
+    'springgreen': 'rgb(60,179,113)',
+    'steelblue': 'rgb(70,130,180)',
+    'tan': 'rgb(210,180,140)',
+    'teal': 'rgb(0,128,128)',
+    'thistle': 'rgb(216,191,216)',
+    'tomato': 'rgb(255,99,71)',
+    'turquoise': 'rgb(64,224,208)',
+    'violet': 'rgb(238,130,238)',
+    'wheat': 'rgb(245,222,179)',
+    'white': 'rgb(255,255,255)',
+    'whitesmoke': 'rgb(245,245,245)',
+    'yellow': 'rgb(255,255,0)'
+}
+export { nameRgbMap }
\ No newline at end of file

.history/src/tools/colorCode_20230918103138.js

+const namergbaMap = {
+    'aliceblue': 'rgba(240,248,255)',
+    'antiquewhite': 'rgba(250,235,215)',
+    'aqua': 'rgba(0,255,255)',
+    'auqamarin': 'rgba(127,255,170)',
+    'azure': 'rgba(240,255,255)',
+    'beige': 'rgba(107,142,35)',
+    'bisque': 'rgba(255,228,196)',
+    'black': 'rgba(0,0,0)',
+    'blanchedalmond': 'rgba(255,235,205)',
+    'blue': 'rgba(0,0,255)',
+    'blueviolet': 'rgba(138,43,226)',
+    'brown': 'rgba(165,42,42)',
+    'brulywood': 'rgba(222,184,135)',
+    'cadetblue': 'rgba(95,158,160)',
+    'chartreuse': 'rgba(127,255,0)',
+    'chocolate': 'rgba(210,105,30)',
+    'coral': 'rgba(255,127,80)',
+    'cornflowerblue': 'rgba(100,149,237)',
+    'cornislk': 'rgba(255,248,220)',
+    'crimson': 'rgba(220,20,60)',
+    'cyan': 'rgba(0,255,255)',
+    'darkblue': 'rgba(0,0,139)',
+    'darkcyan': 'rgba(0,139,139)',
+    'darkgray': 'rgba(169,169,169)',
+    'darkgreen': 'rgba(0,100,0)',
+    'darkkhaki': 'rgba(189,183,107)',
+    'darkmagenta': 'rgba(139,0,139)',
+    'darkorange': 'rgba(255,140,0)',
+    'darkorchid': 'rgba(153,50,204)',
+    'darkred': 'rgba(139,0,0)',
+    'darksalmon': 'rgba(233,150,122)',
+    'darkseagreen': 'rgba(143,188,143)',
+    'darkslateblue': 'rgba(72,61,139)',
+    'darkslategray': 'rgba(47,79,79)',
+    'darkturquoise': 'rgba(0,206,209)',
+    'darkvoilet': 'rgba(148,0,211)',
+    'deeppink': 'rgba(255,20,147)',
+    'deepskyblue': 'rgba(0,191,255)',
+    'dimgray': 'rgba(105,105,105)',
+    'doderblue': 'rgba(30,144,255)',
+    'firebrick': 'rgba(178,34,34)',
+    'floralwhite': 'rgba(255,250,240)',
+    'forestgreen': 'rgba(34,139,34)',
+    'fuchsia': 'rgba(255,0,255)',
+    'gainsboro': 'rgba(220,220,220)',
+    'ghostwhite': 'rgba(248,248,255)',
+    'gold': 'rgba(255,215,0)',
+    'goldenrod': 'rgba(218,165,32)',
+    'gray': 'rgba(128,128,128)',
+    'green': 'rgba(0,128,0)',
+    'greenyellow': 'rgba(173,255,47)',
+    'honeydew': 'rgba(240,255,240)',
+    'hotpink': 'rgba(255,105,180)',
+    'indianred': 'rgba(205,92,92)',
+    'indigo': 'rgba(75,0,130)',
+    'ivory': 'rgba(255,255,240)',
+    'khaki': 'rgba(240,230,140)',
+    'lavender': 'rgba(230,230,250)',
+    'lavenderblush': 'rgba(255,240,245)',
+    'lawngreen': 'rgba(124,252,0)',
+    'lemonchiffon': 'rgba(255,250,205)',
+    'lightblue': 'rgba(173,216,230)',
+    'lightcoral': 'rgba(240,128,128)',
+    'lightcyan': 'rgba(225,255,255)',
+    'lightgoldenrodyellow': 'rgba(250,250,210)',
+    'lightgreen': 'rgba(144,238,144)',
+    'lightgrey': 'rgba(211,211,211)',
+    'lightpink': 'rgba(255,182,193)',
+    'lightsalmon': 'rgba(255,160,122)',
+    'lightseagreen': 'rgba(32,178,170)',
+    'lightskyblue': 'rgba(135,206,250)',
+    'lightslategray': 'rgba(119,136,153)',
+    'lightsteelblue': 'rgba(176,196,222)',
+    'lightyellow': 'rgba(255,255,224)',
+    'lime': 'rgba(0,255,0)',
+    'limegreen': 'rgba(50,205,50)',
+    'linen': 'rgba(250,240,230)',
+    'magenta': 'rgba(255,0,255)',
+    'maroon': 'rgba(128,0,0)',
+    'mediumaquamarine': 'rgba(0,250,154)',
+    'mediumblue': 'rgba(0,0,205)',
+    'mediumorchid': 'rgba(186,85,211)',
+    'mediumpurple': 'rgba(147,112,219)',
+    'mediumslateblue': 'rgba(123,104,238)',
+    'mediumspringgreen': 'rgba(245,255,250)',
+    'mediumturquoise': 'rgba(72,209,204)',
+    'mediumvioletred': 'rgba(199,21,133)',
+    'midnightblue': 'rgba(25,25,112)',
+    'mintcream': 'rgba(0,255,127)',
+    'mistyrose': 'rgba(255,228,225)',
+    'moccasin': 'rgba(255,228,181)',
+    'navajowhite': 'rgba(255,222,173)',
+    'navy': 'rgba(0,0,128)',
+    'oldlace': 'rgba(253,245,230)',
+    'olive': 'rgba(128,128,0)',
+    'olivedrab': 'rgba(85,107,47)',
+    'orange': 'rgba(255,165,0)',
+    'orangered': 'rgba(255,69,0)',
+    'orchid': 'rgba(218,112,214)',
+    'palegodenrod': 'rgba(238,232,170)',
+    'palegreen': 'rgba(152,251,152)',
+    'paleturquoise': 'rgba(175,238,238)',
+    'palevioletred': 'rgba(219,112,147)',
+    'papayawhip': 'rgba(255,239,213)',
+    'peachpuff': 'rgba(255,218,185)',
+    'peru': 'rgba(205,133,63)',
+    'pink': 'rgba(255,192,203)',
+    'plum': 'rgba(221,160,221)',
+    'powderblue': 'rgba(176,224,230)',
+    'purple': 'rgba(128,0,128)',
+    'red': 'rgba(255,0,0)',
+    'rosybrown': 'rgba(188,143,143)',
+    'royalblue': 'rgba(65,105,225)',
+    'saddlebrown': 'rgba(139,69,19)',
+    'salmon': 'rgba(250,128,114)',
+    'sandybrown': 'rgba(244,164,96)',
+    'seagreen': 'rgba(46,139,87)',
+    'seashell': 'rgba(255,245,238)',
+    'sienna': 'rgba(160,82,45)',
+    'silver': 'rgba(192,192,192)',
+    'skyblue': 'rgba(135,206,235)',
+    'slateblue': 'rgba(106,90,205)',
+    'slategray': 'rgba(112,128,144)',
+    'snow': 'rgba(255,250,250)',
+    'springgreen': 'rgba(60,179,113)',
+    'steelblue': 'rgba(70,130,180)',
+    'tan': 'rgba(210,180,140)',
+    'teal': 'rgba(0,128,128)',
+    'thistle': 'rgba(216,191,216)',
+    'tomato': 'rgba(255,99,71)',
+    'turquoise': 'rgba(64,224,208)',
+    'violet': 'rgba(238,130,238)',
+    'wheat': 'rgba(245,222,179)',
+    'white': 'rgba(255,255,255)',
+    'whitesmoke': 'rgba(245,245,245)',
+    'yellow': 'rgba(255,255,0)'
+}
+export { namergbaMap }
\ No newline at end of file

.history/src/tools/colorCode_20230918103139.js

+const namergbaMap = {
+    'aliceblue': 'rgba(240,248,255)',
+    'antiquewhite': 'rgba(250,235,215)',
+    'aqua': 'rgba(0,255,255)',
+    'auqamarin': 'rgba(127,255,170)',
+    'azure': 'rgba(240,255,255)',
+    'beige': 'rgba(107,142,35)',
+    'bisque': 'rgba(255,228,196)',
+    'black': 'rgba(0,0,0)',
+    'blanchedalmond': 'rgba(255,235,205)',
+    'blue': 'rgba(0,0,255)',
+    'blueviolet': 'rgba(138,43,226)',
+    'brown': 'rgba(165,42,42)',
+    'brulywood': 'rgba(222,184,135)',
+    'cadetblue': 'rgba(95,158,160)',
+    'chartreuse': 'rgba(127,255,0)',
+    'chocolate': 'rgba(210,105,30)',
+    'coral': 'rgba(255,127,80)',
+    'cornflowerblue': 'rgba(100,149,237)',
+    'cornislk': 'rgba(255,248,220)',
+    'crimson': 'rgba(220,20,60)',
+    'cyan': 'rgba(0,255,255)',
+    'darkblue': 'rgba(0,0,139)',
+    'darkcyan': 'rgba(0,139,139)',
+    'darkgray': 'rgba(169,169,169)',
+    'darkgreen': 'rgba(0,100,0)',
+    'darkkhaki': 'rgba(189,183,107)',
+    'darkmagenta': 'rgba(139,0,139)',
+    'darkorange': 'rgba(255,140,0)',
+    'darkorchid': 'rgba(153,50,204)',
+    'darkred': 'rgba(139,0,0)',
+    'darksalmon': 'rgba(233,150,122)',
+    'darkseagreen': 'rgba(143,188,143)',
+    'darkslateblue': 'rgba(72,61,139)',
+    'darkslategray': 'rgba(47,79,79)',
+    'darkturquoise': 'rgba(0,206,209)',
+    'darkvoilet': 'rgba(148,0,211)',
+    'deeppink': 'rgba(255,20,147)',
+    'deepskyblue': 'rgba(0,191,255)',
+    'dimgray': 'rgba(105,105,105)',
+    'doderblue': 'rgba(30,144,255)',
+    'firebrick': 'rgba(178,34,34)',
+    'floralwhite': 'rgba(255,250,240)',
+    'forestgreen': 'rgba(34,139,34)',
+    'fuchsia': 'rgba(255,0,255)',
+    'gainsboro': 'rgba(220,220,220)',
+    'ghostwhite': 'rgba(248,248,255)',
+    'gold': 'rgba(255,215,0)',
+    'goldenrod': 'rgba(218,165,32)',
+    'gray': 'rgba(128,128,128)',
+    'green': 'rgba(0,128,0)',
+    'greenyellow': 'rgba(173,255,47)',
+    'honeydew': 'rgba(240,255,240)',
+    'hotpink': 'rgba(255,105,180)',
+    'indianred': 'rgba(205,92,92)',
+    'indigo': 'rgba(75,0,130)',
+    'ivory': 'rgba(255,255,240)',
+    'khaki': 'rgba(240,230,140)',
+    'lavender': 'rgba(230,230,250)',
+    'lavenderblush': 'rgba(255,240,245)',
+    'lawngreen': 'rgba(124,252,0)',
+    'lemonchiffon': 'rgba(255,250,205)',
+    'lightblue': 'rgba(173,216,230)',
+    'lightcoral': 'rgba(240,128,128)',
+    'lightcyan': 'rgba(225,255,255)',
+    'lightgoldenrodyellow': 'rgba(250,250,210)',
+    'lightgreen': 'rgba(144,238,144)',
+    'lightgrey': 'rgba(211,211,211)',
+    'lightpink': 'rgba(255,182,193)',
+    'lightsalmon': 'rgba(255,160,122)',
+    'lightseagreen': 'rgba(32,178,170)',
+    'lightskyblue': 'rgba(135,206,250)',
+    'lightslategray': 'rgba(119,136,153)',
+    'lightsteelblue': 'rgba(176,196,222)',
+    'lightyellow': 'rgba(255,255,224)',
+    'lime': 'rgba(0,255,0)',
+    'limegreen': 'rgba(50,205,50)',
+    'linen': 'rgba(250,240,230)',
+    'magenta': 'rgba(255,0,255)',
+    'maroon': 'rgba(128,0,0)',
+    'mediumaquamarine': 'rgba(0,250,154)',
+    'mediumblue': 'rgba(0,0,205)',
+    'mediumorchid': 'rgba(186,85,211)',
+    'mediumpurple': 'rgba(147,112,219)',
+    'mediumslateblue': 'rgba(123,104,238)',
+    'mediumspringgreen': 'rgba(245,255,250)',
+    'mediumturquoise': 'rgba(72,209,204)',
+    'mediumvioletred': 'rgba(199,21,133)',
+    'midnightblue': 'rgba(25,25,112)',
+    'mintcream': 'rgba(0,255,127)',
+    'mistyrose': 'rgba(255,228,225)',
+    'moccasin': 'rgba(255,228,181)',
+    'navajowhite': 'rgba(255,222,173)',
+    'navy': 'rgba(0,0,128)',
+    'oldlace': 'rgba(253,245,230)',
+    'olive': 'rgba(128,128,0)',
+    'olivedrab': 'rgba(85,107,47)',
+    'orange': 'rgba(255,165,0)',
+    'orangered': 'rgba(255,69,0)',
+    'orchid': 'rgba(218,112,214)',
+    'palegodenrod': 'rgba(238,232,170)',
+    'palegreen': 'rgba(152,251,152)',
+    'paleturquoise': 'rgba(175,238,238)',
+    'palevioletred': 'rgba(219,112,147)',
+    'papayawhip': 'rgba(255,239,213)',
+    'peachpuff': 'rgba(255,218,185)',
+    'peru': 'rgba(205,133,63)',
+    'pink': 'rgba(255,192,203)',
+    'plum': 'rgba(221,160,221)',
+    'powderblue': 'rgba(176,224,230)',
+    'purple': 'rgba(128,0,128)',
+    'red': 'rgba(255,0,0)',
+    'rosybrown': 'rgba(188,143,143)',
+    'royalblue': 'rgba(65,105,225)',
+    'saddlebrown': 'rgba(139,69,19)',
+    'salmon': 'rgba(250,128,114)',
+    'sandybrown': 'rgba(244,164,96)',
+    'seagreen': 'rgba(46,139,87)',
+    'seashell': 'rgba(255,245,238)',
+    'sienna': 'rgba(160,82,45)',
+    'silver': 'rgba(192,192,192)',
+    'skyblue': 'rgba(135,206,235)',
+    'slateblue': 'rgba(106,90,205)',
+    'slategray': 'rgba(112,128,144)',
+    'snow': 'rgba(255,250,250)',
+    'springgreen': 'rgba(60,179,113)',
+    'steelblue': 'rgba(70,130,180)',
+    'tan': 'rgba(210,180,140)',
+    'teal': 'rgba(0,128,128)',
+    'thistle': 'rgba(216,191,216)',
+    'tomato': 'rgba(255,99,71)',
+    'turquoise': 'rgba(64,224,208)',
+    'violet': 'rgba(238,130,238)',
+    'wheat': 'rgba(245,222,179)',
+    'white': 'rgba(255,255,255)',
+    'whitesmoke': 'rgba(245,245,245)',
+    'yellow': 'rgba(255,255,0)'
+}
+export { namergbaMap }
\ No newline at end of file

src/tools/Deck.js

@@ -7,6 +7,7 @@ import { GeoJsonLayer, PathLayer, TextLayer, IconLayer, PolygonLayer, Scatterplo
 import { ScenegraphLayer } from '@deck.gl/mesh-layers';
 import { PathStyleExtension, CollisionFilterExtension } from '@deck.gl/extensions';
 import * as turf from '@turf/turf'
+import { namergbaMap } from './colorCode';
 export default class DeckNew {
     constructor(props) {
         const Light = new SunLight({
@@ -447,9 +448,15 @@ export default class DeckNew {
      **/
     convertColor(color, opacity) {
         if (!color) return;
+        if (namergbaMap[color]) {
+            color = namergbaMap[color]
+        }
         if (color.indexOf('rgba') > -1) {
             let colors = color.replace('rgba', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
             return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
+        } else if (color.indexOf('rgba') == -1 && color.indexOf('rgb') > -1) {
+            let colors = color.replace('rgb', '').replace('(', '').replace(')', '').split(',').map(m => parseInt(m))
+            return [...colors.slice(0, 3), opacity ? opacity * 225 : 225]
         } else {
             let result = []
             if (color.length === 4) {

src/tools/colorCode.js

+const namergbaMap = {
+    'aliceblue': 'rgba(240,248,255)',
+    'antiquewhite': 'rgba(250,235,215)',
+    'aqua': 'rgba(0,255,255)',
+    'auqamarin': 'rgba(127,255,170)',
+    'azure': 'rgba(240,255,255)',
+    'beige': 'rgba(107,142,35)',
+    'bisque': 'rgba(255,228,196)',
+    'black': 'rgba(0,0,0)',
+    'blanchedalmond': 'rgba(255,235,205)',
+    'blue': 'rgba(0,0,255)',
+    'blueviolet': 'rgba(138,43,226)',
+    'brown': 'rgba(165,42,42)',
+    'brulywood': 'rgba(222,184,135)',
+    'cadetblue': 'rgba(95,158,160)',
+    'chartreuse': 'rgba(127,255,0)',
+    'chocolate': 'rgba(210,105,30)',
+    'coral': 'rgba(255,127,80)',
+    'cornflowerblue': 'rgba(100,149,237)',
+    'cornislk': 'rgba(255,248,220)',
+    'crimson': 'rgba(220,20,60)',
+    'cyan': 'rgba(0,255,255)',
+    'darkblue': 'rgba(0,0,139)',
+    'darkcyan': 'rgba(0,139,139)',
+    'darkgray': 'rgba(169,169,169)',
+    'darkgreen': 'rgba(0,100,0)',
+    'darkkhaki': 'rgba(189,183,107)',
+    'darkmagenta': 'rgba(139,0,139)',
+    'darkorange': 'rgba(255,140,0)',
+    'darkorchid': 'rgba(153,50,204)',
+    'darkred': 'rgba(139,0,0)',
+    'darksalmon': 'rgba(233,150,122)',
+    'darkseagreen': 'rgba(143,188,143)',
+    'darkslateblue': 'rgba(72,61,139)',
+    'darkslategray': 'rgba(47,79,79)',
+    'darkturquoise': 'rgba(0,206,209)',
+    'darkvoilet': 'rgba(148,0,211)',
+    'deeppink': 'rgba(255,20,147)',
+    'deepskyblue': 'rgba(0,191,255)',
+    'dimgray': 'rgba(105,105,105)',
+    'doderblue': 'rgba(30,144,255)',
+    'firebrick': 'rgba(178,34,34)',
+    'floralwhite': 'rgba(255,250,240)',
+    'forestgreen': 'rgba(34,139,34)',
+    'fuchsia': 'rgba(255,0,255)',
+    'gainsboro': 'rgba(220,220,220)',
+    'ghostwhite': 'rgba(248,248,255)',
+    'gold': 'rgba(255,215,0)',
+    'goldenrod': 'rgba(218,165,32)',
+    'gray': 'rgba(128,128,128)',
+    'green': 'rgba(0,128,0)',
+    'greenyellow': 'rgba(173,255,47)',
+    'honeydew': 'rgba(240,255,240)',
+    'hotpink': 'rgba(255,105,180)',
+    'indianred': 'rgba(205,92,92)',
+    'indigo': 'rgba(75,0,130)',
+    'ivory': 'rgba(255,255,240)',
+    'khaki': 'rgba(240,230,140)',
+    'lavender': 'rgba(230,230,250)',
+    'lavenderblush': 'rgba(255,240,245)',
+    'lawngreen': 'rgba(124,252,0)',
+    'lemonchiffon': 'rgba(255,250,205)',
+    'lightblue': 'rgba(173,216,230)',
+    'lightcoral': 'rgba(240,128,128)',
+    'lightcyan': 'rgba(225,255,255)',
+    'lightgoldenrodyellow': 'rgba(250,250,210)',
+    'lightgreen': 'rgba(144,238,144)',
+    'lightgrey': 'rgba(211,211,211)',
+    'lightpink': 'rgba(255,182,193)',
+    'lightsalmon': 'rgba(255,160,122)',
+    'lightseagreen': 'rgba(32,178,170)',
+    'lightskyblue': 'rgba(135,206,250)',
+    'lightslategray': 'rgba(119,136,153)',
+    'lightsteelblue': 'rgba(176,196,222)',
+    'lightyellow': 'rgba(255,255,224)',
+    'lime': 'rgba(0,255,0)',
+    'limegreen': 'rgba(50,205,50)',
+    'linen': 'rgba(250,240,230)',
+    'magenta': 'rgba(255,0,255)',
+    'maroon': 'rgba(128,0,0)',
+    'mediumaquamarine': 'rgba(0,250,154)',
+    'mediumblue': 'rgba(0,0,205)',
+    'mediumorchid': 'rgba(186,85,211)',
+    'mediumpurple': 'rgba(147,112,219)',
+    'mediumslateblue': 'rgba(123,104,238)',
+    'mediumspringgreen': 'rgba(245,255,250)',
+    'mediumturquoise': 'rgba(72,209,204)',
+    'mediumvioletred': 'rgba(199,21,133)',
+    'midnightblue': 'rgba(25,25,112)',
+    'mintcream': 'rgba(0,255,127)',
+    'mistyrose': 'rgba(255,228,225)',
+    'moccasin': 'rgba(255,228,181)',
+    'navajowhite': 'rgba(255,222,173)',
+    'navy': 'rgba(0,0,128)',
+    'oldlace': 'rgba(253,245,230)',
+    'olive': 'rgba(128,128,0)',
+    'olivedrab': 'rgba(85,107,47)',
+    'orange': 'rgba(255,165,0)',
+    'orangered': 'rgba(255,69,0)',
+    'orchid': 'rgba(218,112,214)',
+    'palegodenrod': 'rgba(238,232,170)',
+    'palegreen': 'rgba(152,251,152)',
+    'paleturquoise': 'rgba(175,238,238)',
+    'palevioletred': 'rgba(219,112,147)',
+    'papayawhip': 'rgba(255,239,213)',
+    'peachpuff': 'rgba(255,218,185)',
+    'peru': 'rgba(205,133,63)',
+    'pink': 'rgba(255,192,203)',
+    'plum': 'rgba(221,160,221)',
+    'powderblue': 'rgba(176,224,230)',
+    'purple': 'rgba(128,0,128)',
+    'red': 'rgba(255,0,0)',
+    'rosybrown': 'rgba(188,143,143)',
+    'royalblue': 'rgba(65,105,225)',
+    'saddlebrown': 'rgba(139,69,19)',
+    'salmon': 'rgba(250,128,114)',
+    'sandybrown': 'rgba(244,164,96)',
+    'seagreen': 'rgba(46,139,87)',
+    'seashell': 'rgba(255,245,238)',
+    'sienna': 'rgba(160,82,45)',
+    'silver': 'rgba(192,192,192)',
+    'skyblue': 'rgba(135,206,235)',
+    'slateblue': 'rgba(106,90,205)',
+    'slategray': 'rgba(112,128,144)',
+    'snow': 'rgba(255,250,250)',
+    'springgreen': 'rgba(60,179,113)',
+    'steelblue': 'rgba(70,130,180)',
+    'tan': 'rgba(210,180,140)',
+    'teal': 'rgba(0,128,128)',
+    'thistle': 'rgba(216,191,216)',
+    'tomato': 'rgba(255,99,71)',
+    'turquoise': 'rgba(64,224,208)',
+    'violet': 'rgba(238,130,238)',
+    'wheat': 'rgba(245,222,179)',
+    'white': 'rgba(255,255,255)',
+    'whitesmoke': 'rgba(245,245,245)',
+    'yellow': 'rgba(255,255,0)'
+}
+export { namergbaMap }
\ No newline at end of file