public/SmartEarthSDK/SmartEarth.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/SmartEarthSDK/SmartEarth.min - 副本.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/js/Map/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/js/Map/server.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/js/Map/temporaryTools.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/store/index.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/export/exportMap.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/layer/layerDetail.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/layer/layerManage.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/plotting/attributeInfo.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
public/SmartEarthSDK/SmartEarth.js
@@ -73565,7 +73565,7 @@ * * @param {Boolean} [open=true] æ¯å¦å¼å¯ç¼è¾ * @param {Object} [option] åæ° * @param {Boolean} [option.enableDelete=true] æ¯å¦æ¯æå é¤ * @param {Boolean} [option.enableDelete=false] æ¯å¦æ¯æå é¤ * @param {Boolean} [option.editProp=false] æ¯å¦å¼å¯å±æ§å¼¹æ¡ * @param {Object} [option.editPropData] 屿§å¼¹æ¡åæ° * @param {Number|String} [option.editPropData.width=360] 屿§å¼¹æ¡å®½åº¦ @@ -73586,7 +73586,7 @@ option.editProp !== undefined && (this.editProp = option.editProp); let enableDelete = this._core.defaultValue(option.enableDelete, false); debugger if (this.editHandler) { this.editHandler.destroy(); this.editHandler = undefined; public/SmartEarthSDK/SmartEarth.min - ¸±±¾.js
@@ -15855,7 +15855,7 @@ ("polygon" === p && 3 < h.pottingPoint.length) ? u.tooltip.showAt( t.endPosition, "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤ç¹" "ææ½ä¿®æ¹ä½ç½®ç¹" ) : u.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®") : !r.id || @@ -15869,7 +15869,7 @@ : u.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®") : u.tooltip.showAt( t.endPosition, "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤" "ææ½ä¿®æ¹ä½ç½®" ) : u.isEditting || 0 !== F.states || @@ -24502,7 +24502,7 @@ ("polygon" === p && 3 < h.pottingPoint.length) ? u.tooltip.showAt( t.endPosition, "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤ç¹" "ææ½ä¿®æ¹ä½ç½®ç¹" ) : u.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®") : !r.id || @@ -24516,7 +24516,7 @@ : u.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®") : u.tooltip.showAt( t.endPosition, "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤" "ææ½ä¿®æ¹ä½ç½®" ) : u.isEditting || 0 !== F.states || @@ -49344,7 +49344,7 @@ ("polygon" === g && 3 < m.pottingPoint.length) ? c.tooltip.showAt( t.endPosition, "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤ç¹" "ææ½ä¿®æ¹ä½ç½®ç¹" ) : c.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®") : !e.id || @@ -49369,7 +49369,7 @@ : s ? c.tooltip.showAt( t.endPosition, "model" === g ? "å³é®å é¤" : "ææ½ä¿®æ¹ä½ç½®ï¼å³é®å é¤" "model" === g ? "" : "ææ½ä¿®æ¹ä½ç½®" ) : "model" !== g && c.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®"); @@ -49380,7 +49380,7 @@ ? a.editProp ? c.tooltip.showAt( t.endPosition, "ç¹å»æ¿æ´»ç¼è¾" + (s ? "ï¼å³é®å é¤" : "") "ç¹å»æ¿æ´»ç¼è¾" + (s ? "" : "") ) : (void 0 === e.id.GeoType && ((r = c.getEntityTypeAndObject(e.id)), @@ -49395,7 +49395,7 @@ c.tooltip.showAt(t.endPosition, "ææ½ä¿®æ¹ä½ç½®")) : c.tooltip.showAt( t.endPosition, "ç¹å»æ¿æ´»ç¼è¾" + (s ? "ï¼å³é®å é¤" : "") "ç¹å»æ¿æ´»ç¼è¾" + (s ? "" : "") )) : c.tooltip.show(!1)); else @@ -103265,7 +103265,7 @@ A.isEditting || 0 !== F.states || (i.id && -1 < A.MilitaryStandardObj.indexOf(i.id.id) ? A.tooltip.showAt(e.endPosition, "ç¹å»æ¿æ´»ç¼è¾ï¼å³é®å é¤") ? A.tooltip.showAt(e.endPosition, "ç¹å»æ¿æ´»ç¼è¾") : A.tooltip.show(!1)); else 0 != F.states || O || A.tooltip.show(!1); if (A.isEditting && O) { src/assets/js/Map/index.js
@@ -85,7 +85,7 @@ if (cartesian.id.shpType && cartesian.id.shpType == 'temporaryLayer') { that.setEditTemporaryLayer() that.setEditTemporaryLayer(cartesian.id._id) } } @@ -95,7 +95,7 @@ // store.state.editTemporaryId = res; // console.log(store.state.editTemporaryId) if (store.state.editTemporaryId) { if (store.state.editTemporaryId && store.state.editTemporaryId == res) { store.state.setEditTemporaryShow = true; } src/assets/js/Map/server.js
@@ -159,7 +159,8 @@ this.setAddWmtsLayer(res); break; case 3: //WMS this.setAddWmsLayer(res); // this.setAddWmsLayer(res); this.setAddGeoWmsLayer(res) break; } }, @@ -179,7 +180,8 @@ case 0: //URL break; case 3: //WMS this.setAddWmsLayer(res); // this.setAddWmsLayer(res); this.setAddGeoWmsLayer(res) break; case 4: //WFS break; @@ -315,6 +317,7 @@ setAddWmsLayer(res) { var url = this.getLayrUrl(res); var img_layer = sgworld.Creator.createImageryProvider( "giserver", "wms", @@ -441,6 +444,7 @@ this.delLayer(res.id) var url = res.url; var that = this; var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat( "html", null, src/assets/js/Map/temporaryTools.js
@@ -37,7 +37,7 @@ heightReference = Number.POSITIVE_INFINITY; } var style; if (res.style) { if (res.outline) { style = Cesium.LabelStyle.FILL_AND_OUTLINE } else { style = Cesium.LabelStyle.FILL @@ -70,7 +70,7 @@ res.outlineColor ).withAlpha(res.outlineAlpha), outlineWidth: res.outlineWidth, outlineWidth: res.width, scale: res.scale, style: style, horizontalOrigin: Cesium.HorizontalOrigin.CENTER,//坹齿¹å¼ @@ -140,20 +140,23 @@ addTemporaryPolylineLayer(res) { var outlinewidth = 0 if (res.outline) { outlinewidth = res.outlineWidth outlinewidth = res.width } window.Viewer.entities.add({ name: res.cnName, id: res.id, shpType: res.shpType, outline: res.outline, polyline: { outline: res.outline, positions: Cesium.Cartesian3.fromDegreesArray(res.geometry), width: res.width, distanceDisplayCondition: new Cesium.DistanceDisplayCondition( res.near, res.far ), material: new Cesium.PolylineOutlineMaterialProperty({ color: Cesium.Color.fromCssColorString(res.material).withAlpha( res.materialAlpha src/store/index.ts
@@ -46,6 +46,7 @@ setEditTemporaryShow: false, editTemporarName: null, editTemporaryback: null, layerGroups:null, }, mutations: { // SET_plotting(state, obj) { src/views/export/exportMap.vue
@@ -160,7 +160,7 @@ } } res.push("moon"); res.push(); var obj = { layerIds: ids, token: token.replace("?token=", ""), src/views/layer/layerDetail.vue
@@ -2,11 +2,7 @@ <div class="content"> <div class="title"> <label> {{ layerData.cnName }}</label> <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer" > <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer"> <Close /> </el-icon> </div> @@ -19,68 +15,27 @@ alt="" /> </div> --> <div class="slider-demo-block" v-show="diaphaneityShow" > <div class="slider-demo-block" v-show="diaphaneityShow"> <div class="demonstration">éæåº¦</div> <el-slider v-model="transparence" @change="sliderChange" :format-tooltip="formatTooltip" /> <el-slider v-model="transparence" @change="sliderChange" :format-tooltip="formatTooltip" /> <div class="demonstration">{{ transparence }}%</div> </div> <div class="slider-demo-block" v-show="contrastShow" > <div class="slider-demo-block" v-show="contrastShow"> <div class="demonstration">对æ¯åº¦</div> <el-slider v-model="contrast" @change="contrastChange" :max="3" :step="0.1" /> <el-slider v-model="contrast" @change="contrastChange" :max="3" :step="0.1" /> <div class="demonstration">{{ contrast }}</div> </div> <div class="selectBox" v-show="drawingModeShow" > <div class="selectBox" v-show="drawingModeShow"> <div class="selectTile demonstration">æä¼¸æ¹å¼</div> <div class="stretchSelect"> <el-select :teleported="false" v-model="stretchValue" class="stretchSelect" :class="{ imgSelect: stretchNumShow }" placeholder="éæ©æä¼¸æ¹å¼" size="small" clearable @change="stretchChange" > <el-option v-for="item in stretchOptions" :key="item.value" :label="item.label" :value="item.value" > <el-select :teleported="false" v-model="stretchValue" class="stretchSelect" :class="{ imgSelect: stretchNumShow }" placeholder="éæ©æä¼¸æ¹å¼" size="small" clearable @change="stretchChange"> <el-option v-for="item in stretchOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <span v-show="stretchNumShow">-</span> <el-input-number class="stretchNum" v-show="stretchNumShow" :precision="2" :step="0.01" v-model="stretchNum" :min="stretchMin" :max="stretchMax" controls-position="right" size="small" @change="stretchNumChange" /> <el-input-number class="stretchNum" v-show="stretchNumShow" :precision="2" :step="0.01" v-model="stretchNum" :min="stretchMin" :max="stretchMax" controls-position="right" size="small" @change="stretchNumChange" /> </div> </div> <!-- <div @@ -139,15 +94,8 @@ </div> --> <div v-show="colorShow"> <div class="selectBox"> <el-button size="small" type="primary" @click="setColorLayerRelease" >确认</el-button> <el-button size="small" @click="setSpatialClose" >åæ¶</el-button> <el-button size="small" type="primary" @click="setColorLayerRelease">确认</el-button> <el-button size="small" @click="setSpatialClose">åæ¶</el-button> </div> </div> @@ -173,6 +121,8 @@ import { ElMessage } from "element-plus"; import store from "@/store"; import json from "@/assets/js/colorValue"; import { fa } from "element-plus/es/locale"; import { Edit } from "@element-plus/icons-vue/dist/types"; const stretchValue = ref(""); const transparence = ref(0); @@ -183,6 +133,8 @@ let select = ref(); let renderType = ref(""); let renderTypeOptions = ref([]); const tempLayer = ref(true) const groupsId = ref([]); let stretchOptions = [ { value: 0, @@ -237,7 +189,18 @@ }); const layerLength = ref(); const setSpatialClose = () => { emits("detailClose", false); var type = 1; var val = 1; if (tempLayer.value) { type = 0; val = (transparence.value / 100).toFixed(2); } emits("detailClose", { flag: false, type: type, val: val }); }; const getColorJson = async () => { @@ -333,8 +296,14 @@ }; //æ»ååå¨ const sliderChange = (val) => { if (tempLayer.value) { for (var i in groupsId.value) { server.layerList[groupsId.value[i]].layerData.alpha =( val / 100).toFixed(2); } } else { server.layerList[layerLength.value].layerData.alpha = val / 100; } }; const contrastChange = (val) => { server.layerList[layerLength.value].layerData.contrast = val; @@ -365,6 +334,9 @@ ) { contrastShow.value = true; // drawingModeShow.value = true; } if (val.isLayer == 0) { contrastShow.value = false; } if (val.data == 3 || val.data == 4) { colorShow.value = true; @@ -461,10 +433,24 @@ }; onMounted(() => { typeDisplay(props.layerData); if (props.layerData.isLayer == 0) {//å¾å±ç»éæåº¦ tempLayer.value = true; transparence.value = props.layerData.alpha * 100; var ids = store.state.layerGroups.layerIds server.layerList.forEach((e, i) => { for (var j in ids) { if (ids[j] == e.id) { groupsId.value.push(i) } } }); } else { tempLayer.value = false; server.layerList.forEach((e, i) => { if (props.layerData.id == e.id && e.layerData) { layerLength.value = i; transparence.value = e.layerData.alpha * 100; var alpha = e.layerData.alpha ? e.layerData.alpha : 0; transparence.value = parseInt(alpha * 100); } }); releaseLayer.value = props.layerData; @@ -472,6 +458,8 @@ drawingModeShow.value = true; colorShow.value = true; } } }); // getColorJson(); </script> @@ -489,6 +477,7 @@ background: rgba(7, 8, 14, 0.8); border: 1px solid #d6e4ff; box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); .title { font-size: 16px; font-family: Source Han Sans CN; @@ -498,10 +487,12 @@ justify-content: space-between; align-items: center; } .layer_box { margin-top: 10px; } } .check_box { display: flex; align-items: center; @@ -510,40 +501,49 @@ padding-top: 10px; font-size: 16px; color: #ffffff; img { width: 22px; height: 19px; } } .check_box .el-checkbox { font-size: 16px; color: #ffffff; } .check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner { background-color: rgba(13, 255, 0, 1); border-color: rgba(41, 109, 255, 1); } .check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label { color: #fff; } .slider-demo-block { margin-top: 22px; } .demonstration { font-size: 12px; font-weight: 300; color: #d6e4ff; } /deep/ .el-slider__runway { height: 2px; background: #73a1fa; } /deep/ .el-slider__bar { height: 2px; background: #73a1fa; } /deep/ .el-slider__button { width: 17px; height: 18px; @@ -552,33 +552,42 @@ background-size: 100% 100%; border-radius: 0; } .selectBox { margin-top: 24px; .selectTile { padding-bottom: 6px; } .el-select { width: 100%; } } /deep/.el-select-dropdown__item { font-size: 12px !important; } .stretchSelect { width: 100%; display: flex; justify-content: space-between; align-items: center; .stretchSelect { width: 100%; } .imgSelect { width: 60%; } span { color: #fff; margin: 0 10px; } .stretchNum { width: 30%; } src/views/layer/layerManage.vue
@@ -127,7 +127,11 @@ } store.state.editTemporaryId = data.id; sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id); sgworld.Creator.SimpleGraphic.edit(true, { editProp: false }); sgworld.Creator.SimpleGraphic.edit(true, { editProp: false, tipText: { ActiveText: 'ç¹å»æ¿æ´»ç¼è¾' } }); } else if (res == 2) { var layerId = [] layerId.push(data.sid) @@ -151,7 +155,18 @@ if (checkedKeys.indexOf(temporary.value) > -1) { checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1) } estreeRef.value.setCheckedKeys(checkedKeys, true); estreeRef.value.setCheckedKeys([], true); nextTick(() => { var layerIds = []; for (var i in checkedKeys) { var val = estreeRef.value.getNode(checkedKeys[i]).data; if (val.isLayer == 1) { layerIds.push(checkedKeys[i]); } } estreeRef.value.setCheckedKeys(layerIds, true); }) } }; //éæ©å¾å± @@ -160,6 +175,7 @@ layerDetailIsshow.value = false; let isCheck = checked.checkedKeys.indexOf(data.id) > -1; if (isCheck) { if (data.isLayer == 0) { let son = estreeRef.value.getCheckedNodes().reverse(); for (var i in son) { var layerArr = son[i]; @@ -170,6 +186,23 @@ server.addTreeData(layerArr); } } } else { if (data.shpType && data.shpType == 'temporaryLayer') {//临æ¶å¾å±æ·»å temporaryTool.addTemporaryTool(data); } else { let son = estreeRef.value.getCheckedNodes().reverse(); for (var i in son) { var layerArr = son[i]; layerArr.checked = true; if (layerArr.shpType && layerArr.shpType == 'temporaryLayer') {//临æ¶å¾å±æ·»å } else { server.addTreeData(layerArr); } } } } } else { if (data.isLayer == 0) { @@ -182,6 +215,7 @@ } } } else { if (data.shpType && data.shpType == 'temporaryLayer') {//临æ¶å¾å±æ·»å temporaryTool.removeTemporaryLayer(data); } else { @@ -190,52 +224,6 @@ } } //夿æ¯å¦ä¸ºç¶çº§ // if (data.isLayer == 0) {//为ç¶çº§ // let son = estreeRef.value.getCheckedNodes().reverse(); // for(var i in ) // } else {//为å级 // } // // if (data.shpType && data.shpType == 'temporaryLayer') { // if (isCheck) { // temporaryTool.addTemporaryTool(data); // } else if(!isCheck) { // temporaryTool.removeTemporaryLayer(data); // } // } else { // if (isCheck) { // let son = estreeRef.value.getCheckedNodes().reverse(); // for (var i in son) { // var layerArr = son[i]; // layerArr.checked = true; // if (layerArr.category == 2 && layerArr.type == 3) { // if (layerArr.tab != "moon:geo_mappable_unit") { // server.addTreeData(layerArr) // } // } else { // server.addTreeData(layerArr); // } // } // store.commit("SET_CHECKLAYER", son); // } else { // // } // } }; const setVisiable = (treeNode, checked) => { if (checked !== undefined) { @@ -276,10 +264,15 @@ layerAttributeIsshow.value = true; store.state.tab = e; } else if (res == 3) { let son = estreeRef.value.getCheckedNodes() var layerId = getCheckedLayerID(e, son); let son = estreeRef.value.getCheckedKeys(); var layerId = getCheckedLayerPID(e, son); if (layerId.length <= 0) { return ElMessage.error("请å å¾éå¾å±"); } layerDetailIsshow.value = true; store.state.layerGroups = { id: e.id, layerIds: layerId } } else { var val = estreeRef.value!.getCheckedKeys(false); @@ -292,14 +285,15 @@ }) }; const getCheckedLayerID = (res, result) => { const getCheckedLayerPID = (res, result) => { var temp = []; var ids = result let forFn = (data) => { data.children.forEach(item => { if (item.children) { forFn(item) temp.push(item.id) } else { if (result.indexOf(item.id) > -1) { if (ids.indexOf(item.id) > -1) { temp.push(item.id) } } @@ -309,10 +303,14 @@ return temp; }; const setSpatialClose = (res) => { layerAttributeIsshow.value = res; }; const detailClose = (res) => { layerDetailIsshow.value = res; if (res.type == 0) { estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val; } layerDetailIsshow.value = res.flag; }; //ç¼è¾å¾å±æ const addlayer = (res) => { @@ -381,7 +379,14 @@ // server.delLayerAll(); const dt = await perms_selectLayers(); if (dt.code == 200) { treeData.value = setTreeData(dt.result).sort(function (a, b) { var va_data = dt.result.filter((res) => { if (res.isLayer == 0) { res.alpha = 1; } return res; }) treeData.value = setTreeData(va_data).sort(function (a, b) { return a.orderNum - b.orderNum; }); const comperLayer = await mark_selectByPageAndCount({ @@ -430,25 +435,7 @@ //æ·»å é»è®¤éä¸å¾å± layerListData.value = dt.result; defaultLayer(dt.result); // var setGeoWms = []; // var url = null; // for (var i in adLayer) { // var layer = adLayer[i]; // if (layer.category == 2 && layer.type == 3) { // if (layer.tab != "moon:geo_mappable_unit") { // // setGeoWms.push(layer.tab); // // url = layer.url; // server.addTreeData(layer); // } // } else { // server.addTreeData(layer); // } // } // if (setGeoWms.length > 0) { // server.addGeoServerMmsLayers(setGeoWms, url); // } //; nextTick(() => { let son = estreeRef.value.getCheckedNodes(); setRestLayerData() @@ -526,10 +513,7 @@ } } nextTick(() => { estreeRef.value.setCheckedKeys(checkedKeys, true); }); }; const setEditLayerChange = async (res) => { src/views/plotting/attributeInfo.vue
@@ -22,15 +22,18 @@ </div> <div class="contentBox" v-show="showEntity.label"> <div class="contentLabel"> <label>å 容</label></div> <div class="contentmenu"><el-input size="mini" v-model="fromLine.text"></el-input></div> <div class="contentmenu"><el-input size="mini" @change="setEntityTextChange" v-model="fromLine.text"></el-input> </div> </div> <div class="contentBox" v-show="showEntity.label"> <div class="contentLabel"> <label>åä½</label></div> <div class="contentmenu"><el-input size="mini" v-model="fromLine.font"></el-input></div> <div class="contentmenu"><el-input size="mini" @change="setEntityFontChange" v-model="fromLine.font"></el-input> </div> </div> <div class="contentBox" v-show="showEntity.label"> <div class="contentLabel"> <label>æ¯ä¾å¤§å°</label></div> <div class="contentmenu"><el-input size="mini" v-model="fromLine.scale"></el-input></div> <div class="contentmenu"><el-input size="mini" @change="setEntityScaleChange" v-model="fromLine.scale"></el-input> </div> </div> <div class="contentBox" v-show="showEntity.point"> <div class="contentLabel"> <label>大å°</label></div> @@ -145,6 +148,16 @@ entity.value.name = fromLine.value.cnName; store.state.editTemporarName = fromLine.value.cnName; }; const setEntityTextChange = () => { entity.value.label.text._value = fromLine.value.text } const setEntityFontChange = () => { entity.value.label.font._value = fromLine.value.font; } const setEntityScaleChange = () => { entity.value.label.scale._value = fromLine.value.scale; } const setEntitySizeChange = () => { entity.value.point._pixelSize._value = parseInt(fromLine.value.size); }; @@ -156,12 +169,11 @@ break; case "label": entity.value.label.disableDepthTestDistance = fromLine.value.heightReference == true ? null : false; fromLine.value.heightReference == true ? null : Number.POSITIVE_INFINITY; break; case "polyline": entity.value.polyline.clampToGround = fromLine.value.heightReference; break; } }; const setEntityOutLineWidthReferenceChange = () => { @@ -202,9 +214,11 @@ } else if (type == 'polyline') { if (fromLine.value.outline) { entity.value.polyline.material.outlineWidth._value = fromLine.value.width; } else { entity.value.polyline.material.outlineWidth._value = null; } entity.value.outline = fromLine.value.outline } else if (type == 'rectangle') { entity.value.rectangle.outline._value = fromLine.value.outline; @@ -217,8 +231,10 @@ store.state.editTemporaryback = entity._value.id; store.state.setEditTemporaryShow = false; store.state.editTemporaryId = null; sgworld.Creator.SimpleGraphic.edit(false, { editProp: false }); sgworld.Creator.SimpleGraphic.SimpleGraphicObj=[]; }; const setEntityMaterColorChange = () => { const material = "rgb(255,255,255)";