@ohuoy/easymap 1.0.0

package/src/components/layer/ScanLayer.js

@@ -0,0 +1,468 @@
+
+import {hasProperty,transform} from '../../utils/util'
+import mapboxgl from 'mapbox-gl'; 
+export default class ScanLayer{
+    drawArray = []
+    defaultDrawInfo = {
+      id:'',
+      image:null,
+      coords:[],
+      refreshTime:null
+    }
+    opacity=0.7
+    //超时删除时间(秒)
+    outTime = 300
+    image;
+    positionRect;
+    gl;
+    renderBack = ()=>{}
+    textCtx=null;
+    textLayer;
+    timeLabels = {
+      'type': 'FeatureCollection',
+      'features':[]
+    }
+    constructor(id,_scanInfo) {
+        this.id = id;
+        this.type = 'custom';
+        this.renderingMode = '2d'; 
+        this.textCtx = document.createElement("canvas").getContext("2d");  
+        if(_scanInfo){
+          this.drawList(_scanInfo)
+        }
+        this.timeClear()
+    }
+
+    // 将文字放在画布中间 创建文本纹理
+
+    makeTextCanvas(text,style) {
+      let _style = {
+        fontSize:16,
+        fontFamily:'',
+        textAlign:'center',
+        fillStyle:'#000',
+        strokeStyle:"#fff",
+        textBaseline:'middle',
+        lineWidth:3
+      }
+      
+      let styleObj = Object.assign({},_style,style)
+      let padding = 2;
+      let width = styleObj.fontSize * text.length + padding * 2;
+      let height = styleObj.fontSize + padding * 2;
+      
+      this.textCtx.canvas.width  = width;
+      this.textCtx.canvas.height = height;
+      this.textCtx.font = `${styleObj.fontSize}px ${styleObj.fontFamily}`;
+      for(let i in styleObj){
+        if(i == 'fontSize' || i == 'fontFamily'){}
+        else{
+          this.textCtx[i] = styleObj[i]
+        }
+      }
+      this.textCtx.clearRect(0, 0, width, height);
+      this.textCtx.fillText(text, width / 2, height / 2);
+      return this.textCtx.canvas;
+    }
+    timeClear(){
+      setInterval(function(){
+        this.drawArray = this.drawArray.filter(a=>{
+          return (new Date().getTime() - a.refreshTime.getTime()) / 1000 < this.outTime
+        })
+      }.bind(this),1000)
+    }
+    // {
+    //   id:'',
+    //   image:''
+    // }
+    //添加图像object
+    drawList(_scanInfo){
+      let props = ['id','image','coords']
+      if(_scanInfo instanceof Array){
+       for(let _info of _scanInfo){
+        hasProperty(_info,props)
+        let currIndex = this.drawArray.findIndex(a=>a.id == _info.id)
+        _info.coords = _info.coords.map(a=>transform(a))
+        if(currIndex <0){
+          let entity = Object.assign({},this.defaultDrawInfo,_info)          
+          entity.refreshTime = new Date();
+          this.drawArray.push(entity)
+          if(entity.text){
+            this.drawTextByLayer(entity)
+          }else{
+            this.removeText(entity)
+          }
+        }else{
+          let entity = Object.assign({},this.defaultDrawInfo,_info)
+          entity.refreshTime = new Date();
+          this.drawArray[currIndex] = entity
+          if(entity.text){
+            this.drawTextByLayer(entity)
+          }else{
+            this.removeText(entity)
+          }
+        }
+       }
+      }else{
+        hasProperty(_scanInfo,props)
+        _scanInfo.coords = _scanInfo.coords.map(a=>transform(a))
+        let currIndex = this.drawArray.findIndex(a=>a.id == _scanInfo.id)
+        if(currIndex <0){
+          let entity = Object.assign({},this.defaultDrawInfo,_scanInfo)
+          entity.refreshTime = new Date();
+          this.drawArray.push(entity)
+          if(entity.text){
+            this.drawTextByLayer(entity)
+          }else{
+            this.removeText(entity)
+          }
+        }else{
+          let entity = Object.assign({},this.defaultDrawInfo,_scanInfo)
+          entity.refreshTime = new Date();
+          this.drawArray[currIndex] = entity
+          if(entity.text){
+            this.drawTextByLayer(entity)
+          }else{
+            this.removeText(entity)
+          }
+        }        
+      }     
+    }
+
+    del(id){
+      this.drawArray = this.drawArray.filter(a=>a.id != id);
+    }
+
+    onAdd(map, gl) {
+      //两个着色器
+        // const vertexSource = `
+        // uniform mat4 u_matrix;
+        // void main() {
+        //     gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
+        //     gl_PointSize = 20.0;
+        // }`;
+  
+        // const fragmentSource = `
+        // void main() {
+        //     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        // }`;
+        
+        const vertexSource = `
+        uniform mat4 u_matrix;
+        attribute vec3 a_pos;
+        attribute vec2 a_uv;
+        varying vec2 v_uv;
+        void main() {
+          v_uv = a_uv;
+          gl_Position = u_matrix * vec4(a_pos, 1.0);
+        } 
+        `;
+  
+        const fragmentSource = `
+        precision mediump float;
+        uniform float opa;
+        varying vec2 v_uv;
+        uniform sampler2D u_sampler;
+        void main() {
+            gl_FragColor = texture2D(u_sampler , v_uv) * opa;
+        }
+        `;
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, vertexSource);
+        gl.compileShader(vertexShader);
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, fragmentSource);
+        gl.compileShader(fragmentShader);
+  
+        this.program = gl.createProgram();
+        gl.attachShader(this.program, vertexShader);
+        gl.attachShader(this.program, fragmentShader)
+        gl.linkProgram(this.program);
+        this.aPos = gl.getAttribLocation(this.program, 'a_pos')
+        this.aUv = gl.getAttribLocation(this.program, 'a_uv')
+        this.opa = gl.getAttribLocation(this.program, 'opa')        
+        this.uSamplerLoc = gl.getUniformLocation(this.program, 'u_sampler')
+        this.gl = gl;
+        this.map = map;
+        //添加时间图层  消耗内存大 废弃
+        let timeTextLayer = this.map.getLayer('timeLabelLayer')
+        if(!this.map.getSource('timeLabels')){
+          this.map.addSource('timeLabels',{
+            'type': 'geojson',
+            'data':this.timeLabels,
+            'dynamic':true
+          })
+        }
+        if(!timeTextLayer){
+          this.map.addLayer({
+            'id': 'timeLabelLayer',
+            'type': 'symbol',
+            'source': 'timeLabels',              
+            'layout': {
+                'text-field': ['get', 'label'],
+                //'text-anchor':'center',
+                'text-size':18,                
+                'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
+                //'text-radial-offset': 0.5,
+                'text-justify': 'auto',
+                'icon-image': ['get', 'icon'],
+                'icon-anchor':'center',
+                'icon-offset':['get', 'icon-offset'],    
+                'text-ignore-placement':true,
+                'icon-ignore-placement':true       
+                //'icon-text-fit':'width',                                  
+            },
+            'paint':{
+              'text-color':['get', 'text-color'],
+              'icon-color':'#0f3ad0',
+              'text-halo-color':['get', 'text-border-color'],
+              'text-halo-width':1
+            }
+        });
+        timeTextLayer = this.map.getLayer('timeLabelLayer')
+        }
+    }
+  
+    draw(){    
+      for(let i in this.drawArray)  {   
+        this.drawArrayItem(this.drawArray[i])     
+      }   
+    }
+
+    drawText(item){
+      let gl = this.gl;
+      let scale = 12
+      if(!item.textTextture){
+        item.textTextture = gl.createTexture()    
+      }
+      let center = item.coords[3]//transform(item.center)
+      gl.bindTexture(gl.TEXTURE_2D,item.textTextture)
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
+      let textCanvas = this.makeTextCanvas(item.text?.label,item?.text?.textStyle)
+      if(!textCanvas){
+        return
+      }
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textCanvas);
+      item.textBuffer = gl.createBuffer()
+      gl.bindBuffer(gl.ARRAY_BUFFER, item.textBuffer)
+      let p1 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: center[0],
+        lat: center[1]
+      }, 10)
+      let p2 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: center[0]+0.03 * scale,
+        lat: center[1]
+      }, 10)
+      let p3 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: center[0]+0.03 * scale,
+        lat: center[1]+0.001 * scale
+      }, 10)
+      let p4 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: center[0],
+        lat: center[1]+0.001 * scale
+      }, 10)
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([
+          // position, uv
+          p1.x, p1.y, p1.z, 0, 0,
+          p2.x, p2.y, p2.z, 1, 0,
+          p3.x, p3.y, p3.z, 1, 1,
+  
+          p1.x, p1.y, p1.z, 0, 0,
+          p3.x, p3.y, p3.z, 1, 1,
+          p4.x, p4.y, p4.z, 0, 1,
+        ]),
+        gl.STATIC_DRAW
+      )
+      gl.bindTexture(gl.TEXTURE_2D, item.textTextture)
+      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, item.textBuffer)
+      // 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)
+        
+      gl.enable(gl.BLEND)
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+  
+      // 触发绘制
+      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)
+      gl.vertexAttrib1f(this.opa,1)
+      gl.drawArrays(gl.TRIANGLES, 0, 6)      
+    }
+
+    //
+    drawTextByLayer(item){      
+      let _itemIndex = this.timeLabels.features.findIndex(a=>a.properties.id == item.id)
+      if(_itemIndex < 0){
+        this.timeLabels.features.push({
+          'type': 'Feature',
+            'properties': {
+                'id':item.id,
+                'label':item.text.label,
+                'text-color':item.text.color?item.text.color:'#0f3ad0',
+                'text-border-color':item.text.borderColor?item.text.borderColor:'#fff'
+            },
+            'geometry': {
+                'type': 'Point',
+                'coordinates': transform(item?.text?.coord)
+            }
+        })
+      }else{
+        this.timeLabels.features[_itemIndex] = {
+          'type': 'Feature',
+            'properties': {
+              'id':item.id,
+                'label':item.text.label,
+                'text-color':item.text?.color?item.text?.color:'#0f3ad0',
+                'text-border-color':item.text?.borderColor?item.text?.borderColor:'#fff'
+            },
+            'geometry': {
+                'type': 'Point',
+                'coordinates': transform(item?.text?.coord)
+            }
+        }
+      }            
+    }
+
+    removeText(item){
+      let _itemIndex = this.timeLabels.features.findIndex(a=>a.properties.id == item.id)
+      if(_itemIndex >=0){
+        this.timeLabels.features =  this.timeLabels.features.filter(a=>a.properties.id != item.id)
+      }
+    }
+
+    drawArrayItem(item){
+      if(!item?.image){
+        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.texture){
+        item.texture = gl.createTexture()       
+      }
+      
+      gl.bindTexture(gl.TEXTURE_2D,item.texture)
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
+      // 上载数据
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, item.image)      
+      item.buffer = gl.createBuffer()
+      gl.bindBuffer(gl.ARRAY_BUFFER, item.buffer)
+      let p1 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: item.coords[0][0],
+        lat: item.coords[0][1]
+      }, 10)
+      let p2 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: item.coords[1][0],
+        lat: item.coords[1][1]
+      }, 10)
+      let p3 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: item.coords[2][0],
+        lat: item.coords[2][1]
+      }, 10)
+      let p4 = mapboxgl.MercatorCoordinate.fromLngLat({
+        lng: item.coords[3][0],
+        lat: item.coords[3][1]
+      }, 10)
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([
+          // position, uv
+          p1.x, p1.y, p1.z, 0, 0,
+          p2.x, p2.y, p2.z, 1, 0,
+          p3.x, p3.y, p3.z, 1, 1,
+  
+          p1.x, p1.y, p1.z, 0, 0,
+          p3.x, p3.y, p3.z, 1, 1,
+          p4.x, p4.y, p4.z, 0, 1,
+        ]),
+        gl.STATIC_DRAW
+      )
+      gl.bindTexture(gl.TEXTURE_2D, item.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, 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)
+        
+      gl.enable(gl.BLEND)
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+  
+      // 触发绘制
+      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)
+      gl.vertexAttrib1f(this.opa,0.7)
+      gl.drawArrays(gl.TRIANGLES, 0, 6)      
+    }
+  
+    render(gl, matrix) {
+      if(this.drawArray.length == 0) 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.map.getSource('timeLabels').setData(this.timeLabels)
+      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();                
+    }
+  }
+
+