@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/layer/ScanWallLayer.js

@@ -0,0 +1,467 @@
+
+import {hasProperty,transform} from '../../utils/util.js'
+import  mapboxgl from 'mapbox-gl';
+import { getBBox } from '../../utils/util';
+import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
+export default class ScanWallLayer{
+  opacity = 0.8
+  scale = 2 
+  limit = 6
+  colorFun = ()=>{
+      return [0,0,0,0]
+  }
+  addedFun = null
+  aPosition;
+  aColor;
+  vertices = [];
+  indices = [];
+  program;
+    constructor(id,config) {
+        this.id = id;
+        this.type = 'custom';
+        this.renderingMode = '2d';   
+        this.opacity = Number(config.opacity) 
+        if(config.colorFun){
+            this.colorFun = config.colorFun       
+        }     
+        this.addedFun = config.addedFun       
+    }
+
+    createProgram(gl, vsSource, fsSource) {
+      this.program = gl.createProgram();
+      let program = this.program
+      const vertexShader = this.compileShader(gl, gl.VERTEX_SHADER, vsSource);
+      const fragmentShader = this.compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+      
+      gl.attachShader(program, vertexShader);
+      gl.attachShader(program, fragmentShader);
+      gl.linkProgram(program);
+      
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+          alert('程序链接失败：' + gl.getProgramInfoLog(program));
+          return null;
+      }
+      return program;
+  }
+
+  compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        alert('着色器编译失败：' + gl.getShaderInfoLog(shader));
+        return null;
+    }
+    return shader;
+}
+    onAdd(map, gl) {
+      // create GLSL source for vertex shader
+      const vsSource = `
+          uniform mat4 u_matrix;
+          attribute vec4 aPosition;
+          attribute vec4 aColor;
+          varying vec4 vColor;
+          void main() {
+              gl_Position = u_matrix * vec4(aPosition);
+              vColor = aColor;
+          }`;
+
+      // create GLSL source for fragment shader
+      const fsSource = `  
+          precision mediump float;    
+          varying vec4 vColor;
+          void main() {
+           
+            gl_FragColor = vColor;
+          }`;
+
+      // create a vertex shader
+      // const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+      // gl.shaderSource(vertexShader, vertexSource);
+      // gl.compileShader(vertexShader);
+
+      // // create a fragment shader
+      // const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+      // gl.shaderSource(fragmentShader, fragmentSource);
+      // gl.compileShader(fragmentShader);
+
+      // link the two shaders into a WebGL program
+      this.gl = gl;
+      this.program = this.createProgram(gl, vsSource, fsSource);
+      let program = this.program;
+      gl.useProgram(this.program );
+        
+      this.map = map;
+      if(this.addedFun)       
+            this.addedFun()     
+  }
+
+
+//   createPoints(_pathPoints){    
+//   //   const pathPoints = [
+//   //     { x: -2, z: -1, color: [1, 0, 0, 1] }, // 红色
+//   //     { x:  0, z:  1, color: [0, 1, 0, 1] }, // 绿色
+//   //     { x:  2, z: -1, color: [0, 0, 1, 1] }, // 蓝色
+//   // ];
+//     let vertices = [];
+//     let indices = [];
+//     for (const point of _pathPoints) {
+//         // 底部顶点 (x, 0, z)
+//         vertices.push(point.x,point.y, point.z,  ...point.color);
+//         // 顶部顶点 (x, height, z)
+//         vertices.push(point.x, point.y, point.z , ...point.color);
+//     }
+
+    
+//     for (let i = 0; i < _pathPoints.length - 1; i++) {
+//         const base = i * 2;
+//         indices.push(
+//             base,     base + 1, base + 3,  // 第一个三角形
+//             base,     base + 3, base + 2   // 第二个三角形
+//         );
+//     }
+// }
+
+  draw(){
+    let gl = this.gl;
+    this.createBuffer()
+    gl.enable(gl.DEPTH_TEST);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.clear(gl.DEPTH_BUFFER_BIT);
+    // gl.clearColor(0.2, 0.2, 0.2, 1.0);
+    // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
+  }
+
+  createBuffer(){
+    let gl = this.gl;
+    let program = this.program;
+    // 创建缓冲区
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
+    
+    const indexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STATIC_DRAW);
+    const aPosition = gl.getAttribLocation(program, 'aPosition');
+      const aColor = gl.getAttribLocation(program, 'aColor');
+      this.aPosition = aPosition;
+      this.aColor = aColor;   
+      const stride = 7 * 4; // 3(position) + 4(color)
+      gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, stride, 0);
+      gl.enableVertexAttribArray(aPosition);
+      gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, stride, 12);
+      gl.enableVertexAttribArray(aColor);
+  }
+
+
+  drawWallPoints(dataList){
+    dataList = dataList.slice(0,373)
+    
+      let indices  =[
+    ]
+      let vertices = [
+    ]
+      let distance = dataList[0].distance;
+      let noDataLenth = distance[0] / distance[1]
+      let limitIndex = Math.floor(this.limit / distance[1])
+      limitIndex = limitIndex >= distance[2] -1 ? distance[2] -1 : limitIndex
+      let len = limitIndex + noDataLenth;
+      let index = 0;
+      let pointList = []
+      for(let i in dataList){
+        let bo = i < dataList.length -1;
+        if(bo){
+          let nextIndex = i *1 +1;
+          let item = dataList[i]
+          let lng = item.lng;
+          let lat = item.lat;
+          // let position2 = projectToWorld([lng,lat])    
+          let position =  mapboxgl.MercatorCoordinate.fromLngLat({lng:item.lng,lat:item.lat})
+          // debugger
+          let next = dataList[nextIndex]
+          if(lng == next.lng && lat == next.lat){
+              continue;
+          }else{
+            // let point = [position.x  ,position.y,position.z+h ]  
+            // let color = this.colorFun(item.data[j])
+            // pointList.push({
+            //   point:point,
+            //   color:[color[0]/255,color[1]/255,color[2]/255 ,color[3]]
+            // })
+            index =  vertices.length / 7
+            for(let j in item.data){             
+              let h = (j * 1 -1 +noDataLenth) * this.scale * 0.0000001  
+              if(j > -noDataLenth && j <= limitIndex){
+                let point = [position.x  ,position.y,position.z+h ]         
+                let color = this.colorFun(item.data[j])
+                vertices.push(...point,color[0]/255,color[1]/255,color[2]/255 ,color[3])
+                // debugger
+                // debugger
+                // vertices.push(position.x ,position.y,position.z+2*h ,...color )
+                if(i < (dataList.length -2) && j<= (limitIndex -1)){ 
+                  let a = index +1
+                  let b = index     
+                  let c = index +len
+                  let d = index +len   +1
+                  indices.push( a,b,d); // face one
+                  indices.push( b, c, d ); 
+                  index = index +1;   
+                }                 
+              }      
+            }       
+          }             
+        }
+        console.log('面:'+indices.length / 6)  
+        console.log('点:'+vertices.length / 7)
+        console.log('长度：'+len)
+        // index = vertices.length / 7
+      }
+      this.indices = indices;
+      this.vertices = vertices; 
+      // this.createWallBuffer(pointList,len)
+      this.createBuffer();
+      this.map.fitBounds(getBBox(dataList.map(a=>[a.lng,a.lat])), {
+          padding: {top: 45, bottom:45, left: 35, right: 35},
+          maxZoom:11,
+          pitch:30
+      });  
+  }
+
+createWallBuffer(_pathPoints,height){  
+  let vertices = [],indices = [];  
+    for (const point of _pathPoints) {
+        for(let i=0;i < height;i++){
+            vertices.push(...point.point,  ...point.color);    
+        }
+    }
+
+    
+    for (let i = 0; i < _pathPoints.length - 1; i++) {
+        let base = height * i
+        for(let j=0;j < height -1;j++){   
+            let a = base;
+            let b = base +1 ;
+            let c = base + height;
+            let d = base + height +1               
+            indices.push(
+               b,d,a,
+                a,d,c              
+            );
+            base = base +=1;   
+        }        
+    }
+    this.vertices = vertices;
+    this.indices = indices;
+}
+
+  // method fired on each animation frame
+  // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
+  render(gl, matrix) {
+      gl.useProgram(this.program);
+      gl.uniformMatrix4fv(
+          gl.getUniformLocation(this.program, 'u_matrix'),
+          false,
+          matrix
+      );
+      this.draw()
+      //gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+      // gl.enableVertexAttribArray(this.aPos);
+      // gl.vertexAttribPointer(this.aPos, 3, gl.FLOAT, false, 0, 0);
+      // gl.enable(gl.BLEND);
+      // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      //gl.drawArrays(gl.TRIANGLE_STRIP, 0, 12);
+      
+  }
+
+    // //
+    // createBufferData(item){
+    //   let height = 0.0000001
+    //   let arrs = []
+    //   //let colors = []
+    //   for(let cr in item.coords){ 
+    //     let _next = 1   
+    //     if(cr !=0 ){
+    //       let p1 = mapboxgl.MercatorCoordinate.fromLngLat({
+    //         lng: item.coords[cr-_next][0],
+    //         lat: item.coords[cr-_next][1]
+    //       }, 10)
+    //       let p2 = mapboxgl.MercatorCoordinate.fromLngLat({
+    //         lng: item.coords[cr][0],
+    //         lat: item.coords[cr][1]
+    //       }, 10)
+    //       if(p1.x == p2.x && p1.y == p2.y && p1.z== p2.z){
+    //         _next +=1
+    //       }else{            
+    //         //创建矩形区域            
+    //         for(let _c in item.colors[cr]){
+    //           let _height = height + height *Number(_c)
+    //           //创建垂直矩形区域
+    //           // let rect = [
+    //           //   p1.x,p1.y,p1.z,
+    //           //   p2.x,p2.y,p2.z,
+    //           //   p1.x,p1.y,_height,
+    //           //   p2.x,p2.y,_height,
+    //           // ]
+    //           let _colorinfo = item.colors[cr][_c]
+    //           let _color = [_colorinfo[0]/255,_colorinfo[1]/255,_colorinfo[2]/255,_colorinfo[3]]
+    //           arrs.push(p1.x)
+    //           arrs.push(p1.y)
+    //           arrs.push(p1.z)
+    //           arrs.push(_color[0])
+    //           arrs.push(_color[1])
+    //           arrs.push(_color[2])
+    //           arrs.push(_color[3])
+    //           arrs.push(p2.x)
+    //           arrs.push(p2.y)
+    //           arrs.push(p2.z)
+    //           arrs.push(_color[0])
+    //           arrs.push(_color[1])
+    //           arrs.push(_color[2])
+    //           arrs.push(_color[3])
+    //           arrs.push(p1.x)
+    //           arrs.push(p1.y)
+    //           arrs.push(_height) 
+    //           arrs.push(_color[0])
+    //           arrs.push(_color[1])
+    //           arrs.push(_color[2])
+    //           arrs.push(_color[3])             
+    //           arrs.push(p2.x)
+    //           arrs.push(p2.y)
+    //           arrs.push(_height)
+    //           arrs.push(_color[0])
+    //           arrs.push(_color[1])
+    //           arrs.push(_color[2])
+    //           arrs.push(_color[3])
+    //         }
+    //         _next=1;
+    //       }          
+    //     }
+    //   }
+    //   return arrs;
+    // }
+
+    // drawArrayItem(item){
+    //   if(!item?.coords || !item.colors){
+    //     return;
+    //   }
+    //   // if(!item?.text){
+    //   //   this.removeText(item)
+    //   // }
+    //   // if(item?.text?.type == 'layer'){
+    //   //   this.drawTextByLayer(item)
+    //   // }
+    //   // if(item?.text){
+    //   //   this.drawText(item)
+    //   // }
+    //   let gl = this.gl;  
+    //   if(!item?.buffer)    {
+    //     item.buffer = gl.createBuffer();
+    //     let _data = this.createBufferData(item);
+    //     gl.bindBuffer(gl.ARRAY_BUFFER, item.buffer);
+    //     let bufferDataArray = new Float32Array(_data);
+    //     item.bufferDataLength = _data.length;
+    //     gl.bufferData(
+    //         gl.ARRAY_BUFFER,
+    //         bufferDataArray,
+    //         gl.STATIC_DRAW
+    //     );
+
+    //     item.bufferColor = gl.createBuffer();
+    //     gl.bindBuffer(gl.ARRAY_BUFFER, item.bufferColor);
+    //     gl.bufferData(
+    //       gl.ARRAY_BUFFER,
+    //       bufferDataArray,
+    //       gl.STATIC_DRAW
+    //     );
+    //     item.byteSize = bufferDataArray.BYTES_PER_ELEMENT
+    //     item.aColor = gl.getAttribLocation(this.program, 'a_color');
+    //     // 每帧都要绑定 VBO，并启用 vertexAttributes、设置 vertexAttributes 的参数
+    //     //gl.bindBuffer(gl.ARRAY_BUFFER, item.buffer)
+    //     // gl.enableVertexAttribArray(this.aPos)
+    //     // gl.enableVertexAttribArray(this.aUv)
+    //     // gl.vertexAttribPointer(this.aPos, 3, gl.FLOAT, false, 20, 0)
+    //     // gl.vertexAttribPointer(this.aUv, 2, gl.FLOAT, false, 20, 12)
+    //   }  
+    //   // item.buffer = gl.createBuffer()                
+    //   //   let bufferData = this.createBufferData(item)
+    //   //   item.dataLength = bufferData.length
+    //   //   gl.bufferData(
+    //   //     gl.ARRAY_BUFFER,
+    //   //     new Float32Array([0.8250514363610296,
+    //   //             0.41078121183273425,
+    //   //             2.99947200815501e-7,
+    //   //             0.8250521974715219,
+    //   //             0.40078065150822717,
+    //   //             2.999477853115788e-7,
+    //   //             0.8250514363610296,
+    //   //             0.41078121183273425,
+    //   //             0.02,
+    //   //             0.8250521974715219,
+    //   //             0.40078065150822717,
+    //   //             0.02]),
+    //   //     gl.STATIC_DRAW
+    //   //   )  
+    
+    //   gl.bindBuffer(gl.ARRAY_BUFFER, item.buffer);
+    //   gl.enableVertexAttribArray(this.aPos);
+    //   gl.vertexAttribPointer(this.aPos, 3, gl.FLOAT, false,  item.byteSize  *7, 0);
+
+    //   gl.bindBuffer(gl.ARRAY_BUFFER, item.bufferColor);
+    //   gl.enableVertexAttribArray(item.aColor);
+    //   gl.vertexAttribPointer(item.aColor, 4, gl.FLOAT, false, item.byteSize * 7, item.byteSize*3);
+
+    //   gl.enable(gl.BLEND);
+    //   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    //   gl.drawArrays(gl.TRIANGLE_STRIP, 0, item.bufferDataLength);
+    // }
+  
+  //   render(gl, matrix) {
+  //     if(this.drawArray.length == 0 || !this.program) return;
+  //     gl.useProgram(this.program)
+  //     // 每帧都要传递 uniform
+  //     gl.uniformMatrix4fv(
+  //     gl.getUniformLocation(this.program, 'u_matrix'),
+  //       false,
+  //       matrix
+  //     )        
+  //     //gl.uniform1f(gl.getUniformLocation(this.program, 'opa'),this.opacity)  
+  //     this.draw()
+
+  //     // gl.useProgram(this.program)
+  //     // // 每帧都要传递 uniform
+  //     // gl.uniformMatrix4fv(
+  //     //   gl.getUniformLocation(this.program, 'u_matrix'),
+  //     //   false,
+  //     //   matrix
+  //     // )
+  //     // // 每帧都要绑定纹理参数
+  //     // gl.bindTexture(gl.TEXTURE_2D, this.texture)
+  //     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  //     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  //     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+  //     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
+  
+  //     // // 每帧都要绑定 VBO，并启用 vertexAttributes、设置 vertexAttributes 的参数
+  //     // gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
+     
+  
+  //     // 如果你用不着透明度，可以不执行这两行
+  //     // gl.enable(gl.BLEND)
+  //     // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+  
+  //     // 触发绘制
+  //     //gl.drawArrays(gl.TRIANGLES, 0, 6)
+  //  // 每帧都要指定用哪个着色器程序    
+  //   if(this.renderBack!=null) {
+  //     if(this.renderBack) this.renderBack() 
+  //   }            
+  //     //this.map.triggerRepaint();                
+  // }
+}
+
+
+