@ohuoy/easymap 1.0.0

package/index.js

@@ -0,0 +1,597 @@
+import { Scene ,HeatmapLayer,LineLayer, PointLayer, PolygonLayer,ExportImage,Fullscreen} from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import mapboxgl from 'mapbox-gl'; 
+import * as mdi from '@mdi/js'
+//import * as mdiSvg from '@mdi/font'
+import 'mapbox-gl/dist/mapbox-gl.css';
+import * as turf from '@turf/turf'
+import {getLayerMapPosition, transform,downloadFileByBase64,guid,downloadFile,downloadFileByBlob} from './src/utils/util.js';
+import Toobars from './src/components/control/Toobars.js'
+import { ScanLayer } from './src/components/index.js';
+import JSZip from 'jszip';
+import gif from './src/components/gif/gif.js'
+import { getGifWorker } from './src/components/gif/gif.worker.js'
+
+//导出组件
+export class EasyMap {    
+    map;
+    scene;
+    markers;
+    target;
+    contextMenu;
+    dialog;
+
+    //control
+    ScaleControl = null;
+    NavigationControl = null;
+    ToobarsControl = null;
+    placesLabels = {
+      'type': 'FeatureCollection',
+      'features':[]
+    }
+    labelLayer = null;
+
+    constructor(target,styleUrl,config) {      
+        let scene = new Scene({
+            id: target,
+            // map: new Mapbox({
+            //   mapInstance: map,
+            // }),
+            map: new Mapbox({
+            style:styleUrl,
+            preserveDrawingBuffer:true,       
+            center:config?.center?transform(config.center): transform([114.7198975,23.0446]),
+            pitch: config?.pitch?config.pitch:0,
+            zoom: config?.zoom?config.zoom:0,
+            rotation: config?.rotation?config.rotation:0,
+            token: ''//'pk.eyJ1Ijoid2hpdGVidWxkaW5nIiwiYSI6ImNsc3UwaXlnZDIwbDkybG1qbXJ6YnRtcmwifQ.jtQeo0gt3UNTCWw5FEyv_w',
+            })
+        })
+        let map = scene.map;         
+        this.scene = scene;
+        this.map = map;     
+        this.target = map.target;
+        let that = this;
+        this.map.on('load',()=>{
+          that.map.addSource('placesLabels', {
+              'type': 'geojson',
+              'data': that.placesLabels
+          });
+          that.addPlaceLabelsLayer()
+
+          // that.labelLayer = new PolygonLayer({})
+          // .source(that.placesLabels)
+          // .color('blue')
+          // .shape('label', 'text')
+          // .size(18)
+          // .style({
+          //   textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+          //   textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
+          //   spacing: 2, // 字符间距
+          //   padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+          //   stroke: '#ffffff', // 描边颜色
+          //   strokeWidth: 0.3, // 描边宽度
+          //   strokeOpacity: 1.0,
+          // });
+          // that.scene.addLayer(that.labelLayer);
+            config?.callback?config?.callback(that):null;  
+            that.contextMenu = new mapboxgl.Popup();
+            that.dialog = new mapboxgl.Popup();   
+        })       
+    }
+
+    addScale(){
+      if(this.ScaleControl){
+        this.map.addControl(this.ScaleControl);
+      }else{
+        this.ScaleControl = new mapboxgl.ScaleControl()
+        this.map.addControl(this.ScaleControl);
+      }                
+    }
+
+    addNav(){
+      if(this.NavigationControl){
+        this.map.addControl(this.NavigationControl);
+      }else{
+        this.NavigationControl = new mapboxgl.NavigationControl()
+        this.map.addControl(this.NavigationControl);
+      }       
+    }
+
+    addToorbars(config){
+      if(this.ToobarsControl){
+        this.ToobarsControl.config = config;
+        this.map.addControl(this.ToobarsControl);
+      }else{
+        this.ToobarsControl = new Toobars(config)
+        this.map.addControl(this.ToobarsControl);
+      }       
+    }
+
+    /*
+    按钮列表
+    类型 info btn 图片
+    {
+      type:'info',
+      content:''//字符,
+      height:20px
+    }
+    {
+      type:'btn',
+      content:event//字符，
+      height:20px
+    }
+    {
+      type:'image',
+      content:image//字符
+      height:20px
+    }
+    */
+    addContextMenu(btnlist){
+      let propertys = ['type','content']
+      this.map.off('contextmenu')
+      if(btnlist instanceof Array){
+        this.map.on('contextmenu',  (e) => { 
+           let lngLat = transform([e.lngLat.lng,e.lngLat.lat])
+          //创建el
+          let dom = document.createElement('div');
+          dom.style = `min-width:120px;min-height:30px;margin:0 -10px;`;
+          let el = '';
+
+          for(let i in btnlist){
+            let _item = btnlist[i];
+            for(let prop in propertys){
+              if(!_item.hasOwnProperty(propertys[prop]) && _item?.type !='line'){
+                throw new Error(`Item ${i} is wrong,The ${propertys[prop]} property is not included`)
+              }              
+            }
+            if( _item?.type =='image'){
+            if(!_item.hasOwnProperty('width') || !_item.hasOwnProperty('height')){
+                throw new Error(`Item ${i} is wrong,The image width and height is needed`)
+            }
+            }
+            switch(_item.type){
+                case 'title':
+                    el+=(`<div style='${_item?.style ? _item?.style:''},font-size:18px;font-weight:600;width:calc(100% - 10px);height:${_item?.height?_item?.height:22}px;margin:5px;display:flex'>
+                        <div>${_item.content}</div>
+                    </div>`)
+                    break;
+                case 'line':
+                    el+=(`<hr style='display: block;
+                    flex: 1 1 100%;
+                    height: 0px;
+                    max-height: 0px;
+                    opacity: 0.12;
+                    transition: inherit;
+                    border-style: solid;
+                    border-width: thin 0 0 0;' aria-orientation="horizontal" role="separator">`)
+                    break;
+                case 'btn':
+                    el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);height:${_item?.height?_item?.height:22}px;margin:5px;display:flex'>
+                    <div style='width:16px;height:${_item?.height?_item?.height:22}px'>
+                        <img style='display:${_item.iconPre? 'block':'none'}' src='${_item.iconPre}' />
+                    </div>
+                        
+                        <div style='width:calc(100% - 32PX)'>${_item.content}</div>
+                       <div style='width:16px;height:${_item?.height?_item?.height:22}px'>
+                        <img src='${_item.iconApp}' style='display:${_item.iconApp? 'block':'none'}' />
+                    </div>
+                    </div>`)
+                    break;    
+                case 'text':
+                    let textContent = _item.content;
+                    textContent = textContent.replaceAll('$lng$',e.lngLat.lng.toFixed(6)).replaceAll('$lat$',e.lngLat.lat.toFixed(6))
+                    el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);margin:5px;display:flex'>
+                    <div style='width:100%;text-wrap:wrap;'>${textContent}</div>
+                    </div>`)
+                    break;   
+                case 'image':
+                    _item.width = typeof(_item.width) == 'number' ? _item.width + 'px' :_item.width;
+                    _item.height = typeof(_item.height) == 'number' ? _item.height + 'px' :_item.height;
+                    el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);margin:5px;display:flex'>
+                    <img src='${_item.content}' style='width:${_item.width};height:${_item.height}' />
+                    </div>`)
+                    break;                
+                default:
+                    throw new Error('type must is one of "line, text,title, image, btn"')
+            }
+          }
+          dom.innerHTML = el;
+          for(let i in btnlist) {            
+            let item = dom.children[i]     
+            let _item = btnlist[i];       
+            if(typeof(item) == 'object'){                
+                if(_item.type == 'btn'){
+                    item?.addEventListener('mouseenter',(e)=>{
+                        let elm = e.target;
+                        elm.style.background='#e6f1ff'
+                    })
+                    item?.addEventListener('mouseleave',(e)=>{
+                        let elm = e.target;
+                        elm.style.background=''
+                    })
+                }     
+                if(_item.event){                    
+                    item?.addEventListener(_item.event.type,(_event)=>{
+                        _event.stopPropagation()
+                        let _obj = Object.assign({},e)
+                        _obj.lngLat = transform([_obj.lngLat.lng,_obj.lngLat.lat])
+                        _item.event.fun(_event,_obj)
+                    })
+                }
+            }
+          }
+          this.contextMenu.addTo(this.map).setLngLat({lng:lngLat[0],lat:lngLat[1]}).setDOMContent(dom)        
+        })
+      }
+      else{
+        throw new Error('parmas must be array')
+      }          
+    }
+
+    addDialog(btnlist,_lngLat){
+        let propertys = ['type','content']
+        if(!_lngLat){
+            throw new Error(`params 2 is needed, please  input  [lng,lat] at params 2`)
+        }
+        if(btnlist instanceof Array){
+            let lngLat = transform(_lngLat)
+            //创建el
+            let dom = document.createElement('div');
+            dom.style = `min-width:120px;min-height:30px;margin:0 -10px;`;
+            let el = '';
+  
+            for(let i in btnlist){
+              let _item = btnlist[i];
+              for(let prop in propertys){
+                if(!_item.hasOwnProperty(propertys[prop]) && _item?.type !='line'){
+                  throw new Error(`Item ${i} is wrong,The ${propertys[prop]} property is not included`)
+                }              
+              }
+              if( _item?.type =='image'){
+              if(!_item.hasOwnProperty('width') || !_item.hasOwnProperty('height')){
+                  throw new Error(`Item ${i} is wrong,The image width and height is needed`)
+              }
+              }
+              switch(_item.type){
+                  case 'title':
+                      el+=(`<div style='${_item?.style ? _item?.style:''},font-size:18px;font-weight:600;width:calc(100% - 10px);height:${_item?.height?_item?.height:22}px;margin:5px;display:flex'>
+                          <div>${_item.content}</div>
+                      </div>`)
+                      break;
+                  case 'line':
+                      el+=(`<hr style='display: block;
+                      flex: 1 1 100%;
+                      height: 0px;
+                      max-height: 0px;
+                      opacity: 0.12;
+                      transition: inherit;
+                      border-style: solid;
+                      border-width: thin 0 0 0;' aria-orientation="horizontal" role="separator">`)
+                      break;
+                  case 'btn':
+                      el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);height:${_item?.height?_item?.height:22}px;margin:5px;display:flex'>
+                      <div style='width:16px;height:${_item?.height?_item?.height:22}px'>
+                          <img style='display:${_item.iconPre? 'block':'none'}' src='${_item.iconPre}' />
+                      </div>
+                          
+                          <div style='width:calc(100% - 32PX)'>${_item.content}</div>
+                         <div style='width:16px;height:${_item?.height?_item?.height:22}px'>
+                          <img src='${_item.iconApp}' style='display:${_item.iconApp? 'block':'none'}' />
+                      </div>
+                      </div>`)
+                      break;    
+                  case 'text':
+                      el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);margin:5px;display:flex'>
+                      <div style='width:100%;text-wrap:wrap;'>${_item.content}</div>
+                      </div>`)
+                      break;   
+                  case 'image':
+                      _item.width = typeof(_item.width) == 'number' ? _item.width + 'px' :_item.width;
+                      _item.height = typeof(_item.height) == 'number' ? _item.height + 'px' :_item.height;
+                      el+=(`<div style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);margin:5px;display:flex'>
+                      <img src='${_item.content}' style='width:${_item.width};height:${_item.height}' />
+                      </div>`)
+                      break;                
+                  default:
+                      throw new Error('type must is one of "line, text,title, image, btn"')
+              }
+            }
+            dom.innerHTML = el;
+            for(let i in btnlist) {            
+              let item = dom.children[i]     
+              let _item = btnlist[i];       
+              if(typeof(item) == 'object'){                
+                if(_item.type == 'btn'){
+                    item?.addEventListener('mouseenter',(e)=>{
+                        let elm = e.target;
+                        elm.style.background='#e6f1ff'
+                    })
+                    item?.addEventListener('mouseleave',(e)=>{
+                        let elm = e.target;
+                        elm.style.background=''
+                    })
+                }                  
+                if(_item.event){                    
+                    item?.addEventListener(_item.event.type,(_event)=>{
+                        _item.event.fun(_event,e)
+                    })
+                }
+              }
+            }
+            this.dialog.addTo(this.map).setLngLat({lng:lngLat[0],lat:lngLat[1]}).setDOMContent(dom)        
+        }
+        else{
+          throw new Error('parmas must be array')
+        }          
+      }
+
+    addPlaceLabelsLayer(){
+      this.map.addLayer({
+        'id': 'poi-labels',
+        'type': 'symbol',
+        'source': 'placesLabels',              
+        'layout': {
+            'text-field': ['get', 'label'],
+            //'text-anchor':'center',
+            'text-size':18,                
+            'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
+            //'text-radial-offset': 0.5,
+            'text-justify': 'auto',
+            'icon-image': ['get', 'icon'],
+            'icon-anchor':'center',
+            'icon-offset':['get', 'icon-offset'],    
+            'text-ignore-placement':true,
+            'icon-ignore-placement':true       
+            //'icon-text-fit':'width',                                  
+        },
+        'paint':{
+          'text-color':['get', 'text-color'],
+          'icon-color':'#0f3ad0',
+          'text-halo-color':['get', 'text-border-color'],
+          'text-halo-width':1
+        }
+    });
+    }
+
+    removePlaceLabelsLayer(){
+      this.map.remove('poi-labels')
+    }
+    //type = 0 替换
+    //type = 1 增加  经纬度一样替换
+    updateLabels(labels,style,type=0){   
+      let label = {
+        name:'',
+        icon:'',
+        coords:[]
+      } 
+      let icon = {
+        name:'',
+        image:'',
+        type:''
+      }
+      let geojsonFeatures = [];
+      if(labels instanceof Array){
+        for(let _i in labels){
+          let _item = labels[_i];                  
+          for(let i in label) {
+            if(!_item.hasOwnProperty(i)){
+              throw new Error(`The index ${_i} is wrong , ${i} property is not included`)
+            }
+          }
+          if(_item.icon){       
+            if(typeof(_item.icon)  == 'string' && !this.map.hasImage(_item.icon)){              
+              let imgUrl = `data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" style='fill:%230f3ad0' width="24" height="24">%3Cpath d="${mdi[_item.icon]}"/>%3C/svg>`
+              let image = new Image(20,20)
+              image.src = imgUrl;
+              image.onload = (e)=>{
+                if(!this.map.hasImage(_item.icon)){
+                  this.map.addImage(_item.icon, e.target);        
+                }                      
+              }
+              
+            }            
+          }else{
+            //this.map.
+          }
+          geojsonFeatures.push({
+            'type': 'Feature',
+            'properties': {
+                'label':_item.name,
+                'text-color':'#0f3ad0',
+                'text-border-color':'#fff',
+                'icon': _item.icon,
+                'icon-offset':[_item.name.length * -10,10]
+            },
+            'geometry': {
+                'type': 'Point',
+                'coordinates': transform(_item.coords)
+            }
+          })
+        }
+        if(type == 0){
+          this.placesLabels.features = geojsonFeatures;
+        }        
+        else{
+          for(let i in geojsonFeatures){
+            let item = geojsonFeatures[i]
+            let index = this.placesLabels.features.findIndex(a=>a.coordinates == item.coords)
+            if(index >= 0){
+              this.placesLabels.features[index] = item
+            }else{
+              this.placesLabels.features.push(item)
+            }            
+          }
+          
+        }
+        const placesLabelsSource = this.map.getSource('placesLabels');
+       
+        placesLabelsSource.setData(this.placesLabels)
+        // this.labelLayer.setData(this.placesLabels)
+        // console.log(this.labelLayer)
+      }else{
+        throw new Error(`The params 0 must be array`)
+      }      
+    }
+
+    addMarker(marker){
+        this.map.addMarker(marker)
+        this.markers.push(marker)
+    }
+
+    getMarker(id){
+        return this.markers.find(a=>a.id == id)
+    }
+    
+    //获取指定位置指定距离截图
+    getMapImageByDistance(center,distance,_target){
+      let target;
+      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;`
+      document.body.appendChild(target)
+      let scene = new Scene({
+        id: target,
+        // map: new Mapbox({
+        //   mapInstance: map,
+        // }),
+        map: new Mapbox({
+        style:'http://192.168.11.93:1234/api/styles/osm',
+        preserveDrawingBuffer:true, 
+        center:transform([114.7198975,23.0446]),
+        bounds:[bounds[0],bounds[2]], 
+        container:target,       
+        pitch: 0,
+        zoom: 0,
+        rotation: 0,
+        token: ''//'pk.eyJ1Ijoid2hpdGVidWxkaW5nIiwiYSI6ImNsc3UwaXlnZDIwbDkybG1qbXJ6YnRtcmwifQ.jtQeo0gt3UNTCWw5FEyv_w',
+        })
+      })
+      let map = scene.map;  
+      map.on('load',()=>{
+        let base64 = map._canvas.toDataURL();
+        downloadFileByBase64(base64,guid())
+        target.remove()  
+      })  
+    } 
+
+
+       //获取指定位置指定距离截图
+    getMapImageWithScan(_center,distance,imgList,_target,downloadType = 'file',callback=null){
+      if(imgList instanceof Array){
+        let jsZip = new JSZip();
+        let gif = new GIF({
+          repeat:0,
+          workers:2,
+          quality:64,
+          workerScript: getGifWorker(),
+          debug: true
+        })
+        if(imgList.length == 0) return;
+        let target;
+        let dataUrlList = []
+        let center = transform(_center)
+        let bounds = getLayerMapPosition(distance,center)      
+        if(!_target) target = document.createElement('div');          
+        else target = _target;
+        let pix = 1024;
+        target.style = `width:${pix}px;height:${pix}px;z-index:1;position:relative;`
+        document.body.appendChild(target)
+        let scene = new Scene({
+          id: target,
+          // map: new Mapbox({
+          //   mapInstance: map,
+          // }),
+          map: new Mapbox({
+          style:'http://192.168.11.93:1234/api/styles/osm',
+          preserveDrawingBuffer:true, 
+          center:center,
+          bounds:[bounds[0],bounds[2]],      
+          pitch: 0,
+          zoom: 0,
+          rotation: 0,
+          token: ''//'pk.eyJ1Ijoid2hpdGVidWxkaW5nIiwiYSI6ImNsc3UwaXlnZDIwbDkybG1qbXJ6YnRtcmwifQ.jtQeo0gt3UNTCWw5FEyv_w',
+          })
+        })
+        let map = scene.map;          
+        map.on('load',()=>{
+          //添加图层
+           let _canLayer = new ScanLayer('scanimage');         
+           let _canvas = target.getElementsByClassName('mapboxgl-canvas')[0]           
+           let i = 0
+           let _interval = setInterval(() => {
+            if(i >= imgList.length){
+              clearInterval(_interval)
+              setTimeout(() => {
+                callback?callback():''
+              }, 500);
+              return;
+            }
+          let url = imgList[i]
+          map.loadImage(url,(err,image)=>{
+            console.log(i)
+            let _i = i;
+              if(err){
+                throw new Error(err);
+              }
+              _canLayer.drawList({
+                id:'SD01',
+                image:image,
+                coords:getLayerMapPosition(distance,_center)
+              })
+              _canLayer.renderBack=()=>{
+                if(dataUrlList.findIndex(a=>a.i == _i) < 0){
+                  dataUrlList.push({
+                    i:_i,
+                    base64:_canvas.toDataURL()
+                  })  
+                  i+=1           
+                  if(downloadType == 'gif'){             
+                    gif.addFrame(_canvas,{ delay: 1000 ,copy:true})      
+                  }
+                }
+               
+                if(_i == imgList.length -1){                
+                  _canLayer.renderBack = null
+                  if(downloadType == 'file'){
+                    dataUrlList.forEach(a=>downloadFileByBase64(a.base64,a.i + '.png'))
+                  }
+                  if(downloadType == 'zip'){
+                    
+                    dataUrlList.forEach(a=>jsZip.file(a.i + '.png',a.base64.replace(/^data:image\/(png|jpg);base64,/, ""),{base64:true}))
+                    jsZip.generateAsync({ type: "blob" }).then(blob => {
+                      let url = window.URL.createObjectURL(blob);
+                      downloadFile(url, "pnglist.zip");
+                    });
+                  }
+                  if(downloadType == 'obj'){
+                    return dataUrlList
+                  }    
+                  if(downloadType == 'gif'){
+                     // 将每一帧渲染成一张完成的gif
+                     gif.render();
+                    gif.on('finished', function(blob) {
+                      let url = URL.createObjectURL(blob);
+                      downloadFile(url, "pnglist.gif");
+                    });
+                  }        
+                          
+                }
+              }
+            })
+            
+           }, 200);
+           setTimeout(() => {
+            map.addLayer(_canLayer)   
+           }, 201);                                                 
+        })        
+        target.remove()  
+      }else
+        throw new Error('The params 2 image list must be array ')             
+    }
+
+
+
+}

package/main.js

@@ -0,0 +1,16 @@
+import { EasyMap } from "./index";
+import * as EmComponents  from './src/components/index'
+import * as EmUtils from './src/utils/util'
+window.EasyMap = EasyMap
+window.EmComponents = EmComponents
+window.EmUtils = EmUtils
+// const modulesFiles =  import.meta.glob('./src/components/*.js')
+// console.log(modulesFiles)
+// Object.entries(modulesFiles).forEach(a=>{
+//     console.log(a)
+// })
+export {
+    EasyMap,
+    EmComponents,
+    EmUtils
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ohuoy/easymap",
+  "version": "1.0.0",
+  "description": "self map easy use",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack"
+  },
+  "author": "weichong song",
+  "license": "ISC",
+  "dependencies": {
+    "@antv/l7": "^2.21.10",
+    "@mdi/js": "^7.4.47",
+    "@turf/turf": "^6.5.0",
+    "gcoord": "^1.0.6",
+    "gif.js": "^0.2.0",
+    "jszip": "^3.10.1",
+    "mapbox-gl": "^3.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/src/components/EasyMapMarker.js

@@ -0,0 +1,30 @@
+import mapboxgl from 'mapbox-gl'; 
+import { transform } from '../utils/util';
+export default class EasyMapMarker{
+    marker;
+    config = {
+        id:'',
+        position:[117.2,22.4],
+        popup:null,
+        map:{},
+        event:null
+    }
+    constructor(_config){        
+        if(_config){
+            for(let i in this.config){
+                if(!_config.hasOwnProperty(i) && this.config[i]!=null){
+                    throw new Error(i + ' property is needed')
+                }
+            }           
+           this.config =Object.assign({}, this.config, _config); 
+            this.marker = new mapboxgl.Marker()
+            .setLngLat(transform(this.config.position))
+            .addTo(this.config.map);  
+            if(this.config.popup){
+                this.marker.setPopup(this.config.popup)
+            }          
+        }else{
+            throw new Error('no config')
+        }
+    }
+}