@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/layer/WebGlWallLayer.js

@@ -0,0 +1,320 @@
+
+import {hasProperty,transform} from '../../utils/util'
+import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
+import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
+export default class ScanLayer{
+  drawArray = []
+  defaultDrawInfo = {
+    id:'',
+    colors:[],
+    coords:[],
+    refreshTime:null
+  }
+  opacity = 0.8
+  scale = 2
+  limit = 6
+  colorFun = ()=>{
+      return [0,0,0,0]
+  }
+  addedFun = null
+    constructor(id,_scanInfo) {
+        this.id = id;
+        this.opacity = Number(config.opacity) 
+        if(config.colorFun){
+            this.colorFun = config.colorFun       
+        }        
+        this.type = 'custom';
+        this.renderingMode = '2d';    
+        this.addedFun = config.addedFun 
+    }
+
+    onAdd(map, gl) {
+      // create GLSL source for vertex shader
+      const vertexSource = `
+          uniform mat4 u_matrix;
+          attribute vec4 a_pos;
+          attribute vec4 a_color;
+          varying vec4 v_color;
+          void main() {
+              gl_Position = u_matrix * vec4(a_pos);
+              v_color = a_color;
+          }`;
+
+      // create GLSL source for fragment shader
+      const fragmentSource = `  
+          precision mediump float;    
+          varying vec4 v_color;
+          void main() {
+            gl_FragColor = v_color;
+          }`;
+
+      // 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.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.gl = gl;
+      this.map = map;
+      // define vertices of the triangle to be rendered in the custom style layer
+      
+      // create and initialize a WebGLBuffer to store vertex and color data
+      // this.buffer = gl.createBuffer();
+      // gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+      // gl.bufferData(
+      //     gl.ARRAY_BUFFER,
+      //     new Float32Array(),
+      //     gl.STATIC_DRAW
+      // );
+  }
+
+  // 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
+      );
+      //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);
+      this.draw()
+  }
+
+    //
+    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;
+    }
+
+    createData(dataList){
+        let distance = dataList[0].distance;
+        let noDataLenth = distance[0] / distance[1]
+        let limitIndex = this.limit / distance[1]
+        limitIndex = limitIndex >= distance[2] -1 ? distance[2] -1 : limitIndex
+        // dataList = dataList.slice(0,5)
+        let len = limitIndex + noDataLenth;
+        let index = 0;
+        for(let i in dataList){
+            i = Number(i)            
+            let item = dataList[i]            
+            let lng = item.lng;
+            let lat = item.lat;
+            let position = projectToWorld([lng,lat])
+            if(i < dataList.length -1){
+                let next = dataList[i+1]
+                if(lng == next.lng && lat == next.lat){
+                    continue;
+                }
+                for(let j in item.data){
+                    j = Number(j)               
+                    if(j > -noDataLenth && j <= limitIndex){
+
+                    }
+                }
+            }
+        }
+    }
+
+    begin(dataList){
+        this.createData(dataList)
+    }
+
+    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();                
+  // }
+}
+
+
+       

package/src/components/mapOutScreen.js

@@ -12,7 +12,7 @@ const mapOutScreen = class {
     progress=()=>{}
     constructor(center,distance,config = {
         target:null,
-        style: 'http://192.168.11.93:1234/api/styles/osm',
+        style: 'http://dbcenter.gyquantum.com/easymap/styles/light',
         type:'blob',
         pix:{
           w:1024,
@@ -29,7 +29,7 @@ const mapOutScreen = class {
               h:1024
             },
             opacity:0.7,
-            style: 'http://192.168.11.93:1234/api/styles/osm',
+            style: 'http://dbcenter.gyquantum.com/easymap/styles/light',
             callback:()=>{},
           },config)
         
@@ -77,6 +77,7 @@ const mapOutScreen = class {
                 })
               })
               this.map = scene.map;  
+
               return new Promise((resolve, reject) => {
                 scene.map.on('load',async ()=>{
                   if(!imageList || imageList.length == 0){
@@ -169,7 +170,18 @@ const mapOutScreen = class {
         imgItemEl.onload = (b)=>{
           this.ctx.drawImage(b.currentTarget,0,0,this.canvas.width,this.canvas.height)
           this.ctx.font = point.addTime.font ? point.addTime.font : '32px SimHei'
-          this.ctx.fillText(point.addTime.text,point.addTime.left,point.addTime.top)  
+          this.ctx.fillText(point.addTime.text,point.addTime.left,point.addTime.top) 
+          if(point.rect && point.rect.x && point.rect.y) {    
+            this.ctx.strokeStyle = 'red';
+            this.ctx.lineWidth = 5;
+            this.ctx.globalAlpha = 1;           
+            let x = (point.distance * 1000 + point.rect.x *1)/point.distance /2000 *this.canvas.width  ;
+            let y = (point.distance * 1000 - point.rect.y *1 )/point.distance / 2000 *this.canvas.height ;
+            let size = point.rect.size?point.rect.size:80;
+            let startX = x -size/2,startY = y - size/2
+            this.ctx.strokeRect(startX,startY,size,size)    
+            this.ctx.save()  
+          }
           resolve(this.canvas.toDataURL())
         }           
       })

package/src/utils/CameraSync.js

@@ -185,17 +185,20 @@ export default class {
         let y = t.y || t.point.y;
         translateMap.makeTranslation(-x, y, 0);
         rotateMap.makeRotationZ(Math.PI);
-
         this.world.matrix = new THREE.Matrix4()
             .premultiply(rotateMap)
             .premultiply(this.state.translateCenter)
             .premultiply(scale)
             .premultiply(translateMap)
 
+        // console.log(nearZ,farZ)  
+        // console.log(this.camera.position)
         // utils.prettyPrintMatrix(this.camera.projectionMatrix.elements);
-        this.map.fire('CameraSynced', { detail: { nearZ: nearZ, farZ: farZ, pitch: t._pitch, angle: t.angle, furthestDistance: furthestDistance, cameraToCenterDistance: this.cameraToCenterDistance, t: this.map.transform, tbProjMatrix: this.camera.projectionMatrix.elements, tbWorldMatrix: this.world.matrix.elements, cameraSyn: this } });
+        this.map.fire('CameraSynced', { detail: { nearZ: nearZ, farZ: farZ , pitch: t._pitch, angle: t.angle, furthestDistance: furthestDistance, cameraToCenterDistance: this.cameraToCenterDistance, t: this.map.transform, tbProjMatrix: this.camera.projectionMatrix.elements, tbWorldMatrix: this.world.matrix.elements, cameraSyn: this } });
 
     }
 
 
-}
+}
+
+

package/src/utils/mapWatch.js

@@ -0,0 +1,70 @@
+
+var watchList = [];
+
+let cb;
+const targetMap = new WeakMap();
+/**
+ * @description 实现依赖收集，为属性和其对应的回调函数建立关联
+ * @param {Object} target 目标对象
+ * @param {any}  key  当前被收集的属性
+ */
+function collect(target, key) {
+    const effect = cb; // 从全局获取当前依赖对应的回调
+    if (effect) {
+      // 建立target，key和effect之间映射关系
+      let depMap = targetMap.get(target);
+      // 初始化时，该对象所对应的键值对还不存在，则创建一个map
+      if (!depMap) {
+        depMap = new Map();
+        targetMap.set(target, depMap);
+      }
+      // 获取该属性对应的的Set
+      let deps = depMap.get(key);
+      if (!deps) { 
+        deps = new Set();
+        depMap.set(key, deps);
+      }
+      deps.add(effect); // 给当前属性添加一个回调
+    }
+  }
+
+
+function update(target, key) {
+    // 根据target和key获取对应的set
+    // 循环执行
+    const depMap = targetMap.get(target);
+    if (!depMap) {
+      return;
+    }
+    const deps = depMap.get(key);
+    deps.forEach((dep) => dep());
+}
+
+export function observe(obj){
+    if (typeof obj !== "object") {
+        return obj;
+      }
+    return new Proxy(obj,{
+        get(target, key, receiver) {
+            //console.log(key + '被收集');
+            const res = Reflect.get(target, key, receiver); 
+            // 依赖收集
+            collect(target, key);
+            // 深层响应化
+            return typeof obj === "object" ? observe(res) : res;
+          },
+          set(target, key, val, receiver) {
+            //console.log("set", key);
+            const res = Reflect.set(target, key, val, receiver);
+            // 侦听到数据变化，执行相应回调
+            update(target, key);
+            return res;
+          }
+    })
+}
+
+export function esMapWatchEffect(fn) {
+    cb = fn;
+    fn();// 触发依赖收集
+    cb = null;
+  }

package/src/utils/util.js

@@ -123,3 +123,6 @@ export function sleep(ms) {
 }
 
 
+export function destination(center,r,distance,options={units: 'kilometers' }){
+  return turf.destination(center,distance,r,options)
+}