@ohuoy/easymap 1.0.0

package/src/components/layer/WallLayer.js

@@ -0,0 +1,318 @@
+
+import {hasProperty,transform} from '../../utils/util'
+import mapboxgl from 'mapbox-gl'; 
+export default class ScanLayer{
+  drawArray = []
+  defaultDrawInfo = {
+    id:'',
+    colors:[],
+    coords:[],
+    refreshTime:null
+  }
+    constructor(id,_scanInfo) {
+        this.id = id;
+        this.type = 'custom';
+        this.renderingMode = '2d';       
+    }
+
+    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()
+  }
+
+     //添加object 支持多路径添加
+     //data 二维数组 croods 路径列表  colors 二维数组
+    drawList(_scanInfo){
+      let props = ['id','coords','colors']
+      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)         
+        }else{
+          let entity = Object.assign({},this.defaultDrawInfo,_info)
+          entity.refreshTime = new Date();
+          this.drawArray[currIndex] = 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)          
+        }else{
+          let entity = Object.assign({},this.defaultDrawInfo,_scanInfo)
+          entity.refreshTime = new Date();
+          this.drawArray[currIndex] = entity         
+        }        
+      }     
+    }
+
+  
+    draw(){    
+      for(let i in this.drawArray)  {   
+        if(this.drawArray[i].id){
+          this.drawArrayItem(this.drawArray[i])     
+        }        
+      }   
+    }
+
+    //
+    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();                
+  // }
+}
+
+
+       

package/src/model/EasyMapComponents.ts

@@ -0,0 +1,13 @@
+import { Popup } from "@antv/l7"
+import type BaseEasyMapEvent from './EasyMapEvent'
+
+declare namespace EasyMapComponents {
+    type EasyMapMarker = {
+        id:string,
+        lng:Number,
+        lat:Number,
+        popup:null | Popup,
+        event:null | Array<BaseEasyMapEvent>
+    }
+}
+

package/src/model/EasyMapEvent.ts

@@ -0,0 +1,6 @@
+declare namespace EasyMapEvent {
+    type BaseEasyMapEvent = {
+        type:string,
+        fun:Function
+    }
+}

package/src/utils/util.js

@@ -0,0 +1,104 @@
+import gcoord from 'gcoord';
+import * as turf from '@turf/turf'
+
+export function transform(lnglat,r,coord1=gcoord.WGS84,coord2=gcoord.GCJ02)
+{
+  if(r){
+    gcoord.transform(lnglat, coord1, coord2);
+  }
+  return gcoord.transform(lnglat, coord2, coord1);
+} 
+
+export function midPoint(lnglat1,lnglat2){
+  var point1 = turf.point(lnglat1);
+  var point2 = turf.point(lnglat2);
+  return turf.midpoint(point1, point2);
+}
+
+export function hasProperty(object,props){
+  if(props.length == 0) throw new Error('parmas props length is 0')
+  for(let prop of props){
+    if(!object.hasOwnProperty(prop)){
+      throw new Error(`object property not contain ${prop}`)
+    }
+  }
+}
+
+export function GetPointByRawData(origin, distance, vAngle, hAngle)
+{                      
+    let num = 6371.137;
+    let d = origin.lat * Math.PI / 180;
+    let num2 = origin.lng * Math.PI / 180;
+    let d2 = (Math.round(distance * Math.cos(vAngle * Math.PI / 180) * 1000)/1000) /num;
+    let mapPoint = {};
+    let d3 = hAngle * Math.PI / 180;
+    mapPoint.lat = Math.asin(Math.sin(d) * Math.cos(d2) + Math.cos(d) * Math.sin(d2) * Math.cos(d3));
+    mapPoint.lng = (num2 + Math.atan2(Math.sin(d3) * Math.sin(d2) * Math.cos(d), Math.cos(d2) - Math.sin(d) * Math.sin(mapPoint.lat))) * 180 / Math.PI;
+    mapPoint.lat = mapPoint.lat * 180 / Math.PI;                      
+    return mapPoint;
+}
+
+export function getLayerMapPosition(scanDis,center,vAngle=90,r = 600/600){  
+  let dis = scanDis * Math.sqrt(2) *  r// 斜边长度(公里)  
+  let leftTop = GetPointByRawData({
+    lng:center[0],lat:center[1]
+  },dis,vAngle -90,225)
+  let rightBottom = GetPointByRawData({
+      lng:center[0],lat:center[1]
+  },dis,vAngle -90,45)
+  let bounds = [
+      [leftTop.lng,leftTop.lat],
+      [rightBottom.lng,leftTop.lat],
+      [rightBottom.lng,rightBottom.lat],
+      [leftTop.lng,rightBottom.lat]
+  ]
+  return bounds;
+}
+
+export function dataURLtoBlob(dataurl) {
+  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+  while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+export function downloadFile(url,name){
+  var a = document.createElement("a")
+  a.setAttribute("href",url)
+  a.setAttribute("download",name)
+  a.setAttribute("target","_blank")
+  let clickEvent = document.createEvent("MouseEvents");
+  clickEvent.initEvent("click", true, true);  
+  a.dispatchEvent(clickEvent);
+}
+
+export function downloadFileByBlob(blob,name){
+  let url = window.URL.createObjectURL(blob);  // 生成文件在浏览器中的链接
+  let a = document.createElement('a');
+  a.href = url;
+  a.download = name;  // 文件名
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  window.URL.revokeObjectURL(url);  // 清除文件链接
+}
+
+export function downloadFileByBase64(base64,name){
+  var myBlob = dataURLtoBlob(base64)
+  var myUrl = URL.createObjectURL(myBlob)
+  downloadFile(myUrl,name)
+}
+
+
+ /**
+* 生成GUID
+*/
+export function guid() {
+ function S4() {
+   return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+ }
+ return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+}

package/webpack.config.js

@@ -0,0 +1,37 @@
+const path=require('path')
+module.exports={
+    mode:'development', // 开发模式
+    entry:path.resolve(__dirname,'./main.js'),
+    module:{        
+        rules: [{
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+        }, {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env'],
+                },
+            },
+          },
+          {
+            test: /\.(png|jpe?g|gif|svg)$/,
+            use: [
+                {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192, // 小于8KB的图片将转换为 base64 编码，减少请求
+                        name: './images/[name].[hash:8].[ext]',
+                    },
+                },
+            ],
+          }]
+        
+    },
+    output:{
+        path:path.resolve(__dirname,'./dist'),
+        filename:"bundle.js"
+    }
+}