初始化

frontend/packages/BasicComponents/FlyMap/index.vue

@@ -0,0 +1,421 @@
+<template>
+  <div
+    class="bs-design-wrap bs-bar"
+    style="width: 100%; height: 100%"
+  >
+    <el-button v-if="currentDeep > 0" class="button" type='text' @click="backToPreviousLevel(config)"> 返回上一级</el-button>
+    <div
+      :id="`chart${config.code}`"
+      style="width: 100%; height: 100%"
+    />
+  </div>
+</template>
+<script>
+import 'insert-css'
+import * as echarts from 'echarts'
+import {nameMap} from './json/mapData.js'
+import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import {getMapInfo,getMapWorld} from '../../../src/api/bigScreen/design.js'
+export default {
+  name: 'MapCharts',
+  mixins: [paramsMixins, commonMixins, linkageMixins],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      charts: null,
+      hasData: false,
+      level: '',
+      option: {},
+      mapList: [],
+      currentDeep: 0,
+    }
+  },
+  computed: {
+    Data() {
+      return JSON.parse(JSON.stringify(this.config))
+    }
+  },
+  watch: {
+    Data: {
+      handler(newVal, oldVal) {
+        if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) {
+          this.$nextTick(() => {
+            this.charts.resize()
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.chartInit()
+  },
+  beforeDestroy() {
+    this.charts?.clear()
+  },
+  methods: {
+    chartInit() {
+      const config = this.config
+      // key和code相等，说明是一进来刷新，调用list接口
+      if (this.config.code === this.config.key || this.isPreview) {
+        // 改变数据
+        this.changeDataByCode(config).then((res) => {
+          // 改变样式
+          // config = this.changeStyle(res)
+          this.newChart(config)
+        }).catch(() => {
+        })
+      } else {
+        // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
+        this.changeData(config).then((res) => {
+          // 初始化图表
+          this.newChart(res)
+        })
+      }
+    },
+    /**
+     * 数据格式化
+     * 该方法继承自commonMixins
+     * @param {*} config
+     * @param {Array} data
+     */
+    dataFormatting(config, data) {
+      let coordinates = {}
+      if (data.data) {
+        coordinates = this.formatMapData(data.data)
+      }
+      config.option = {
+        ...config.option,
+        data: data?.data,
+        ...coordinates
+      }
+      return config
+    },
+    /**
+     * 格式化地图飞线数据
+     * @param {Array} data
+     */
+    formatMapData(data) {
+      const lines_coord = []
+      let from_coord = []
+      let to_coord = []
+      if (data) {
+        // 起点名称
+        const fromName = this.config.customize.dataField?.fromName || 'from'
+        // 起点经度
+        const fromLng = this.config.customize.dataField?.fromLng || 'lng1'
+        // 起点纬度
+        const fromLat = this.config.customize.dataField?.fromLat || 'lat1'
+        // 终点名称
+        const toName = this.config.customize.dataField?.toName || 'to'
+        // 终点经度
+        const toLng = this.config.customize.dataField?.toLng || 'lng2'
+        // 终点纬度
+        const toLat = this.config.customize.dataField?.toLat || 'lat2'
+        // 值
+        const value = this.config.customize.dataField?.value || 'value'
+        data.forEach(val => {
+          // 飞线
+          lines_coord.push({value: val[value], msg: {...val}, coords: [[val[fromLng], val[fromLat]], [val[toLng], val[toLat]]]})
+          // 起点散点
+          from_coord.push({name: val[fromName], value: [val[fromLng], val[fromLat], val[value]], msg: {...val}})
+          // 终点散点
+          to_coord.push({name: val[toName], value: [val[toLng], val[toLat], val[value]], msg: {...val}})
+        })
+      }
+      return {
+        lines_coord,
+        from_coord,
+        to_coord
+      }
+    },
+
+    /**
+     * 返回上一级
+     * @param {*} config
+     */
+    async backToPreviousLevel(config) {
+      this.currentDeep--
+      let map = this.mapList[this.currentDeep]
+      // 移除mapList中的最后一个元素
+      this.mapList.pop()
+      let mapData = JSON.parse(map.geoJson)
+      this.option.geo.map = map.name;
+      // this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      echarts.registerMap(map.name, mapData);
+      this.charts.setOption(this.option, true);
+    },
+    /**
+     * 修改地图数据
+     * @param {Array} data
+     */
+    changeMapData(data) {
+      let coordinates = this.formatMapData(data)
+      this.option.series[0].data = coordinates.to_coord
+      this.option.series[1].data = coordinates.from_coord
+      this.option.series[2].data = coordinates.lines_coord
+      this.charts.setOption(this.option)
+    },
+    /**
+     * 初始化地图
+     * 该方法继承自commonMixins
+     * @param {*} config
+     */
+    async newChart(config) {
+      this.charts = echarts.init(
+        document.getElementById(`chart${this.config.code}`)
+      )
+      // 处理option，将配置项转换为echarts的option
+      this.handleOption(config)
+      this.level = config.customize.level
+      let hasMapId = !!config.customize.mapId
+      // 根据mapId获取地图数据
+      // let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
+      let mapResp
+      // let requestTool
+      //换成自己的拦截器
+      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
+      if (!hasMapId) {
+        mapResp=await getMapWorld();
+        // mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/worldMap/world`
+      }else{
+        mapResp = await getMapInfo(config.customize.mapId);
+      }
+      // const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
+      let mapData = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
+      if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
+        // 没有上传过geoJson
+        this.$message({
+          message: '请先上传地图数据',
+          type: 'warning'
+        })
+        return
+      }
+      this.mapList.push(mapResp.data)
+      echarts.registerMap(config.customize.scope, mapData)
+      this.charts.setOption(this.option)
+      // 注册点击事件
+      this.registerClickEvent(config)
+    },
+    /**
+     * 处理配置项option
+     * @param {*} config
+     */
+    handleOption(config) {
+      this.option = {
+        nameMap: config.customize.level == '0' ? nameMap : '',
+        // graphic: [
+        // ],
+        geo: {
+          map: config.customize.scope,
+          zlevel: 10,
+          show: true,
+          layoutCenter: ['50%', '50%'],
+          roam: true,
+          layoutSize: "100%",
+          zoom: 1,
+          label: {
+            // 通常状态下的样式
+            normal: {
+              show: config.customize.mapName,
+              textStyle: {
+                color: config.customize.mapNameColor || '#fff',
+                fontSize: config.customize.mapNameSize || 12,
+                fontWeight: config.customize.mapNameWeight || 500
+              }
+            },
+            // 鼠标放上去的样式
+            emphasis: {
+              textStyle: {
+                color: config.customize.mapNameColor || '#fff',
+                fontSize: config.customize.mapNameSize || 12,
+                fontWeight: config.customize.mapNameWeight || 500
+              }
+            }
+          },
+          // 地图区域的样式设置
+          itemStyle: {
+            normal: {
+              borderColor: config.customize.mapLineColor,
+              borderWidth: 1,
+              areaColor: config.customize.areaColor,
+              shadowColor: 'fffff',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10
+            },
+            // 鼠标放上去高亮的样式
+            emphasis: {
+              areaColor: '#389BB7',
+              borderWidth: 0
+            }
+          }
+        },
+        tooltip: {
+          backgroundColor: config.customize.tooltipBackgroundColor,
+          borderColor: config.customize.borderColor,
+          show: true,
+          textStyle: {
+            color: config.customize.fontColor,
+          },
+        },
+        series: [
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            zlevel: 15,
+            symbolSize: 8,
+            rippleEffect: {
+              period: 4, brushType: 'stroke', scale: 4
+            },
+            tooltip: {
+              trigger: 'item',
+              formatter(params) {
+                const a = eval(config.customize.scatterFormatter)
+                return a
+              },
+            },
+            itemStyle: {
+              color: config.customize.scatterColor,
+              opacity: 1
+            },
+            data: config.option.to_coord
+          },
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            zlevel: 15,
+            symbolSize: 12,
+            tooltip: {
+              trigger: 'item',
+              formatter(params) {
+                const a = eval(config.customize.scatterFormatter)
+                return a
+              },
+            },
+            rippleEffect: {
+              period: 6, brushType: 'stroke', scale: 8
+            },
+
+            itemStyle: {
+              color: config.customize.scatterCenterColor,
+              opacity: 1
+            },
+            data: config.option.from_coord
+          },
+          {
+            type: 'lines',
+            coordinateSystem: 'geo',
+            zlevel: 15,
+            tooltip: {
+              trigger: 'item',
+              formatter(params) {
+                const a = eval(config.customize.lineFormatter)
+                return a
+              },
+            },
+            effect: {
+              show: true,
+              period: 5,
+              trailLength: 0,
+              symbol: config.customize.symbol,
+              color: config.customize.symbolColor,
+              symbolSize: config.customize.symbolSize,
+            },
+            lineStyle: {
+              normal: {
+                color: function (value) {
+                  return '#ffffff'
+                }, width: 2, opacity: 0.6, curveness: 0.2
+              }
+            },
+            data: config.option.lines_coord
+          }
+
+        ]
+      }
+      if (config.customize.visual) {
+        this.option.visualMap = {
+          show: false,
+          min: config.customize.range[0],
+          max: config.customize.range[1],
+          seriesIndex: [0, 2],
+          inRange: {
+            color: config.customize.rangeColor
+          }
+        }
+      }
+    },
+    /**
+     * 注册点击事件
+     * @param config 地图组件配置项
+     */
+    registerClickEvent(config) {
+      this.charts.on('click', async (params) => {
+        let data = params?.data?.msg
+        if (data) {
+          this.linkage({...data, clickAreaName: params.name})
+        } else {
+          this.linkage({clickAreaName: params.name})
+        }
+        if (params.name == '') return
+        if (!config.customize.down) {
+          return
+        }
+        // 到达允许下钻的层数，则不再下钻
+        if (this.currentDeep >= config.customize.downLevel) return
+        const mapUrl = `/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
+        const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, false)
+        // 地图不可用
+        if (map.available !== 1) {
+          this.$message({
+            message: '未找到该地图配置',
+            type: 'warning'
+          })
+          return
+        }
+        this.currentDeep++
+        this.mapList.push(map)
+        // this.changeData({...config, customize: {...config.customize, scope: params.name}})
+        this.option.geo.map = params.name
+        echarts.registerMap(params.name, JSON.parse(map.geoJson));
+        this.charts.setOption(this.option, true);
+      });
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/echartStyle';
+
+.light-theme {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.auto-theme {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.bs-design-wrap {
+  position: relative;
+
+  .button {
+    position: absolute;
+    z-index: 999;
+  }
+}
+</style>

frontend/packages/BasicComponents/FlyMap/json/mapData.js

@@ -0,0 +1,219 @@
+export const nameMap = {
+  Afghanistan: '阿富汗',
+  Singapore: '新加坡',
+  Angola: '安哥拉',
+  Albania: '阿尔巴尼亚',
+  'United Arab Emirates': '阿联酋',
+  Argentina: '阿根廷',
+  Armenia: '亚美尼亚',
+  'French Southern and Antarctic Lands':
+      '法属南半球和南极领地',
+  Australia: '澳大利亚',
+  Austria: '奥地利',
+  Azerbaijan: '阿塞拜疆',
+  Burundi: '布隆迪',
+  Belgium: '比利时',
+  Benin: '贝宁',
+  'Burkina Faso': '布基纳法索',
+  Bangladesh: '孟加拉国',
+  Bulgaria: '保加利亚',
+  'The Bahamas': '巴哈马',
+  'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
+  Belarus: '白俄罗斯',
+  Belize: '伯利兹',
+  Bermuda: '百慕大',
+  Bolivia: '玻利维亚',
+  Brazil: '巴西',
+  Brunei: '文莱',
+  Bhutan: '不丹',
+  Botswana: '博茨瓦纳',
+  'Central African Republic': '中非共和国',
+  Canada: '加拿大',
+  Switzerland: '瑞士',
+  Chile: '智利',
+  China: '中国',
+  'Ivory Coast': '象牙海岸',
+  Cameroon: '喀麦隆',
+  'Democratic Republic of the Congo': '刚果民主共和国',
+  'Republic of the Congo': '刚果共和国',
+  Colombia: '哥伦比亚',
+  'Costa Rica': '哥斯达黎加',
+  Cuba: '古巴',
+  'Northern Cyprus': '北塞浦路斯',
+  Cyprus: '塞浦路斯',
+  'Czech Republic': '捷克共和国',
+  Germany: '德国',
+  Djibouti: '吉布提',
+  Denmark: '丹麦',
+  'Dominican Republic': '多明尼加共和国',
+  Algeria: '阿尔及利亚',
+  Ecuador: '厄瓜多尔',
+  Egypt: '埃及',
+  Eritrea: '厄立特里亚',
+  Spain: '西班牙',
+  Estonia: '爱沙尼亚',
+  Ethiopia: '埃塞俄比亚',
+  Finland: '芬兰',
+  Fiji: '斐',
+  'Falkland Islands': '福克兰群岛',
+  France: '法国',
+  Gabon: '加蓬',
+  'United Kingdom': '英国',
+  Georgia: '格鲁吉亚',
+  Ghana: '加纳',
+  Guinea: '几内亚',
+  Gambia: '冈比亚',
+  'Guinea Bissau': '几内亚比绍',
+  Greece: '希腊',
+  Greenland: '格陵兰',
+  Guatemala: '危地马拉',
+  'French Guiana': '法属圭亚那',
+  Guyana: '圭亚那',
+  Honduras: '洪都拉斯',
+  Croatia: '克罗地亚',
+  Haiti: '海地',
+  Hungary: '匈牙利',
+  Indonesia: '印度尼西亚',
+  India: '印度',
+  Ireland: '爱尔兰',
+  Iran: '伊朗',
+  Iraq: '伊拉克',
+  Iceland: '冰岛',
+  Israel: '以色列',
+  Italy: '意大利',
+  Jamaica: '牙买加',
+  Jordan: '约旦',
+  Japan: '日本',
+  Kazakhstan: '哈萨克斯坦',
+  Kenya: '肯尼亚',
+  Kyrgyzstan: '吉尔吉斯斯坦',
+  Cambodia: '柬埔寨',
+  Kosovo: '科索沃',
+  Kuwait: '科威特',
+  Laos: '老挝',
+  Lebanon: '黎巴嫩',
+  Liberia: '利比里亚',
+  Libya: '利比亚',
+  'Sri Lanka': '斯里兰卡',
+  Lesotho: '莱索托',
+  Lithuania: '立陶宛',
+  Luxembourg: '卢森堡',
+  Latvia: '拉脱维亚',
+  Morocco: '摩洛哥',
+  Moldova: '摩尔多瓦',
+  Madagascar: '马达加斯加',
+  Mexico: '墨西哥',
+  Macedonia: '马其顿',
+  Mali: '马里',
+  Myanmar: '缅甸',
+  Montenegro: '黑山',
+  Mongolia: '蒙古',
+  Mozambique: '莫桑比克',
+  Mauritania: '毛里塔尼亚',
+  Malawi: '马拉维',
+  Malaysia: '马来西亚',
+  Namibia: '纳米比亚',
+  'New Caledonia': '新喀里多尼亚',
+  Niger: '尼日尔',
+  Nigeria: '尼日利亚',
+  Nicaragua: '尼加拉瓜',
+  Netherlands: '荷兰',
+  Norway: '挪威',
+  Nepal: '尼泊尔',
+  'New Zealand': '新西兰',
+  Oman: '阿曼',
+  Pakistan: '巴基斯坦',
+  Panama: '巴拿马',
+  Peru: '秘鲁',
+  Philippines: '菲律宾',
+  'Papua New Guinea': '巴布亚新几内亚',
+  Poland: '波兰',
+  'Puerto Rico': '波多黎各',
+  'North Korea': '北朝鲜',
+  Portugal: '葡萄牙',
+  Paraguay: '巴拉圭',
+  Qatar: '卡塔尔',
+  Romania: '罗马尼亚',
+  Russia: '俄罗斯',
+  Rwanda: '卢旺达',
+  'Western Sahara': '西撒哈拉',
+  'Saudi Arabia': '沙特阿拉伯',
+  Sudan: '苏丹',
+  'South Sudan': '南苏丹',
+  Senegal: '塞内加尔',
+  'Solomon Islands': '所罗门群岛',
+  'Sierra Leone': '塞拉利昂',
+  'El Salvador': '萨尔瓦多',
+  Somaliland: '索马里兰',
+  Somalia: '索马里',
+  'Republic of Serbia': '塞尔维亚',
+  Suriname: '苏里南',
+  Slovakia: '斯洛伐克',
+  Slovenia: '斯洛文尼亚',
+  Sweden: '瑞典',
+  Swaziland: '斯威士兰',
+  Syria: '叙利亚',
+  Chad: '乍得',
+  Togo: '多哥',
+  Thailand: '泰国',
+  Tajikistan: '塔吉克斯坦',
+  Turkmenistan: '土库曼斯坦',
+  'East Timor': '东帝汶',
+  'Trinidad and Tobago': '特里尼达和多巴哥',
+  Tunisia: '突尼斯',
+  Turkey: '土耳其',
+  'United Republic of Tanzania': '坦桑尼亚',
+  Uganda: '乌干达',
+  Ukraine: '乌克兰',
+  Uruguay: '乌拉圭',
+  'United States': '美国',
+  Uzbekistan: '乌兹别克斯坦',
+  Venezuela: '委内瑞拉',
+  Vietnam: '越南',
+  Vanuatu: '瓦努阿图',
+  'West Bank': '西岸',
+  Yemen: '也门',
+  'South Africa': '南非',
+  Zambia: '赞比亚',
+  Korea: '韩国',
+  Tanzania: '坦桑尼亚',
+  Zimbabwe: '津巴布韦',
+  Congo: '刚果',
+  'Central African Rep.': '中非',
+  Serbia: '塞尔维亚',
+  'Bosnia and Herz.': '波黑',
+  'Czech Rep.': '捷克',
+  'W. Sahara': '西撒哈拉',
+  'Lao PDR': '老挝',
+  'Dem.Rep.Korea': '朝鲜',
+  'Falkland Is.': '福克兰群岛',
+  'Timor-Leste': '东帝汶',
+  'Solomon Is.': '所罗门群岛',
+  Palestine: '巴勒斯坦',
+  'N. Cyprus': '北塞浦路斯',
+  Aland: '奥兰群岛',
+  'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
+  Mauritius: '毛里求斯',
+  Comoros: '科摩罗',
+  'Eq. Guinea': '赤道几内亚',
+  'Guinea-Bissau': '几内亚比绍',
+  'Dominican Rep.': '多米尼加',
+  'Saint Lucia': '圣卢西亚',
+  Dominica: '多米尼克',
+  'Antigua and Barb.': '安提瓜和巴布达',
+  'U.S. Virgin Is.': '美国原始岛屿',
+  Montserrat: '蒙塞拉特',
+  Grenada: '格林纳达',
+  Barbados: '巴巴多斯',
+  Samoa: '萨摩亚',
+  Bahamas: '巴哈马',
+  'Cayman Is.': '开曼群岛',
+  'Faeroe Is.': '法罗群岛',
+  'IsIe of Man': '马恩岛',
+  Malta: '马耳他共和国',
+  Jersey: '泽西',
+  'Cape Verde': '佛得角共和国',
+  'Turks and Caicos Is.': '特克斯和凯科斯群岛',
+  'St. Vin. and Gren.': '圣文森特和格林纳丁斯'
+}
+

frontend/packages/BasicComponents/FlyMap/setting.vue

@@ -0,0 +1,529 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+      <div class="lc-field-body">
+        <BorderSetting
+          v-if="config.border"
+          label-width="100px"
+          :config="config.border"
+          :bigTitle='config.title'
+        />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+          <div class="lc-field-body">
+            <RotateSetting
+              :config="config"
+            />
+          </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="是否显示地名"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.mapName"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.mapNameColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.mapNameSize"
+            class="bs-el-input-number"
+            placeholder="请输入字体大小"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体权重"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.mapNameWeight"
+            class="bs-el-input-number"
+            placeholder="请输入字体权重"
+            :min="100"
+            :step="100"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图级别"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.level"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            @change="changeLevel()"
+          >
+           <el-option
+              v-for="level in levelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
+
+
+        <el-form-item
+          label="地图"
+          label-width="100px"
+        >
+          <el-cascader
+            ref="cascade"
+            v-model="config.customize.mapId"
+            popper-class="bs-el-cascader"
+            :options="mapTree"
+            :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
+            @change="mapSelect">
+
+            <template slot-scope="{ node, data }">
+              <span style="float: left">{{ data.name }}</span>
+              <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
+            </template>
+          </el-cascader>
+
+        </el-form-item>
+
+
+<!--        <el-form-item-->
+<!--          v-if="config.customize.level == 'province'"-->
+<!--          label="地图显示区域"-->
+<!--          label-width="100px"-->
+<!--        >-->
+<!--          <el-select-->
+<!--            v-model="config.customize.dataMap"-->
+<!--            popper-class="bs-el-select"-->
+<!--            class="bs-el-select"-->
+<!--            @change="changeMap"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="map in mapList"-->
+<!--              :key="map.name"-->
+<!--              :label="map.name"-->
+<!--              :value="map.url"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item
+          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"
+        >
+          <el-select
+            v-model="config.customize.downLevel"
+            popper-class="bs-el-select"
+            class="bs-el-select">
+            <el-option
+              v-for="level in downLevelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </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"
+        >
+          <ColorPicker
+            v-model="config.customize.mapLineColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图分割块颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.areaColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="悬浮框背景色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.tooltipBackgroundColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="悬浮框边框色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.borderColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="悬浮框字体颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.fontColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="线悬浮框内容"
+          label-width="100px"
+        >
+          <el-input :rows="8" v-model="config.customize.lineFormatter" type="textarea"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="点悬浮框内容"
+          label-width="100px"
+        >
+          <el-input :rows="4" v-model="config.customize.scatterFormatter" type="textarea"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="轨迹样式"
+          label-width="100px"
+        >
+           <el-select
+            v-model="config.customize.symbol"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="symbol in symbolList"
+              :key="symbol.name"
+              :label="symbol.name"
+              :value="symbol.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="轨迹颜色"
+          label-width="100px"
+        >
+            <ColorPicker
+            v-model="config.customize.symbolColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="轨迹大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.symbolSize"
+            placeholder="请输入轨迹大小"
+            controls-position="right"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          label="普通点颜色"
+          label-width="100px"
+        >
+            <ColorPicker
+            v-model="config.customize.scatterColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="中心点颜色"
+          label-width="100px"
+        >
+            <ColorPicker
+            v-model="config.customize.scatterCenterColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="是否开启筛选"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.visual"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.visual"
+          label="数值范围"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.range[0]"
+            placeholder="请输入最小值"
+            controls-position="right"
+            :step="1"
+          />
+          -
+          <el-input-number
+            v-model="config.customize.range[1]"
+            controls-position="right"
+            placeholder="请输入最大值"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.visual"
+          label="配色方案"
+          label-width="100px"
+        >
+          <color-select
+            v-model="config.customize.rangeColor"
+            @update="updateColorScheme"
+          />
+          <div
+            style="
+                display: flex;
+                align-items: center;
+                height: 42px;
+                flex-wrap: wrap;
+              "
+          >
+            <el-color-picker
+              v-for="(colorItem, index) in colors"
+              :key="index"
+              v-model="config.customize.rangeColor[index]"
+              show-alpha
+              popper-class="bs-el-color-picker"
+              class="start-color bs-el-color-picker"
+            />
+            <span
+              class="el-icon-circle-plus-outline"
+              style="color: #007aff; font-size: 20px"
+              @click="addColor"
+            />
+            <span
+              v-if="colors.length"
+              class="el-icon-remove-outline"
+              style="color: #ea0b30; font-size: 20px"
+              @click="delColor"
+            />
+          </div>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
+import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorSelect,
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  mixins: [chartSettingMixins],
+  props: {},
+  data () {
+    return {
+      mapTree: [],
+      mapList: [],
+      currentMap: {},
+      predefineThemeColors: predefineColors,
+      symbolList:[
+        {
+          name:'箭头',
+          value:'arrow'
+        },
+        {
+          name:'圆',
+          value:'circle'
+        },
+        {
+          name:'矩形',
+          value:'rect'
+        },
+        {
+          name:'无',
+          value:'none'
+        }
+      ],
+      levelList: [
+        {value: '0', label: '世界'},
+        {value: '1', label: '国家'},
+        {value: '2', label: '省份'},
+        {value: '3', label: '城市'},
+        {value: '4', label: '区县'}
+      ],
+      // 旧版本地图等级，该数据用于兼容旧版本
+      oldLevelMap: {
+        'world' : '0',
+        'country' : '1',
+        'province' : '2',
+      },
+      downLevelList: [
+        {value: 1, label: '下钻一层'},
+        {value: 2, label: '下钻两层'},
+        {value: 3, label: '下钻三层'},
+        {value: 4, label: '下钻四层'},
+        {value: 5, label: '下钻五层'}
+      ],
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+    // 'config.customize.level': {
+    //   handler (val) {
+    //     this.getMapList()
+    //   }
+    // }
+  },
+  mounted () {
+    // this.getMapList()
+    this.getMapTree()
+  },
+  methods: {
+    getMapList () {
+      this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
+        this.mapList = res
+      })
+    },
+    getMapTree() {
+      const levelConst = ['0', '1', '2', '3', '4']
+      if (!levelConst.includes(this.config.customize.level)) {
+        this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
+      }
+      this.$dataRoomAxios.get(`/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
+        this.mapTree = res
+      })
+    },
+    mapSelect (mapId) {
+      let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
+      this.currentMap = mapData
+    },
+     changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
+    },
+    changeLevel () {
+      this.getMapTree()
+    },
+    delColor () {
+      this.colors = []
+      this.config.customize.rangeColor = []
+    },
+    addColor () {
+      this.colors.push('')
+    },
+    updateColorScheme (colors) {
+      this.colors = [...colors]
+      this.config.customize.rangeColor = [...colors]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/settingWrap.scss';
+@import '../../assets/style/bsTheme.scss';
+// 筛选条件的按钮样式
+.add-filter-box {
+  position: relative;
+  .add-filter {
+    margin-left: 90px;
+    margin-bottom: 10px;
+  }
+  .add-filter-btn {
+    position: absolute;
+    top: 0;
+  }
+}
+.lc-field-body {
+  padding: 12px 16px;
+}
+
+</style>

frontend/packages/BasicComponents/FlyMap/settingConfig.js

@@ -0,0 +1,163 @@
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+// import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
+import cloneDeep from 'lodash/cloneDeep'
+import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
+export const settingConfig = {
+  padding: [30, 30, 50, 80],
+  legend: false,
+  isGroup: true,
+  data: [],
+  color: '',
+  theme: 'dark',
+  displayOption: {
+    ...displayOption,
+    params: {
+      enable: true
+    },
+    headerField: {
+      enable: false
+    },
+    mapField: {
+      enable: false
+    },
+    flyMapField: {
+      enable: true
+    },
+    metricField: {
+      // 指标
+      label: '维度',
+      enable: false,
+      multiple: false // 是否多选
+    },
+    dimensionField: {
+      // 表格列
+      label: '展示字段', // 维度/查询字段
+      enable: false,
+      multiple: false // 是否多选
+    }
+  }
+}
+const customConfig = {
+  type: 'flyMap',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+
+  customize: {
+    // 地图id
+    mapId: '1',
+    suguichuan:"333",
+    // 是否显示文字
+    mapName: false,
+    // 文字颜色
+    mapNameColor: '#fff',
+    // 字体大小
+    mapNameSize: 12,
+    // 文字权重
+    mapNameWeight: 500,
+    // 悬浮框背景色
+    tooltipBackgroundColor: '#0C121C',
+    // 悬浮框边框色
+    borderColor: 'rgba(0, 0, 0, 0.16)',
+    // 悬浮框字体颜色
+    fontColor:'#DADADA',
+    // 打点图背景颜色
+    scatterBackgroundColor: 'rgba(255,0,0,.7)',
+    // 打点图文字颜色
+    scatterColor: 'rgba(165, 108, 91, 1)',
+    // 打点图中心点文字颜色
+    scatterCenterColor:'rgba(205, 196, 110, 1)',
+    // 分割线颜色
+    mapLineColor: 'rgba(53, 86, 165, 1)',
+    // 水印字体颜色
+    fontGraphicColor: '#fff',
+    fontSize:'30',
+    // 是否开启下钻
+    down: false,
+    // 允许下钻的层级
+    downLevel: 1,
+    // 轨迹图像
+    symbol: 'arrow',
+    // 轨迹颜色
+    symbolColor: '#01AAED',
+    // 轨迹大小
+    symbolSize:8,
+    // 地图级别
+    level: 1,
+    // 范围
+    scope: '中国',
+    // 地图区域颜色
+    areaColor: 'rgba(31, 50, 121, 1)',
+    // 是否开启筛选
+    visual: true,
+    graphic:['中华人民共和国'],
+    // 筛选范围
+    range: [0, 100],
+    scatterFormatter:'`<p style="text-align:center;font-size: 14px">${params.name}</p>`',
+    // 格式化脚本
+    lineFormatter:'`<p style="font-size: 16px">销售额</p><div>${params.data.msg.from}-->${params.data.msg.to} ${params.data.msg.value} </div>`',
+    // 从上到下的颜色
+    rangeColor: ['rgba(165, 108, 91, 1)', 'rgba(205, 196, 110, 1)'],
+    // 地图数据
+    dataMap: '中华人民共和国.json',
+    // 展示字段
+    value: '',
+    // 横坐标
+    xaxis: '',
+    // 纵坐标
+    yaxis: '',
+    // 名称
+    name: '',
+    // 数据字段配置
+    dataField: {
+      // 起点名称
+      fromName: '',
+      // 起点经度
+      fromLng: '',
+      // 起点纬度
+      fromLat: '',
+      // 终点名称
+      toName: '',
+      // 终点经度
+      toLng: '',
+      // 终点纬度
+      toLat: '',
+      // 轨迹数据
+      value: '',
+    }
+  }
+}
+
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
+
+export const FlyMapData = {
+  name: '飞线图',
+  title: '飞线图',
+  icon: Icon.getNameList()[18],
+  border:{type:'',titleHeight:60,fontSize:16,isTitle:true,padding:[0,0,0,0]},
+  className:
+    'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
+  w: 800,
+  h: 700,
+  x: 0,
+  y: 0,
+  type: 'flyMap',
+  option: {
+    ...cloneDeep(settingConfig)
+  },
+  setting: undefined, // 右侧面板自定义配置
+  dataHandler: {}, // 数据自定义处理js脚本
+  ...cloneDeep(dataConfig)
+}