@ohuoy/easymap 1.0.20 → 1.0.21

package/dist/example - /345/211/257/346/234/254/index.html"

@@ -127,14 +127,14 @@
           });
       }
 
-      function drawListToMap(opacity = 0.8){
+      function drawListToMap(opacity = 1){
         //可同时在多个地点画图
         //类比高德自定义 AMap.CanvasLayer AMap.ImageLayer
         //list 为图片数组 可以同时在多位置画图 单一站点传入一个数据即可 list内容实时更新
         let list = 
         [
     {
-        "url": "http://192.168.11.93:3395/scan/image/20250104/JYANG_370102_G2_01_20250104000336_2@517_90_500_10_0@.png",
+        "url": "http://124.133.246.59:5923/PMLSData_Image/TEST_370000_01_01/20250312/SPS/20250312081812_10_117.129321_36.677321_108_6_10_500_36.617872966918846_117.05528315158892_36.736723130719646_117.20347331632647.png",
         "siteId": "testid",
         "center": [
             "117.185366",
@@ -575,11 +575,11 @@ function intervalMap(){
 
 function resetToolBar(){
   emap.addToorbars({
-                location:{
-                    show:true, //是否显示
-                    center:[118.7198975,32.0446] //定位工具中心点为止
-                }                
-            });
+        location:{
+            show:true, //是否显示
+            center:[118.7198975,32.0446] //定位工具中心点为止
+        }                
+    });
 }
 
         //加载初始化地图
@@ -613,7 +613,7 @@ function resetToolBar(){
               },"bottom-left");
               //添加图层
               //类比高德 AMap.TileLayer.Satellite
-              emap.addTilesLayer({},"bottom-left") 
+              emap.addTilesLayer({},"bottom-right") 
               //添加绘图工具
               //类比高德 AMap.Polygon  RectangleEditor 集合 目前仅保留四边形选点 操作 
               emap.addDrawBar({},"bottom-left")  

package/index.js

@@ -735,6 +735,10 @@ export class EasyMap {
     });
   };
 
+  removeLayer(layerId)
+  {
+    if (this.map.getLayer(layerId)) this.map.removeLayer(layerId)
+  }
 
 
 }

package/lib/threebox-plugin/src/objects/effects/BuildingShadows.js

@@ -108,4 +108,8 @@ class BuildingShadows {
 }
 
 export default BuildingShadows
-// module.exports = exports = BuildingShadows;
+// module.exports = exports = BuildingShadows;
+
+
+
+

package/package.json

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

package/src/components/EasyMapMarker.js

@@ -54,6 +54,14 @@ export default class EasyMapMarker{
             throw new Error('no config')
         }
     }
+
+    setMarkerPopup(popup,_marker){
+        _marker = _marker ?  _marker : this.marker
+        if(_marker){
+            _marker.setPopup(popup)
+        }
+    }
+
     moveTo(location,zoom = 12.5){
         let _location = transform(location)
         this.marker.setLngLat(_location)

package/src/components/control/DrawBar.js

@@ -132,4 +132,9 @@ export default class DrawBar {
         }     
       }
     }
+
+    onRemove() {
+      this.drawEntity = null
+      this.drawing = false;
+  }
 }

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

@@ -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/AnimationLayer.js

@@ -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/ThreeScanLayer.js

@@ -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,11 +157,14 @@ 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]
@@ -166,7 +174,7 @@ export default class ThreeScanLayer{
                 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.MeshPhongMaterial({    
+                let material = new THREE.MeshBasicMaterial({    
                     map:texture,     
                     opacity:this.opacity,      
                     transparent: true,
@@ -201,7 +209,7 @@ export default class ThreeScanLayer{
         }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,