@ohuoy/easymap 1.0.19 → 1.0.21

package/src/components/control/TilesBar.js

@@ -4,8 +4,57 @@ export default class TilesBar {
     config = {
         btnClass:''
     }
-    constructor(){
+    openBtn=['standard','satellite','tiandi','gaode','arcgis']
+    constructor(openBtn){
+        this.openBtn = ['standard','satellite','tiandi']
+    }
 
+    getBtnList(){
+        let htmlStr = ''
+        for(let b of this.openBtn){
+            if(b == 'standard'){
+                htmlStr+=`<div class="mapboxgl-btn-standard" style='width:100%;display:flex;'>
+                <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
+                    <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>%3C/svg>'/>
+                </span>
+                <button style='width:100%'>标准</button>
+            </div>                      
+            `
+            }
+            if(b == 'satellite'){
+                htmlStr+=` <div class="mapboxgl-btn-satellite" style='width:100%;display:flex;'>
+                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
+                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M15.78,5H19V17.18C18.74,16.38 17.69,15.79 16.8,15.79H15.8V12.79A1,1 0 0,0 14.8,11.79H8.8V9.79H10.8A1,1 0 0,0 11.8,8.79V6.79H13.8C14.83,6.79 15.67,6 15.78,5M5,10.29L9.8,14.79V15.79C9.8,16.9 10.7,17.79 11.8,17.79V19H5V10.29Z"/>%3C/svg>'/>
+                    </span>
+                    <button style='width:100%'>卫星图</button>
+                </div>`
+            }
+            if(b == 'tiandi'){
+                htmlStr+=` <div class="mapboxgl-btn-tiandi" style='width:100%;display:flex;'>
+                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
+                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M9,7V9H11V17H13V9H15V7H9M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z"/>%3C/svg>'/>
+                    </span>
+                    <button style='width:100%'>天地图</button>
+                </div>`
+            }
+            if(b == 'gaode'){
+                htmlStr+=` <div class="mapboxgl-btn-gaode" style='width:100%;display:flex;'>
+                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
+                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M9,7V9H11V17H13V9H15V7H9M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z"/>%3C/svg>'/>
+                    </span>
+                    <button style='width:100%'>高德地图</button>
+                </div>`
+            }
+            if(b == 'arcgis'){
+                htmlStr+=` <div class="mapboxgl-btn-arcgis" style='width:100%;display:flex;'>
+                <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
+                    <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M9,7V9H11V17H13V9H15V7H9M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z"/>%3C/svg>'/>
+                </span>
+                <button style='width:100%'>ArcGis</button>
+            </div>`
+            }
+        }
+        return htmlStr
     }
 
     onAdd(map) {
@@ -22,41 +71,36 @@ export default class TilesBar {
                     
             </button>
             <div class="mapboxgl-legend-list" style='position:absolute;width:80px;background:#fff;margin:0 28px;top:0px;color:#000;display:none;'>
-                <div class="mapboxgl-btn-standard" style='width:100%;display:flex;'>
-                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
-                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>%3C/svg>'/>
-                    </span>
-                    <button style='width:100%'>标准</button>
-                </div>
-                <div class="mapboxgl-btn-satellite" style='width:100%;display:flex;'>
-                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
-                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M15.78,5H19V17.18C18.74,16.38 17.69,15.79 16.8,15.79H15.8V12.79A1,1 0 0,0 14.8,11.79H8.8V9.79H10.8A1,1 0 0,0 11.8,8.79V6.79H13.8C14.83,6.79 15.67,6 15.78,5M5,10.29L9.8,14.79V15.79C9.8,16.9 10.7,17.79 11.8,17.79V19H5V10.29Z"/>%3C/svg>'/>
-                    </span>
-                    <button style='width:100%'>卫星图</button>
-                </div>
-                <div class="mapboxgl-btn-tiandi" style='width:100%;display:flex;'>
-                    <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
-                        <img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M9,7V9H11V17H13V9H15V7H9M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z"/>%3C/svg>'/>
-                    </span>
-                    <button style='width:100%'>天地图</button>
-                </div>
+                ${this.getBtnList()}
             </div>  
         </div>
         `; 
         let btnStandard = this._container.getElementsByClassName('mapboxgl-btn-standard')[0]
         let btnSatellite = this._container.getElementsByClassName('mapboxgl-btn-satellite')[0]
         let btnTiandi = this._container.getElementsByClassName('mapboxgl-btn-tiandi')[0]
+        let btnGaode = this._container.getElementsByClassName('mapboxgl-btn-gaode')[0]
+        let btnArcgis = this._container.getElementsByClassName('mapboxgl-btn-arcgis')[0]
         let box = this._container.getElementsByClassName('mapboxgl-legend-list')[0]
         let btn = this._container.getElementsByClassName('tileschange')[0]
         btn.addEventListener('mouseenter',()=>{
-            box.style.display = 'block'            
+            box.style.display = 'block'   
+            let pos = box.getBoundingClientRect()   
+            if(pos.x > document.body.clientWidth/2){
+                box.style.right = 0
+                box.style.left = ''
+            }else{
+                box.style.right = ''
+                box.style.left = 0
+            }
         })
         this._container.addEventListener('mouseleave',()=>{
             box.style.display = 'none'
         })
-        this.addEvent(btnStandard,'standard')
-        this.addEvent(btnSatellite,'satellite')
-        this.addEvent(btnTiandi,'tiandi')
+        btnStandard ? this.addEvent(btnStandard,'standard'): ''
+        btnSatellite ? this.addEvent(btnSatellite,'satellite'):''
+        btnTiandi?this.addEvent(btnTiandi,'tiandi'):''
+        btnGaode?this.addEvent(btnGaode,'gaode'):''
+        btnArcgis? this.addEvent(btnArcgis,'arcgis'):''
         return this._container;
     }
 
@@ -66,29 +110,74 @@ export default class TilesBar {
             let beforeId = this._map.style.stylesheet.layers[currentFillLayerIndex].id
             if(key == 'standard'){
                 if (this._map.getLayer('yingxiang')) this._map.removeLayer('yingxiang');
-                if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi');               
+                if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi');    
+                if (this._map.getLayer('gode')) this._map.removeLayer('gode');  
+                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis');  
+                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji');                        
             }
             if(key == 'satellite'){                
                 if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi'); 
+                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji'); 
+                if (this._map.getLayer('gode')) this._map.removeLayer('gode'); 
+                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis');   
                 if (!this._map.getLayer('yingxiang')){
                     this._map.addLayer({
                         "id": "yingxiang",
                         "source": "yingxiang",
                         "type": "raster"          
-                    },beforeId)
+                    })
                 };  
             }
             if(key == 'tiandi'){        
                 if (this._map.getLayer('yingxiang')) this._map.removeLayer('yingxiang'); 
+                if (this._map.getLayer('gode')) this._map.removeLayer('gode');  
+                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis');  
                 if (!this._map.getLayer('tiandi')){
                     this._map.addLayer({
                         "id": "tiandi",
                         "source": "tianditu",
                         "type": "raster"          
-                    },beforeId)
+                    })
+                };  
+                if (!this._map.getLayer('zhuji')){
+                    this._map.addLayer({
+                        "id": "zhuji",
+                        "source": "zhuji",
+                        "type": "raster"          
+                    })
+                };  
+            }
+            if(key == 'gaode'){        
+                if (this._map.getLayer('yingxiang')) this._map.removeLayer('yingxiang'); 
+                if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi'); 
+                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji'); 
+                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis');  
+                if (!this._map.getLayer('gaode')){
+                    this._map.addLayer({
+                        "id": "gaode",
+                        "source": "gaode",
+                        "type": "raster"          
+                    })
+                };  
+            }
+            if(key == 'arcgis'){        
+                if (this._map.getLayer('yingxiang')) this._map.removeLayer('yingxiang'); 
+                if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi'); 
+                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji'); 
+                if (this._map.getLayer('gode')) this._map.removeLayer('gode');
+                if (!this._map.getLayer('arcgis')){
+                    this._map.addLayer({
+                        "id": "arcgis",
+                        "source": "arcgis",
+                        "type": "raster"          
+                    })
                 };  
             }
-            
         })
     }
+
+    onRemove() {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
 }

package/src/components/control/Toobars.js

@@ -135,6 +135,15 @@ export default class Toobars {
             }
         };
         btn.addEventListener('click',()=>{   
+            let box = this._container.getElementsByClassName('linedis-message-show')[0].parentNode;
+            let pos = box.getBoundingClientRect()   
+            if(pos.x > document.body.clientWidth/2){
+                box.style.right = 0
+                box.style.left = ''
+            }else{
+                box.style.right = ''
+                box.style.left = 0
+            }
             lineDis = {
                 'type': 'FeatureCollection',
                 'features': []
@@ -294,6 +303,7 @@ export default class Toobars {
     }
 
     addPosition(btn){
+        
         if(!this.mousemovePositionFun){
             this.mousemovePositionFun =  (e) => {
                 let lngLat = transform([e.lngLat.lng,e.lngLat.lat],true)
@@ -302,7 +312,16 @@ export default class Toobars {
                 : `经度：${lngLat[0].toFixed(6)}<br/>纬度：${lngLat[1].toFixed(6)}`
             }     
         }
-        btn.addEventListener('click',()=>{ 
+        btn.addEventListener('click',()=>{
+            let box = this._container.getElementsByClassName('position-message-show')[0].parentNode;
+            let pos = box.getBoundingClientRect()   
+            if(pos.x > document.body.clientWidth/2){
+                box.style.right = 0
+                box.style.left = ''
+            }else{
+                box.style.right = ''
+                box.style.left = 0
+            } 
             // jump with zoom, pitch, and bearing options
             if(!this.positionClicked){
                 this.positionClicked = true

package/src/components/layer/AlarmLayer.js

@@ -1,4 +1,4 @@
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import * as THREE from 'three'
 import { sleep } from '../../utils/util';
 import {hasProperty,transform} from '../../utils/util'
@@ -96,6 +96,9 @@ export default class AlarmLayer{
         //console.log(point)
     }
 
+    onRemove(){
+        this.alarmList.forEach(a=>this.remove(a))
+    }
     drawPoint(point){
         let lng = point.lng;
         let lat = point.lat;

package/src/components/layer/AnimationBarbsLayer.js

@@ -1,7 +1,7 @@
 
 import {hasProperty,transform} from '../../utils/util.js'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin';  
 import { sleep } from '../../utils/util.js';
 import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 import getBarbs from '../../utils/barbsHelper.js';

package/src/components/layer/AnimationLayer copy.js

@@ -1,7 +1,7 @@
 
 import {hasProperty,transform} from '../../utils/util'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import { sleep } from '../../utils/util';
 import * as THREE from 'three'
 var tb = {}; 

package/src/components/layer/AnimationLayer.js

@@ -1,7 +1,7 @@
 
 import {hasProperty,transform} from '../../utils/util'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import { sleep } from '../../utils/util';
 import * as THREE from 'three'
 var tb = {}; 
@@ -69,7 +69,10 @@ export default class AnimationLayer{
         let texture = new THREE.TextureLoader().load(
           _item.image);
           texture.encoding = THREE.sRGBEncoding;
-          texture.flipY = false;
+          //texture.flipY = false;
+          texture.center.set(0.5,0.5);
+          texture.rotation = -Math.PI;
+          texture.colorSpace = THREE.SRGBColorSpace
           this.itemList.push({
             texture:texture,
             item:_item
@@ -93,7 +96,7 @@ export default class AnimationLayer{
       let _item = this.itemList[0].item;
       let geometry = new THREE.PlaneGeometry(_item.width *20,_item.width*20);        
       //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
-      let material = new THREE.MeshPhongMaterial({    
+      let material = new THREE.MeshBasicMaterial({    
         map:texture,     
         opacity:this.opacity,      
         transparent: true,
@@ -112,6 +115,11 @@ export default class AnimationLayer{
       return mesh;
     }
 
+    setOpacity(opacity){
+      this.opacity = opacity
+      this.obj.model.material.opacity = this.opacity;
+    }
+
     pause(){
       this.status = actionStatus.Pause
       this.getProgress(this.progress.value,this.status)

package/src/components/layer/CustomIconLayer.js

@@ -1,4 +1,4 @@
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import * as THREE from 'three'
 import { sleep } from '../../utils/util.js';
 import {hasProperty,transform} from '../../utils/util.js'

package/src/components/layer/ExtrusionLayer.js

@@ -5,7 +5,7 @@ import * as THREE from 'three'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
 import CameraSync from '../../utils/CameraSync';
 import { LineGeometry } from 'three/addons/lines/LineGeometry.js';

package/src/components/layer/ExtrusionLayerold.js

@@ -5,7 +5,7 @@ import * as THREE from 'three'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
 import CameraSync from '../../utils/CameraSync';
 import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
@@ -439,6 +439,7 @@ export default class ExtrusionLayer{
 
         let bf = new Uint8Array(this.w * this.h * 4)
         this.renderer.readRenderTargetPixels(target, 0, 0, this.w, this.h, bf)
+        this.renderer.autoClear = false 
         this.flipY(bf,this.w,this.h)
         let clamped = new Uint8ClampedArray(bf,bf)
         let imageData = new ImageData(clamped, this.w, this.h)

package/src/components/layer/MarkerAreaLayer.js

@@ -2,7 +2,7 @@
 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'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 var tb = {}; 
 let markerGroup = new THREE.Group();
 export default class MarkerAreaLayer{

package/src/components/layer/PathLineLayer.js

@@ -1,4 +1,4 @@
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 import * as THREE from 'three'
 import { getBBox } from '../../utils/util.js';
 import { sleep } from '../../utils/util.js';

package/src/components/layer/ThreeScanLayer.js

@@ -6,7 +6,7 @@ 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 * as THREE from 'three'
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
 var tb = {}; 
 export default class ThreeScanLayer{
     drawArray = []
@@ -43,6 +43,11 @@ export default class ThreeScanLayer{
         return canvas.toDataURL();
     }
 
+
+    onRemove(){
+        this.removeAll()
+    }
+
     remove(point){
         point.mesh.label.element.remove()        
         tb.remove(point.mesh)
@@ -152,27 +157,59 @@ export default class ThreeScanLayer{
                     resolve(_texture)
                 })
             })            
-            texture = await p()
+            texture = await p()            
+            texture.center.set(0.5,0.5);
+            texture.rotation = -Math.PI;
         }
+        texture.colorSpace = THREE.SRGBColorSpace
         texture.encoding = THREE.sRGBEncoding;
-        texture.flipY = false;
-        //texture.flipX = true; 
+        // 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){
-
             let _point = this.drawArray[index]
-            if(this.forceClear) {
-                _point.mesh.model.material.map.dispose();
-            }
-            _point.mesh.model.material.map = texture
-            _point.mesh.label.element.innerHTML = point.text
-            if(point.rect){
-                this.updateRect(point)
-            }
+            if(_point && point.width != _point.width){
+                this.remove(this.drawArray[index])   
+                this.drawArray[index] = null     
+                this.drawArray = this.drawArray.filter(a=>a)    
+                let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
+                //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+                let material = new THREE.MeshBasicMaterial({    
+                    map:texture,     
+                    opacity:this.opacity,      
+                    transparent: true,
+                });
+                material.color.convertSRGBToLinear();
+                let mesh = new THREE.Mesh(geometry, material);
+                mesh.name = 'scanimg'
+                mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+                mesh.setCoords( transform(point.center));
+                tb.renderer.outputEncoding = THREE.sRGBEncoding;
+                tb.add(mesh);
+                let dom =document.createElement('div')                   
+                mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+point.distance *1200,z:mesh.anchor.z},0)
+                mesh.label.element.className += ('' +this.textClass)
+                mesh.label.element.style.fontSize = '24px'   
+                mesh.label.element.innerHTML = point.text
+                point.mesh = mesh;
+                this.drawArray.push(point)
+                if(point.rect){
+                    this.updateRect(point)
+                }
+            }else{
+                if(this.forceClear) {
+                    _point.mesh.model.material.map.dispose();
+                }
+                _point.mesh.model.material.map = texture
+                _point.mesh.label.element.innerHTML = point.text
+                if(point.rect){
+                    this.updateRect(point)
+                }
+            }            
         }else{
             let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
             //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
-            let material = new THREE.MeshPhongMaterial({    
+            let material = new THREE.MeshBasicMaterial({    
                 map:texture,     
                 opacity:this.opacity,      
                 transparent: true,

package/src/components/layer/ThreeWallLayer.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import { getBBox } from '../../utils/util';
-import { Threebox } from  'threebox-plugin'; 
+import {Threebox} from  '../../../lib/threebox-plugin'; 
  import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
 import CameraSync from '../../utils/CameraSync';
 const WORLD_SIZE = 1024000;

package/webpack.config.js

@@ -1,6 +1,7 @@
 const path=require('path')
 module.exports={
     mode:'development', // 开发模式
+    //target:'web',
     entry:path.resolve(__dirname,'./main.js'),
     module:{ 
         // env: {
@@ -16,7 +17,7 @@ module.exports={
                 loader: 'babel-loader',
                 options: {
                     presets: ['@babel/preset-env'],
-                    ignore: [ './node_modules/mapbox-gl/dist/mapbox-gl.js','./lib/mapbox-gl/dist/mapbox-gl.js' ]
+                    ignore: [ './node_modules/mapbox-gl/dist/mapbox-gl.js','./lib/mapbox-gl/dist/mapbox-gl.js','./lib/threebox-plugin' ]
                 },
             },
           },