@ohuoy/easymap 1.0.21 → 1.0.23

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

@@ -9,7 +9,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">    
     <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin" />
     <title>easymap</title>
-    <style>       
+    <style> 
+        .messageClass23333{
+          left: 250px;
+          position: absolute;
+        }      
         .buttonList{
             position: absolute;
             top: 0;
@@ -587,7 +591,7 @@ function resetToolBar(){
         function init(){
           let target = document.getElementById('test')
              //类比高德 AMap.Map
-          emap = new EasyMap(target,'http://dbcenter.gyquantum.com/easymap/styles/light',{
+          emap = new EasyMap(target,'http://dbcenter.gyquantum.com/easymap/styles/sworld',{
             //config
             //         {
             //    center:[108.7198975,35.0446],
@@ -606,8 +610,17 @@ function resetToolBar(){
               emap.addScale("bottom-left")
               emap.addNav("bottom-left")
               emap.addToorbars({
+                line:{
+                  show:true,
+                  btnClass:'',
+                  messageClass:'messageClass23333',
+                  
+              },
+                position:{
+                  show:false
+                },
                   location:{
-                      show:true, //是否显示
+                      show:false, //是否显示
                       center:[108.7198975,35.0446] //定位工具中心点为止
                   }                
               },"bottom-left");
@@ -724,6 +737,22 @@ function resetToolBar(){
         }
 
 
+        let adirectionLine = true
+        function addRShow(){
+          let point = [117.701466,32.511041];distance = 6;r=120
+          if(adirectionLine){
+            emap.addDirectionLine(point,r,distance,'#37a2eb',8) // 可添加color width,不填有默认值 '#37a2eb',8),
+          }else{
+            emap.removeDirectionLine()
+          }
+          adirectionLine=!adirectionLine;
+          emap.jumpTo({
+            center:point,
+            zoom: 12
+            });
+        }
+
+
         function getBoundsImage2(center,distance){
           
          console.log(mapOutScreen)
@@ -812,6 +841,7 @@ function resetToolBar(){
         <button id="setTile" onclick="setMapTile()">设置图层【点击自动切换】【当前标准图层】</button>
         <input id="lnglat" />
         <button onclick="markerTo()">标记位置[经纬度用,隔开]</button>
+        <button onclick="addRShow()">添加角度显示，再次点击取消显示</button>
     </div>
     <div id="test">
 

package/index.js

@@ -6,7 +6,7 @@ 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,downloadFileBlobByBase64,guid,downloadFile,downloadFileByBlob, sleep} from './src/utils/util.js';
+import {getLayerMapPosition, transform,downloadFileByBase64,downloadFileBlobByBase64,guid,downloadFile,destination,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'
@@ -14,7 +14,7 @@ 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 { observe } from './src/utils/mapWatch.js';
 import { getGifWorker } from './src/components/gif/gif.worker.js'
 
 //导出组件
@@ -50,7 +50,7 @@ export class EasyMap {
           alert('Your browser does not support Mapbox GL');
       } 
       config.center = config?.center? transform(config.center): transform([108.7198975,35.0446]);
-      this.config = Object.assign(this.config,config) 
+      this.config = Object.assign(this.config,config)       
       let scene = new Scene({
             id: target,
             logoVisible:false,
@@ -64,17 +64,25 @@ export class EasyMap {
             pitch: config?.pitch?config.pitch:0,
             projection:config.projection?config.projection:'mercator',
             zoom: config?.zoom?config.zoom:13,
+            maxZoom:config?.maxZoom?config.maxZoom:17.4,
+            minZoom:config.minZoom?config.minZoom:1,
             fadeDuration:300,
             rotation: config?.rotation?config.rotation:0,
             token: ''//'pk.eyJ1Ijoid2hpdGVidWxkaW5nIiwiYSI6ImNsc3UwaXlnZDIwbDkybG1qbXJ6YnRtcmwifQ.jtQeo0gt3UNTCWw5FEyv_w',
             })
         })
-        let map = scene.map;         
+        let map = scene.map;   
+        // let _currentTheme = map.style.stylesheet.theme;              
         this.scene = scene;
-        this.map = map;     
+        this.map = map;    
+
+        // this.map.currentTheme = new Proxy(_currentTheme,)
         this.target = map.target;
         let that = this;
+        this.map.theme = observe({value:""})
         this.map.on('load',()=>{
+         this.map.theme.value = this.map.style.stylesheet.theme
+          // console.log(this.map)
           that.map.addSource('placesLabels', {
               'type': 'geojson',
               'data': that.placesLabels
@@ -217,7 +225,7 @@ export class EasyMap {
                 case 'btn':
                     el+=(`<div class='context-map-btn' style='${_item?.style ? _item?.style:''},width:calc(100% - 10px);height:${_item?.height?_item?.height:22}px;margin:5px;display:flex'>
                     <div style='width:14px;height:${_item?.height?_item?.height:22}px;margin:0 8px'>
-                        <img style='display:${_item.iconPre? 'block':'none'};height:16px' src='${_item.iconPre}' />
+                        <img style='display:${_item.iconPre? 'block':'none'};height:16px' src="${_item.iconPre.replace('"',"'")}" />
                     </div>
                         
                         <div style='width:calc(100% - 32PX)'>${_item.content}</div>
@@ -737,7 +745,187 @@ export class EasyMap {
 
   removeLayer(layerId)
   {
-    if (this.map.getLayer(layerId)) this.map.removeLayer(layerId)
+    if (this.map.getLayer(layerId)) {
+      this.map.removeLayer(layerId)
+    }
+  }
+
+  removeDirectionLine(){
+    let source = this.map.getSource('direction-source');
+    if(source){
+      source.setData({
+        type: 'Feature',
+        geometry: {
+            type: 'LineString',
+            coordinates: [                
+            ]
+        },
+        properties: {}})
+    }
+  }
+
+  addDirectionLine(center,r = 0,distance=6,color='#37a2eb',width=8){
+    center = transform(center);
+    let point = destination(center,r,distance).geometry.coordinates
+    const lineData = {
+        type: 'Feature',
+        geometry: {
+            type: 'LineString',
+            coordinates: [
+                center,
+                point
+            ]
+        },
+        properties: {}
+    };
+    let source = this.map.getSource('direction-source');
+    if(!source){
+          this.map.addSource('direction-source', {
+            type: 'geojson',
+            data:lineData
+        });
+        source = this.map.getSource('direction-source');
+    }else{
+        source.setData(lineData)
+    }
+    let layer = this.map.getLayer('direction-layers-custom');
+    if(!layer){
+      this.map.addLayer({
+        id: 'direction-layers-custom',
+        type: 'line',
+        source: 'direction-source',
+        paint: {
+            'line-width': width,
+            'line-color': color
+        }
+      })
+    }else{
+      this.map.setPaintProperty('direction-layers-custom','line-width',width)
+      this.map.setPaintProperty('direction-layers-custom','line-color',color)
+    }
+    let layerSym = this.map.getLayer('direction-sym-layers-custom');
+    if(!layerSym){
+      this.map.addLayer({
+        id: 'direction-sym-layers-custom',
+        type: 'symbol',
+        source: 'direction-source',
+        layout: {
+          'symbol-placement': 'line',
+          'symbol-spacing': 50, // 图标间隔，默认为250
+          'icon-image': 'arrow', //箭头图标
+          'icon-size': 0.1 * width/8
+        }
+      })
+    }else{
+      this.map.setLayoutProperty('direction-sym-layers-custom','icon-size',0.1 * width/8)
+    }
+    
+  }
+
+  removeHeatmap(){
+    let source = this.map.getSource('heatmap-source');
+    if(source){
+      source.setData({
+        'type': 'FeatureCollection',
+        'features': []})
+    }
+  }
+
+  addHeatmap(dataList){
+    let geojson = {
+      'type': 'FeatureCollection',
+      'features': dataList.map(a=>{
+          return {
+              'type': 'Feature',
+              'geometry': {
+                  'type': 'Point',
+                  'coordinates': transform([a.lng, a.lat])
+              },
+              "properties": {
+                  "count": a.count
+              }
+          }
+      }),
+  }
+
+  // const layer = new ant7.HeatmapLayer({})
+  //     .source(geojson)
+  //     .size('count', [0, 1])
+  //     .shape('heatmap3D')
+  //     // weight映射通道
+  //     .style({
+  //         intensity: 5,
+  //         radius: 10,
+  //         rampColors: {
+  //         colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
+  //         positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+  //         },
+  //     });
+  //     emap.scene.addLayer(layer);
+
+  let source = this.map.getSource('heatmap-source');
+  if(!source){
+      this.map.addSource('heatmap-source', {
+          type: 'geojson',
+          data:geojson
+      });
+      source = this.map.getSource('heatmap-source');
+  }else{
+      source.setData(geojson)
+  }
+  let layer = this.map.getLayer('heatmap-layers-custom');
+  if(!layer){
+    this.map.addLayer({
+          id: 'heatmap-layers-custom',
+          type: 'heatmap',
+          source: 'heatmap-source',
+          paint: {
+              // Increase the heatmap weight based on frequency and property magnitude
+              'heatmap-weight': [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'count'],
+                  0,
+                  0,
+                  16,
+                  1
+              ],
+              // Increase the heatmap color weight weight by zoom level
+              // heatmap-intensity is a multiplier on top of heatmap-weight
+              'heatmap-intensity': [
+                  'interpolate',
+                  ['linear'],
+                  ['zoom'],
+                  0,
+                  1,
+                  1,
+                  3
+              ],
+              // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+              // Begin color ramp at 0-stop with a 0-transparancy color
+              // to create a blur-like effect.
+              'heatmap-color': [
+                  "interpolate",
+                  ["linear"],
+                  ["heatmap-density"],
+                  0,
+                  "rgba(0, 0, 255, 0)",
+                  0.1,
+                  "royalblue",
+                  0.3,
+                  "cyan",
+                  0.5,
+                  "lime",
+                  0.7,
+                  "yellow",
+                  1,
+                  "red"
+                  ],
+              // Adjust the heatmap radius by zoom level
+              'heatmap-radius': 30                   
+          }
+      });
+    }
   }
 
 

package/lib/threebox-plugin/src/three.module.js

@@ -705,6 +705,7 @@ class Vector2 {
 
 	}
 
+
 	setComponent( index, value ) {
 
 		switch ( index ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohuoy/easymap",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "self map easy use",
   "main": "main.js",
   "scripts": {
@@ -27,7 +27,7 @@
     "jszip": "^3.10.1",
     "mapbox-gl": "file:lib/mapbox-gl",
     "regl": "1.6.1",
-    "three": "^0.170.0",
+    "three": "^0.175.0",
     "threebox-plugin": "^2.2.7",
     "viewport-mercator-project": "^6.2.1"
   },

package/src/components/EasyMapMarker.js

@@ -32,9 +32,13 @@ export default class EasyMapMarker{
                     this.markerList.push(marker) 
                     pointList.push(position)                    
                 }
-                _config[0].map.fitBounds(getBBox(pointList), {
-                    padding: {top: 35, bottom:25, left: 15, right: 15}
-                });
+                if(pointList.length >=2){
+                    _config[0].map.fitBounds(getBBox(pointList), {
+                        padding: {top: 35, bottom:25, left: 15, right: 15}
+                    });
+                }else if(pointList.length == 1){
+                    _config[0].map.jumpTo({center:pointList[0]})
+                }                
             }else{
                 for(let i in this.config){
                     if(!_config.hasOwnProperty(i) && this.config[i]!=null){

package/src/components/control/TilesBar.js

@@ -6,7 +6,7 @@ export default class TilesBar {
     }
     openBtn=['standard','satellite','tiandi','gaode','arcgis']
     constructor(openBtn){
-        this.openBtn = ['standard','satellite','tiandi']
+        this.openBtn = openBtn && openBtn.length > 0 ? openBtn: ['standard','satellite','tiandi']
     }
 
     getBtnList(){
@@ -106,72 +106,147 @@ export default class TilesBar {
 
     addEvent(btn,key){
         btn.addEventListener('click',()=>{
-            let currentFillLayerIndex = this._map.style.stylesheet.layers.findIndex(a=>a.type!='fill' && a.type!='background')
+            let currentFillLayerIndex = this._map.style.stylesheet.layers.findIndex(a=>a.type!='fill' && a.type!='background' && a.type != 'line')
             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('gode')) this._map.removeLayer('gode');  
-                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis');  
-                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji');                        
+                if (this._map.getLayer('arcgis')) this._map.removeLayer('arcgis'); 
+                if (this._map.getLayer('mask')) this._map.removeLayer('mask');   
+                if (!this._map.getLayer('zhuji')){
+                    this._map.addLayer({
+                        "id": "zhuji",
+                        "source": "zhuji",
+                        "type": "raster"          
+                    },beforeId)
+                }; 
+                // if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji');  
+                // if (!this._map.getLayer('standard')){
+                //     this._map.addLayer({
+                //         "id": "standard",
+                //         "source": "standard",
+                //         "type": "raster"          
+                //     },beforeId)
+                //     this._map.theme.value = "dark"
+                // };  
+                this._map.theme.value = "dark"                    
             }
-            if(key == 'satellite'){                
+            if(key == 'satellite'){     
+                //移除基本图层
+                
+                // if (this._map.getLayer('standard')) this._map.removeLayer('standard');       
                 if (this._map.getLayer('tiandi')) this._map.removeLayer('tiandi'); 
-                if (this._map.getLayer('zhuji')) this._map.removeLayer('zhuji'); 
+                // 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('arcgis')) this._map.removeLayer('arcgis'); 
+                if (!this._map.getLayer('mask')){
+                    this._map.addLayer({
+                        "id": "mask",
+                        "type": "background",
+                        "layout": {},
+                        "paint": {
+                            "background-emissive-strength": 1,
+                            "background-color": "#3269c8"
+                        }
+                    },beforeId)
+                }; 
+                if (!this._map.getLayer('zhuji')){
+                    this._map.addLayer({
+                        "id": "zhuji",
+                        "source": "zhuji",
+                        "type": "raster"          
+                    },beforeId)
+                };   
                 if (!this._map.getLayer('yingxiang')){
                     this._map.addLayer({
                         "id": "yingxiang",
                         "source": "yingxiang",
                         "type": "raster"          
-                    })
+                    },beforeId)
+                    this._map.theme.value = "dark"
                 };  
             }
             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('mask')){
+                    this._map.addLayer({
+                        "id": "mask",
+                        "type": "background",
+                        "layout": {},
+                        "paint": {
+                            "background-emissive-strength": 1,
+                            "background-color": "#3269c8"
+                        }
+                    },beforeId)
+                }; 
                 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"          
-                    })
+                    },beforeId)
                 };  
+                this._map.theme.value = "light"
             }
             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('mask')){
+                    this._map.addLayer({
+                        "id": "mask",
+                        "type": "background",
+                        "layout": {},
+                        "paint": {
+                            "background-emissive-strength": 1,
+                            "background-color": "#3269c8"
+                        }
+                    },beforeId)
+                }; 
                 if (!this._map.getLayer('gaode')){
                     this._map.addLayer({
                         "id": "gaode",
                         "source": "gaode",
                         "type": "raster"          
-                    })
+                    },beforeId)
                 };  
+                this._map.theme.value = "light"
             }
             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('mask')){
+                    this._map.addLayer({
+                        "id": "mask",
+                        "type": "background",
+                        "layout": {},
+                        "paint": {
+                            "background-emissive-strength": 1,
+                            "background-color": "#3269c8"
+                        }
+                    },beforeId)
+                }; 
                 if (!this._map.getLayer('arcgis')){
                     this._map.addLayer({
                         "id": "arcgis",
                         "source": "arcgis",
                         "type": "raster"          
-                    })
+                    },beforeId)
                 };  
+                this._map.theme.value = "dark"
             }
         })
     }