feat:大屏地图支持下钻

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -100,8 +100,7 @@ export default {
           if(val.type==='move_in'){
             coord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
             fromCoord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
-          }
-          if(val.type==='move_out'){
+          }else{
             coord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
             fromCoord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
           }

data-room-ui/packages/BasicComponents/FlyMap/setting.vue

@@ -106,7 +106,7 @@
         >
            <el-input-number
             v-model="config.customize.fontSize"
-            placeholder="请输入轨迹大小"
+            placeholder="请输入字体大小"
             controls-position="right"
             :step="1"
           />
@@ -376,6 +376,7 @@ export default {
       } else if (this.config.customize.level === 'province') {
         this.getMapList()
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.down=false
       }else{
         this.config.customize.down=false
       }

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -31,7 +31,8 @@ export default {
   data () {
     return {
       charts: null,
-      hasData: false
+      hasData: false,
+      level:''
     }
   },
   computed: {
@@ -94,8 +95,16 @@ export default {
       const option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
+        graphic: [
+          ],
         geo: {
           map: config.customize.scope,
+          zlevel: 10,
+          show:true,
+          layoutCenter: ['50%', '50%'],
+          roam: true,
+          layoutSize: "100%",
+          zoom: 1,
           label: {
             // 通常状态下的样式
             normal: {
@@ -253,10 +262,73 @@ export default {
           }
         }
       }
+      if(config.customize.down){
+            // config?.customize?.graphic?.forEach((item,index)=>{
+            option.graphic.push({
+              type: "text",
+              left: `220px`,
+              top: "5%",
+              style: {
+                  text: '中国',
+                  font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
+                  fill: config.customize.fontGraphicColor,
+              },
+              onclick:async()=>{
+                this.level='country'
+                const index = option.graphic.findIndex(i => i.style.text === '中国');
+                // 点击元素之后的所有元素全部删除
+                option.graphic.splice(index + 1);
+                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+                option.geo.map = '中华人民共和国'
+                this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+                echarts.registerMap('中华人民共和国', map);
+                this.charts.setOption(option, true);
+
+              }
+            },)
+          // })
+          }
       const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
       const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
       echarts.registerMap(config.customize.scope, map)
       this.charts.setOption(option)
+      this.charts.on('click',  async(params)=> {
+          const index = option.graphic.findIndex(i => i.style.text === params.name);
+          if(params.name=='' || index !== -1) return
+          if(config.customize.down===false||this.level==='province') return
+          const idx = option.graphic.length + 1;
+          option.graphic.push({
+            type: "text",
+            left: `${idx * 220}px`,
+            top: "5%",
+            style: {
+                text: params.name,
+                font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
+                fill: config.customize.fontGraphicColor,
+            },
+            onclick: async() => {
+                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
+                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+                // 利用函数的作用域，可以直接拿上面的name来用
+                const index = option.graphic.findIndex(i => i.style.text === params.name);
+                // 点击元素之后的所有元素全部删除
+                option.graphic.splice(index + 1);
+                // 很多操作重复了，你可以将公共部分抽离出来
+                option.geo.map = params.name;
+                this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
+                echarts.registerMap(params.name, map);
+                this.charts.setOption(option, true);
+            },
+        });
+          this.level='province'
+          const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
+          const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+          this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
+          option.geo.map = params.name
+          echarts.registerMap(params.name, map);
+          this.charts.setOption(option, true);
+          });
     }
   }
 }

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -74,6 +74,39 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-if="config.customize.level == 'country'"
+          label="是否开启下钻"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.down"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="头部字体颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.fontGraphicColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="头部字体大小"
+          label-width="100px"
+        >
+           <el-input-number
+            v-model="config.customize.fontSize"
+            placeholder="请输入字体大小"
+            controls-position="right"
+            :step="1"
+          />
+        </el-form-item>
         <el-form-item
           label="地图背景色"
           label-width="100px"
@@ -280,6 +313,9 @@ export default {
         this.config.customize.dataMap = '中华人民共和国.json'
       } else if (this.config.customize.level === 'province') {
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.down=false
+      }else{
+        this.config.customize.down=false
       }
     },
     delColor () {

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -44,7 +44,7 @@ const customConfig = {
     // 是否显示文字
     mapName: true,
     // 地图背景色
-    backgroundColor: '#404a59',
+    backgroundColor: 'rgb(21, 26, 38)',
     // 是否打点
     scatter: true,
     // 悬浮框背景色
@@ -56,13 +56,17 @@ const customConfig = {
     // 打点图文字颜色
     scatterColor: '#fff',
     // 分割线颜色
-    mapLineColor: 'rgba(147, 235, 248, 1)',
+    mapLineColor: 'rgba(53, 86, 165, 1)',
+    fontGraphicColor: '#fff',
+    fontSize:'30',
+    // 是否开启下钻
+    down: false,
     // 地图级别
     level: 'country',
     // 范围
     scope: '中国',
     // 地图区域颜色
-    areaColor: '#007aff',
+    areaColor: 'rgba(31, 50, 121, 1)',
     // 是否开启筛选
     visual: false,
     // 筛选范围