@ohuoy/easymap 1.0.11 → 1.0.13

package/index.js

@@ -6,13 +6,15 @@ import * as mdi from '@mdi/js'
 import './lib/mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 import * as turf from '@turf/turf'
-import {getLayerMapPosition, transform,downloadFileByBase64,guid,downloadFile,downloadFileByBlob} from './src/utils/util.js';
+import {getLayerMapPosition, transform,downloadFileByBase64,downloadFileBlobByBase64,guid,downloadFile,downloadFileByBlob, sleep} from './src/utils/util.js';
 import Toobars from './src/components/control/Toobars.js'
 import TilesBar from './src/components/control/TilesBar.js'
 import DrawBar from './src/components/control/DrawBar.js'
 import { ScanLayer } from './src/components/index.js';
 import JSZip from 'jszip';
 import gif from './src/components/gif/gif.js'
+import * as EmComponents  from './src/components/index'
+
 import { getGifWorker } from './src/components/gif/gif.worker.js'
 
 //导出组件
@@ -49,7 +51,7 @@ export class EasyMap {
       } 
       config.center = config?.center? transform(config.center): transform([108.7198975,35.0446]);
       this.config = Object.assign(this.config,config) 
-        let scene = new Scene({
+      let scene = new Scene({
             id: target,
             logoVisible:false,
             // map: new Mapbox({
@@ -491,13 +493,38 @@ export class EasyMap {
     }
     
     //获取指定位置指定距离截图
-    getMapImageByDistance(center,distance,_target){
+    getMapImageByDistance(center,distance,imageList=[],config = {
+      target:null,
+      style: 'http://192.168.11.93:1234/api/styles/osm',
+      type:'blob',
+      pix:{
+        w:1024,
+        h:1024
+      },
+      callback:()=>{}
+    }){
       let target;
+      config =  Object.assign({},{
+        target:null,
+        type:'blob',
+        delay:300,
+        pix:{
+          w:1024,
+          h:1024
+        },
+        opacity:0.7,
+        style: 'http://192.168.11.93:1234/api/styles/osm',
+        callback:()=>{}
+      },config)
       let bounds = getLayerMapPosition(distance,transform(center))      
-      if(!_target) target = document.createElement('div');          
-      else target = _target;
-      let pix = 1024;
-      target.style = `width:${pix}px;height:${pix}px;`
+      if(!config.target) {
+        target = document.createElement('div');
+      }
+      else{
+        target = config.target;
+      }
+      let pix = config.pix;
+      target.style = `width:${pix.w}px;height:${pix.h}px;z-index:-1;`
       document.body.appendChild(target)
       let scene = new Scene({
         id: target,
@@ -505,11 +532,12 @@ export class EasyMap {
         //   mapInstance: map,
         // }),
         map: new Mapbox({
-        style:'http://192.168.11.93:1234/api/styles/osm',
+        style:config.style,
         preserveDrawingBuffer:true, 
-        center:transform([114.7198975,23.0446]),
+        //center:transform([114.7198975,23.0446]),
         bounds:[bounds[0],bounds[2]], 
-        container:target,       
+        container:target,  
+        opacity:0.7,     
         pitch: 0,
         zoom: 0,
         rotation: 0,
@@ -517,10 +545,33 @@ export class EasyMap {
         })
       })
       let map = scene.map;  
-      map.on('load',()=>{
-        let base64 = map._canvas.toDataURL();
-        downloadFileByBase64(base64,guid())
-        target.remove()  
+      map.on('load',async ()=>{
+        if(!imageList || imageList.length == 0){
+          let base64 = map._canvas.toDataURL();
+          if(config.type == 'download'){
+            downloadFileByBase64(base64,guid())
+          }//downloadFileByBase64(base64,guid())
+          else if(config.type == 'blob'){
+            config.callback(downloadFileBlobByBase64(base64))
+          }
+        }else{
+          let scanLayer = map.getLayer('threescan-layer');
+          if(!scanLayer){
+            scanLayer= new EmComponents.ThreeScanLayer('threescan-layer',{
+                opacity:config.opacity,
+                textClass:' map-time zmax ',
+            })
+            map.addLayer(scanLayer);            
+          }              
+          for(let i in imageList){
+            let a = imageList[i]
+            let base64 = await scanLayer.drawImageList(a,config.delay)             
+           // map.getCanvas().toDataURL()
+            config.callback(downloadFileBlobByBase64(base64))
+          }
+        }
+        
+        //target.remove()  
       })  
     } 
 

package/main.js

@@ -12,7 +12,9 @@ import {ShaderPass} from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import {FXAAShader} from 'three/examples/jsm/shaders/FXAAShader.js';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
-
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import { Line2 } from 'three/addons/lines/Line2.js';
+import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial.js'
 import {
     GammaCorrectionShader
 } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';
@@ -29,6 +31,7 @@ export {
     EmComponents,
     EmUtils,
     mapboxgl,
+    Line2,
     OrbitControls,
     UnrealBloomPass,
     ant7,
@@ -38,6 +41,8 @@ export {
     RenderPass,
     ShaderPass,
     OutlinePass,
+    LineGeometry,
+    LineMaterial,
     FXAAShader,
     GammaCorrectionShader
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohuoy/easymap",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "self map easy use",
   "main": "main.js",
   "scripts": {

package/src/components/layer/ThreeScanLayer.js

@@ -1,5 +1,5 @@
 
-import {hasProperty,transform} from '../../utils/util'
+import {hasProperty,transform,downloadFileByBase64, sleep} from '../../utils/util'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
 import * as THREE from 'three'
 import { Threebox } from  'threebox-plugin'; 
@@ -17,9 +17,9 @@ export default class ThreeScanLayer{
     }
 
     //同时渲染多个地点图片文本
-    drawImageList(list){              
+    async drawImageList(list,delay = 300){              
         for(let i in list){
-            this.update(list[i])
+            await this.update(list[i])
             //this.drawArray.push(list[i])
         }    
         for(let i in this.drawArray){
@@ -30,6 +30,10 @@ export default class ThreeScanLayer{
             }
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
+        tb.update(); 
+        this.map.triggerRepaint();
+        await sleep(delay)
+        return this.map.getCanvas().toDataURL();
     }
 
     remove(point){
@@ -44,7 +48,7 @@ export default class ThreeScanLayer{
         }  
     }
 
-    update(point){        
+    async update(point){        
         let texture 
         point.text = point.text ? point.text:''
         if(point.image){
@@ -65,10 +69,15 @@ export default class ThreeScanLayer{
 //texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
             texture.needsUpdate = true; //纹理更新
         }else if(point.url){
-            texture = new THREE.TextureLoader().load(point.url)
+            let p = ()=>new Promise(function(resolve,reject){
+                new THREE.TextureLoader().load(point.url,(_texture)=>{
+                    resolve(_texture)
+                })
+            })            
+            texture = await p()
         }
         texture.encoding = THREE.sRGBEncoding;
-         texture.flipY = false;
+        texture.flipY = false;
         //texture.flipX = true; 
         let index = this.drawArray.findIndex(a=>a.center[0] == point.center[0] && a.center[1] == point.center[1])
         if(index >= 0){

package/src/utils/util.js

@@ -102,6 +102,10 @@ export function downloadFileByBase64(base64,name){
   downloadFile(myUrl,name)
 }
 
+export function downloadFileBlobByBase64(base64){
+  return dataURLtoBlob(base64)
+}
+
 
  /**
 * 生成GUID