管道路线绘制、加载

src/components/mapJK.vue

@@ -39,6 +39,11 @@ import ReRenderingEvent from "../units/map/ReRenderingEvent.js";
 import PathPipeEvent from "../units/map/PathPipeEvent.js";
 import FlyGLTFEvent from "../units/map/FlyGLTFEvent.js";
 
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import AddDrawEvent from "../units/map/addDrawEvent.js";
+import SymbolPathPipeEvent from "../units/map/SymbolPathPipeEvent.js";
+
 export default {
   name: "mapJK",
   setup(){
@@ -60,6 +65,10 @@ export default {
     let reRenderingEvent = null;
     let pathPipeEvent = null;
     let flyGLTFEvent = null;
+    let addDrawEvent = null;
+    let draw_GeometryMeshPrismEffectEvent = null;
+    let symbolPathPipeEvent = null;
+    let draw_SymbolPathPipeEvent = null;
     onMounted(() =>{
       bus.on('CreateMap',() =>{
         MapReady = $.Deferred();
@@ -164,6 +173,15 @@ export default {
           case "FlyGLTF":
             flyGLTF(params);
             break;
+          case "Draw":
+            draw(params);
+            break;
+          case "Draw_GeometryMeshPrismEffect":
+            draw_GeometryMeshPrismEffect(params);
+            break;
+          case "SymbolPathPipe":
+            symbolPathPipe(params);
+            break;
         }
       }
       function setBackground(params){
@@ -493,10 +511,12 @@ export default {
         }
         let height = m_view.camera.position.z;
         console.log("height",height,"scale",m_view.scale)
-        let size = extentGridLimit({
+        let sizeObj = extentGridLimit({
           eyeExtent,
           height
-        })
+        });
+        let size = sizeObj.size;
+        let opacity = sizeObj.opacity;
         let layerHeight;
         if(size > 400){
           layerHeight = 400;
@@ -510,6 +530,7 @@ export default {
           addThreeGridEvent.layerHeight = layerHeight;
           addThreeGridEvent.gridEnabled = true;
           addThreeGridEvent.netEnabled = true;
+          addThreeGridEvent.opacity = opacity;
           addThreeGridEvent.start();
         }else{
           addThreeGridEvent = new AddThreeGridEvent({
@@ -519,6 +540,7 @@ export default {
             size:size,
             gridEnabled : true,
             netEnabled : true,
+            opacity:opacity,
             layerHeight:layerHeight,
           })
           addThreeGridEvent.start();
@@ -528,20 +550,42 @@ export default {
 
       function extentGridLimit(params){
         try{
-          let size = [0.97,7.73,61.84,123.69,1850];
+          //let size = [7.73,61.84,123.69,1850];
+          let size = [
+            {
+              value:7.73,
+              opacity:0.05
+            },
+            {
+              value:61.84,
+              opacity:0.05
+            },
+            {
+              value:123.69,
+              opacity:0.15
+            },
+            {
+              value:1850,
+              opacity:0.3
+            }
+          ]
           params.eyeExtent = {
             xmin: params.eyeExtent.xmin < -60000?-60000:params.eyeExtent.xmin,
             ymin: params.eyeExtent.ymin < -60000?-60000:params.eyeExtent.ymin,
             xmax: params.eyeExtent.xmax > 60000?60000:params.eyeExtent.xmax,
             ymax: params.eyeExtent.ymax > 70000?70000:params.eyeExtent.ymax,
           }
+          params.height = params.height < 1200?params.height:1200;
           for(let i = 0;i<size.length;i++){
-            let xCount = Math.floor((params.eyeExtent.xmax - params.eyeExtent.xmin) / size[i]);
-            let yCount = Math.floor((params.eyeExtent.ymax - params.eyeExtent.ymin) / size[i]);
-            let zCount = Math.floor(params.height / size[i]);
+            let xCount = Math.floor((params.eyeExtent.xmax - params.eyeExtent.xmin) / size[i].value);
+            let yCount = Math.floor((params.eyeExtent.ymax - params.eyeExtent.ymin) / size[i].value);
+            let zCount = Math.floor(params.height / size[i].value);
             let count = xCount * yCount * zCount;
             if(count < 200000){
-              return size[i]
+              return {
+                size: size[i].value,
+                opacity: size[i].opacity
+              }
             }
           }
         }catch(e){
@@ -671,7 +715,8 @@ export default {
           items:params.items,
           startHeight:params.startHeight,
           rings:params.rings
-        })
+        });
+        m_map.add(geometryMeshPrismEffect.graphicsLayer);
       }
 
       function pathPipe(params){
@@ -710,6 +755,100 @@ export default {
           flyGLTFEvent.followPath();
         }
       }
+
+      function draw(params){
+        let geometryType = params.type;
+        let status = params.status;
+        let hasZ = params.hasZ;
+        let symbol = params.symbol;
+        if(addDrawEvent){
+          addDrawEvent.clear();
+          addDrawEvent = null;
+        }
+        if(status == "hide"){
+          return
+        }
+        addDrawEvent = new AddDrawEvent({
+          view:m_view,
+          type:geometryType,
+          symbol,
+          hasZ
+        })
+        addDrawEvent.start();
+      }
+
+
+      function draw_GeometryMeshPrismEffect(params){
+        let geometryType = params.type;
+        let status = params.status;
+        let startHeight = params.startHeight;
+        let items = params.items;
+        if(addDrawEvent){
+          addDrawEvent.clear();
+          addDrawEvent = null;
+        }
+        if(draw_GeometryMeshPrismEffectEvent){
+          draw_GeometryMeshPrismEffectEvent.clear();
+          draw_GeometryMeshPrismEffectEvent = null;
+        }
+        let f_layer = m_map.layers.find(item => item.id === "geometryMeshPrismEffect");
+        if (f_layer) {
+          m_map.remove(f_layer);
+        }
+        if(status == "hide"){
+          return
+        }
+        addDrawEvent = new AddDrawEvent({
+          view:m_view,
+          type:geometryType
+        })
+        addDrawEvent.start();
+        addDrawEvent.createListenerEvent((geometry)=>{
+          if(draw_GeometryMeshPrismEffectEvent){
+            draw_GeometryMeshPrismEffectEvent.clear();
+            draw_GeometryMeshPrismEffectEvent = null;
+          }
+          draw_GeometryMeshPrismEffectEvent = new GeometryMeshPrismEffect({
+            view:m_view,
+            m_map,
+            items:items,
+            startHeight:startHeight,
+            rings:geometry.rings
+          });
+          m_map.add(draw_GeometryMeshPrismEffectEvent.graphicsLayer);
+        })
+        addDrawEvent.updateListenerEvent((geometry)=>{
+          if(draw_GeometryMeshPrismEffectEvent){
+            draw_GeometryMeshPrismEffectEvent.clear();
+            draw_GeometryMeshPrismEffectEvent = null;
+          }
+          draw_GeometryMeshPrismEffectEvent = new GeometryMeshPrismEffect({
+            view:m_view,
+            m_map,
+            items:items,
+            startHeight:startHeight,
+            rings:geometry.rings
+          });
+          m_map.add(draw_GeometryMeshPrismEffectEvent.graphicsLayer);
+        })
+      }
+
+      function symbolPathPipe(params){
+        let status = params.status;
+        let f_layer = m_map.layers.find(item => item.id === "symbolPathPipeEvent");
+        if (f_layer) {
+          m_map.remove(f_layer);
+        }
+        if(status == "hide"){
+          return
+        }
+        symbolPathPipeEvent = new SymbolPathPipeEvent({
+          view:m_view,
+          paths:params.paths,
+        })
+        m_map.add(symbolPathPipeEvent.graphicsLayer);
+      }
+
     })
   }
 }

src/components/mapTest.vue

@@ -126,6 +126,7 @@ export default {
   .left{
     width: 12%;
     height: 100%;
+    overflow-y: auto;
     border-right:1px solid #BFDFFF;
   }
   .middle{

src/config/basicTool.json

@@ -58,7 +58,7 @@
             "title":"WhiteMold",
             "visible": true,
             "opacity": 1,
-            "url": "\nhttps://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzI5NTE2NDgsImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.w2Ind0H4xqEMGLkzD8wUtxblpSVgzLXnBWvhCY7jnS8",
+            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzMyOTMwMDksImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.cbmzULPKfqUTfpeBD7_9sQqkLQaCbr-dMnVc0qCrve8",
             "token": ""
           }
         }
@@ -581,6 +581,118 @@
             "speed": 0.001
           }
         }
+      },
+      {
+        "code": "1-20",
+        "title": "绘制",
+        "data": {
+          "ActionName": "Draw",
+          "Parameters": {
+            "type": "polyline",
+            "hasZ": true,
+            "status":"show",
+            "symbol": {
+              "type": "line-3d",
+              "symbolLayers": [{
+                "type": "path",
+                "profile": "circle",
+                "material": {
+                  "color": [0, 255, 0,0.3]
+                },
+                "width": 30,
+                "height": 30
+              }]
+            },
+            "token": ""
+          }
+        }
+      },
+      {
+        "code": "1-21",
+        "title": "绘制_几何拉高",
+        "data": {
+          "ActionName": "Draw_GeometryMeshPrismEffect",
+          "Parameters": {
+            "type": "polygon",
+            "status":"show",
+            "startHeight": 0,
+            "items":[
+              {
+                "id": 1,
+                "name": "",
+                "depth": 300,
+                "material": [
+                  4,138,255,
+                  0.4
+                ]
+              }
+            ],
+            "token": ""
+          }
+        }
+      },
+      {
+        "code": "1-22",
+        "title": "样式路径管线",
+        "data": {
+          "ActionName": "SymbolPathPipe",
+          "Parameters": {
+            "status":"show",
+            "paths":  [
+              [
+                4419.489284,
+                7361.3196348,
+                0
+              ],
+              [
+                4722.45233401,
+                7353.53178799,
+                112.6
+              ],
+              [
+                5082.94702425,
+                7512.13693485,
+                112.6
+              ],
+              [
+                5757.15146837,
+                7714.98006736,
+                112.6
+              ],
+              [
+                5775.16196758,
+                7551.31840959,
+                112.6
+              ],
+              [
+                5774.80167843,
+                7449.51383181,
+                112.6
+              ],
+              [
+                5737.21978829,
+                7127.43709037,
+                112.6
+              ],
+              [
+                5591.31188012,
+                6784.34449701,
+                61.6
+              ],
+              [
+                5542.67695791,
+                6669.98448716,
+                41
+              ],
+              [
+                5533.43949585,
+                6674.18149397,
+                26
+              ]
+            ],
+            "token": ""
+          }
+        }
       }
     ]
   }

src/units/map/GeometryMeshPrismEffect.js

@@ -9,6 +9,7 @@ class GeometryMeshPrismEffect{
         this.startHeight = options.startHeight;
         this.rings = options.rings;
         this.m_map = options.m_map;
+        this.graphicsLayer = null;
         this.addGeometryMeshPrismEffect()
     }
 
@@ -19,7 +20,7 @@ class GeometryMeshPrismEffect{
         }
         let items = this.items;
         let polygonVertices = this.rings[0].slice(0, this.rings[0].length - 1);
-        let graphicsLayer = new GraphicsLayer({
+        this.graphicsLayer = new GraphicsLayer({
             id: "geometryMeshPrismEffect",
             title: "空域分层"
         })
@@ -77,11 +78,11 @@ class GeometryMeshPrismEffect{
                 geometry: prismMesh,
                 symbol: symbol
             });
-            graphicsLayer.add(cylinderGraphic);
-
+            this.graphicsLayer.add(cylinderGraphic);
         })
-        this.m_map.add(graphicsLayer);
     }
-
+    clear(){
+        this.graphicsLayer.removeAll();
+    }
 }
 export default GeometryMeshPrismEffect;

src/units/map/InitMap.js

@@ -11,9 +11,9 @@ class InitMap{
     }
     intMap(){
         this.m_map = new Map({});
-        this.m_map.ground.navigationConstraint = {
-            type: "none"
-        };
+        // this.m_map.ground.navigationConstraint = {
+        //     type: "none"
+        // };
         this.m_view = new SceneView({
             container:"viewDiv",
             map:this.m_map,
@@ -40,11 +40,11 @@ class InitMap{
                 }
             }
         });
-        this.m_view.constraints = {
-            collision: {
-                enabled: false
-            }
-        };
+        // this.m_view.constraints = {
+        //     collision: {
+        //         enabled: false
+        //     }
+        // };
         this.m_view.ui.empty("top-left");
         this.m_view.ui.remove("attribution");
     }

src/units/map/SymbolPathPipeEvent.js

@@ -0,0 +1,44 @@
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import Graphic from "@arcgis/core/Graphic.js";
+import Polyline from "@arcgis/core/geometry/Polyline.js";
+
+class SymbolPathPipeEvent{
+    constructor(options) {
+        this.view = options.view;
+        this.paths = options.paths;
+        this.graphicsLayer = null;
+        this.add();
+    }
+    add(){
+        let geometry = new Polyline({
+            type:"polyline",
+            spatialReference:this.view.spatialReference,
+            paths:this.paths
+        })
+        this.graphicsLayer = new GraphicsLayer({
+            id: "symbolPathPipeEvent",
+            title: "绘制管线"
+        });
+        let symbol = {
+            type: "line-3d",
+            symbolLayers: [{
+                type: "path",
+                profile: "circle",
+                material: {
+                    color: [0, 255, 0,0.3]
+                },
+                width: 30, // the width in m
+                height: 30 // the height in m
+            }]
+        };
+        let graphic = new Graphic({
+            geometry: geometry,
+            symbol: symbol
+        });
+        this.graphicsLayer.add(graphic);
+    }
+    clear(){
+        this.graphicsLayer.removeAll();
+    }
+}
+export default SymbolPathPipeEvent;

src/units/map/addDrawEvent.js

@@ -0,0 +1,76 @@
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+
+
+class AddDrawEvent {
+    constructor(options) {
+        this.view = options.view;
+        this.type = options.type;
+        this.hasZ = options.hasZ || false;
+        this.graphicLayer = null;
+        this.sketchViewModel = null;
+        this.createListenerEventHander = null;
+        this.updateListenerEventHander = null;
+        this.symbol = options.symbol;
+    }
+    start(){
+        this.graphicLayer = new GraphicsLayer();
+        this.view.map.add(this.graphicLayer);
+        this.sketchViewModel = new SketchViewModel({
+            view: this.view,
+            layer: this.graphicLayer,
+            defaultCreateOptions: {hasZ: this.hasZ}
+        });
+        if(this.symbol){
+            switch (this.type){
+                case "point":
+                    this.sketchViewModel.pointSymbol = this.symbol;
+                    break;
+                case "polyline":
+                    this.sketchViewModel.polylineSymbol = this.symbol;
+                    break;
+                case "polygon":
+                    this.sketchViewModel.polygonSymbol = this.symbol;
+                    break;
+            }
+        }
+        this.sketchViewModel.create(this.type);
+    }
+    createListenerEvent(callback){
+        this.clearCreateListenerEvent()
+        this.createListenerEventHander = this.sketchViewModel.on("create", (event) => {
+            if (event.state === "complete") {
+                callback(event.graphic.geometry);
+            }
+        });
+    }
+    updateListenerEvent(callback){
+        this.clearUpdateListenerEvent()
+        this.updateListenerEventHander = this.sketchViewModel.on("update", (event) => {
+            if (event.state === "complete") {
+                callback(event.graphics[0].geometry);
+            }
+        });
+    }
+    clearCreateListenerEvent(){
+        if(this.createListenerEventHander){
+            this.createListenerEventHander.remove();
+            this.createListenerEventHander = null;
+        }
+    }
+    clearUpdateListenerEvent(){
+        if(this.updateListenerEventHander){
+            this.updateListenerEventHander.remove();
+            this.updateListenerEventHander = null;
+        }
+    }
+    clear(){
+        this.clearCreateListenerEvent();
+        this.clearUpdateListenerEvent()
+        this.sketchViewModel.cancel();
+        this.view.map.remove(this.graphicLayer);
+        this.graphicLayer = null;
+    }
+
+}
+export default AddDrawEvent;

src/units/map/addThreeGridEvent.js

@@ -12,6 +12,7 @@ class AddThreeGridEvent{
         this.layerHeight = options.layerHeight;
         this.gridEnabled = options.gridEnabled;
         this.netEnabled = options.netEnabled;
+        this.opacity = options.opacity;
         this.animationEnabled = options.animationEnabled;
     }
     start(){
@@ -39,6 +40,7 @@ class AddThreeGridEvent{
                     maxX: that.extent.maxX > 60000?60000:that.extent.maxX,
                     maxY: that.extent.maxY > 70000?70000:that.extent.maxY,
                 },
+                opacity:that.opacity,
                 gridEnabled:that.gridEnabled,
                 netEnabled:that.netEnabled,
                 height:that.height,

src/units/threejs/threeGrid.js

@@ -11,6 +11,7 @@ export const ThreeGridClass = {
         this.layerColors = this.layerColors || [new THREE.Color(0xff0000), new THREE.Color(0x00ff00), new THREE.Color(0x0000ff)] // 自定义每层颜色
         this.gridEnabled = options.gridEnabled;
         this.netEnabled = options.netEnabled;
+        this.opacity = options.opacity;
         this.mesh = null;
         this._camera = null;
         this.currentLayer = 0;
@@ -83,15 +84,15 @@ export const ThreeGridClass = {
 
     createInstancedMesh() {
         //const geometry = new THREE.BoxGeometry(this.layerHeight, this.size, this.size);
-        const geometry = new THREE.BoxGeometry(7.73, 7.73, 7.73);
+        const geometry = new THREE.BoxGeometry(this.size, this.size, this.size);
         geometry.computeVertexNormals();  // 计算并更新顶点法线
         const material = new THREE.MeshPhongMaterial({
             transparent: true,
-            opacity: 0.5,
+            opacity: this.opacity,
             depthTest:true,
-            side:THREE.DoubleSide
+            side:THREE.DoubleSide,
+            depthWrite: false // 关闭深度写入
         });
-        debugger
         // 修改材质支持 instanceColor
         material.onBeforeCompile = (shader) => {
             shader.vertexShader = `
@@ -119,9 +120,9 @@ export const ThreeGridClass = {
             `
             );
         };
-        const xCount = Math.floor((this.extent.maxX - this.extent.minX) / this.size);
-        const yCount = Math.floor((this.extent.maxY - this.extent.minY) / this.size);
-        const zCount = Math.floor(this.height / this.layerHeight);
+        const xCount = Math.ceil((this.extent.maxX - this.extent.minX) / this.size);
+        const yCount = Math.ceil((this.extent.maxY - this.extent.minY) / this.size);
+        const zCount = Math.ceil(this.height / this.layerHeight);
         const count = xCount * yCount * zCount;
         this.mesh = new THREE.InstancedMesh(geometry, material, count);
         // 为实例添加颜色属性
@@ -130,50 +131,48 @@ export const ThreeGridClass = {
         const color = new THREE.Color();
         let index = 0;
 
-        // for (let i = 0; i < xCount; i++) {
-        //     for (let j = 0; j < yCount; j++) {
-        //         for (let k = 0; k < zCount; k++) {
-        //             const worldX = this.extent.minX + i * this.size + this.size / 2;
-        //             const worldY = this.extent.minY + j * this.size + this.size / 2;
-        //             const worldZ = k * this.layerHeight + this.layerHeight / 2;
-        //             debugger
-        //             let renderPos = [];
-        //             this.webgl.toRenderCoordinates(this.view, [worldX, worldY, worldZ], 0, this.view.spatialReference, renderPos, 0, 1);
-        //
-        //             dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
-        //             dummy.updateMatrix();
-        //             this.mesh.setMatrixAt(index, dummy.matrix);
-        //
-        //             // 分配颜色：由层数计算从红到绿的渐变
-        //             const layerFraction = k / (zCount - 1); // 当前层在总层数中的比例
-        //             color.setHSL(layerFraction * 0.33, 1, 0.5); // HSL中的H从0（红）到0.33（绿）
-        //
-        //             instanceColors[index * 3] = color.r;
-        //             instanceColors[index * 3 + 1] = color.g;
-        //             instanceColors[index * 3 + 2] = color.b;
-        //
-        //             index++;
-        //         }
-        //     }
-        // }
-
-        for(let i=0;i<Path.ypPath.length;i++){
-            let renderPos = [];
+        for (let i = 0; i < xCount; i++) {
+            for (let j = 0; j < yCount; j++) {
+                for (let k = 0; k < zCount; k++) {
+                    const worldX = this.extent.minX + i * this.size + this.size / 2;
+                    const worldY = this.extent.minY + j * this.size + this.size / 2;
+                    const worldZ = k * this.layerHeight + this.layerHeight / 2;
+                    let renderPos = [];
+                    this.webgl.toRenderCoordinates(this.view, [worldX, worldY, worldZ], 0, this.view.spatialReference, renderPos, 0, 1);
 
-            this.webgl.toRenderCoordinates(this.view, [Path.ypPath[i][0] * 7.73,Path.ypPath[i][1] * 7.73,Path.ypPath[i][2] * 7.73], 0, this.view.spatialReference, renderPos, 0, 1);
+                    dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
+                    dummy.updateMatrix();
+                    this.mesh.setMatrixAt(index, dummy.matrix);
 
-            dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
-            dummy.updateMatrix();
-            this.mesh.setMatrixAt(index, dummy.matrix);
+                    // 分配颜色：由层数计算从红到绿的渐变
+                    const layerFraction = k / (zCount); // 当前层在总层数中的比例
+                    color.setHSL(layerFraction * 0.33, 1, 0.5); // HSL中的H从0（红）到0.33（绿）
 
-            debugger
-            instanceColors[index * 3] = 0;
-            instanceColors[index * 3 + 1] = 1;
-            instanceColors[index * 3 + 2] = 0;
+                    instanceColors[index * 3] = color.r;
+                    instanceColors[index * 3 + 1] = color.g;
+                    instanceColors[index * 3 + 2] = color.b;
 
-            index++;
+                    index++;
+                }
+            }
         }
 
+        // for(let i=0;i<Path.ypPath.length;i++){
+        //     let renderPos = [];
+        //
+        //     this.webgl.toRenderCoordinates(this.view, [Path.ypPath[i][0] * 7.73,Path.ypPath[i][1] * 7.73,Path.ypPath[i][2] * 7.73], 0, this.view.spatialReference, renderPos, 0, 1);
+        //
+        //     dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
+        //     dummy.updateMatrix();
+        //     this.mesh.setMatrixAt(index, dummy.matrix);
+        //
+        //     instanceColors[index * 3] = 0;
+        //     instanceColors[index * 3 + 1] = 1;
+        //     instanceColors[index * 3 + 2] = 0;
+        //
+        //     index++;
+        // }
+
 
         // 为实例化的网格设置颜色
         geometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instanceColors, 3));
@@ -183,7 +182,7 @@ export const ThreeGridClass = {
 
         // 将网格和边框分别添加到场景中
         this.scene.add(this.mesh);
-        this.scene.add(this.mergedLineMesh);  // 添加边框线
+        // this.scene.add(this.mergedLineMesh);  // 添加边框线
 
         // 网格的光照
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
@@ -228,9 +227,10 @@ export const ThreeGridClass = {
             );
             const lineMaterial = new THREE.LineBasicMaterial({
                 color: 0xffffff,
-                opacity: 0.5,
+                opacity: 0.3,
                 linewidth: 1,
-                transparent: true,
+                transparent: true
+
             });
             const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
             this.scene.add(lines);
@@ -280,9 +280,9 @@ export const ThreeGridClass = {
         this.currentLayer = (this.currentLayer + 1) % Math.floor(this.height / this.layerHeight); // 递增层数并循环
 
         const dummy = new THREE.Object3D();
-        const xCount = Math.floor((this.extent.maxX - this.extent.minX) / this.size);
-        const yCount = Math.floor((this.extent.maxY - this.extent.minY) / this.size);
-        const zCount = Math.floor(this.height / this.layerHeight);
+        const xCount = Math.ceil((this.extent.maxX - this.extent.minX) / this.size);
+        const yCount = Math.ceil((this.extent.maxY - this.extent.minY) / this.size);
+        const zCount = Math.ceil(this.height / this.layerHeight);
 
         let index = 0;
         const linePositions = []; // 用于存储当前层级的边框线段