fix: 地图组件优化打点、视觉映射模式的配置方式和显示效果；修改默认地图信息的获取接口

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

@@ -117,7 +117,7 @@ export default {
       let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
       // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
       if (!hasMapId) {
-        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/worldMap/world.json`
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/worldMap/world`
       }
       this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => {
         if (this.config.option.data) {

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

@@ -155,7 +155,7 @@ export default {
             },
             // 鼠标放上去高亮的样式
             emphasis: {
-              areaColor: '#389BB7',
+              areaColor: config.customize.emphasisColor ? config.customize.emphasisColor :'#389BB7',
               borderWidth: 0
             }
           }
@@ -179,51 +179,30 @@ export default {
           },
           showDelay: 100
         },
+        // 视觉映射
+        visualMap: {
+          show: !config.customize.scatter,
+          calculable: config.customize.visual,
+          min: config.customize.range[0],
+          max: config.customize.range[1],
+          seriesIndex: [0],
+          inRange: {
+            color: config.customize.rangeColor
+          }
+        },
         series: config.customize.scatter
           ? [
-            // {
-            //   type: 'effectScatter',
-            //   coordinateSystem: 'geo',
-            //   effectType: 'ripple',
-            //   showEffectOn: 'render',
-            //   rippleEffect: {
-            //     period: 10,
-            //     scale: 10,
-            //     brushType: 'fill'
-            //   },
-
-            //   hoverAnimation: true,
-            //   itemStyle: {
-            //     normal: {
-            //       color: 'rgba(255, 235, 59, .7)',
-            //       shadowBlur: 10,
-            //       shadowColor: '#333'
-            //     }
-            //   },
-            //   tooltip: {
-            //     formatter(params) {
-            //       return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
-            //         params.name
-            //       }</p>
-            //   <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
-            //     params.data?.value[2] || '--'
-            //   }</span></div>`
-            //     },
-            //     show: true
-            //   },
-            //   zlevel: 1,
-            //   data: [
-            //     { name: '西藏自治区', value: [91.23, 29.5, 1] },
-            //     { name: '黑龙江省', value: [128.03, 47.01, 1007] },
-            //     { name: '北京市', value: [116.4551, 40.2539, 5007] }
-            //   ]
-            // }
             {
               type: 'scatter',
+              // 坐标系类型
               coordinateSystem: 'geo',
-              symbol: 'pin',
+              // 标记符号形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+              symbol: config.customize.scatterSymbol ? config.customize.scatterSymbol : 'pin',
+              // 是否允许图例和散点图之间的联动效果
               legendHoverLink: true,
-              symbolSize: [60, 60],
+              // 散点图标记符号的大小，[宽度,高度]
+              symbolSize: config.customize.scatterSize ? [config.customize.scatterSize, config.customize.scatterSize] : [40, 40],
+              // 触发特效的方式
               showEffectOn: 'render',
               rippleEffect: {
                 brushType: 'stroke'
@@ -232,7 +211,7 @@ export default {
               zlevel: 11,
               // 这里渲染标志里的内容以及样式
               label: {
-                show: true,
+                show: config.customize.hasOwnProperty('showScatterValue') ? config.customize.showScatterValue : true,
                 formatter(value) {
                   return value.data.value[2]
                 },
@@ -264,7 +243,7 @@ export default {
                   return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
                     params.name
                   }</p>
-                <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
+                <div style="line-height:22px;margin-top:5px">${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}<span style="margin-left:12px;color:#fff;float:right">${
                     params.data?.value[2] || '--'
                   }</span></div>`
                 },
@@ -273,23 +252,12 @@ export default {
             }
           ]
       }
-      if (config.customize.visual) {
-        this.option.visualMap = {
-          show: true,
-          min: config.customize.range[0],
-          max: config.customize.range[1],
-          seriesIndex: [0],
-          inRange: {
-            color: config.customize.rangeColor
-          }
-        }
-      }
       let hasMapId = !!config.customize.mapId
       // 根据mapId获取地图数据
       let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
       // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
       if (!hasMapId) {
-        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/chinaMap/country/中华人民共和国.json`
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/chinaMap.country/中华人民共和国`
       }
       const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
       const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp

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

@@ -191,27 +191,46 @@
           />
         </el-form-item>
         <el-form-item
-          label="地图分割块颜色"
+          label="地图高亮颜色"
           label-width="100px"
         >
           <ColorPicker
-            v-model="config.customize.areaColor"
+            v-model="config.customize.emphasisColor"
             :predefine-colors="predefineThemeColors"
           />
         </el-form-item>
         <el-form-item
-          label="是否打点"
+          label="值渲染模式"
           label-width="100px"
         >
-          <el-switch
+          <el-radio-group
             v-model="config.customize.scatter"
-            class="bs-el-switch"
-            active-color="#007aff"
+            class="bs-el-radio-group"
+          >
+            <el-radio :label="true">
+              打点
+            </el-radio>
+            <el-radio :label="false">
+              色块
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <SettingTitle v-if="config.customize.scatter" >打点模式</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="地图分割块颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.areaColor"
+            :predefine-colors="predefineThemeColors"
           />
         </el-form-item>
         <el-form-item
           v-if="config.customize.scatter"
-          label="打点图背景色"
+          label="点颜色"
           label-width="100px"
         >
           <ColorPicker
@@ -221,7 +240,37 @@
         </el-form-item>
         <el-form-item
           v-if="config.customize.scatter"
-          label="打点图文字颜色"
+          label="点形状"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.scatterSymbol"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            @change="changeLevel()"
+          >
+            <el-option
+              v-for="symbol in symbolList"
+              :key="symbol.value"
+              :label="symbol.label"
+              :value="symbol.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="显示点文字"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.showScatterValue"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点文字颜色"
           label-width="100px"
         >
           <ColorPicker
@@ -229,6 +278,22 @@
             :predefine-colors="predefineThemeColors"
           />
         </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点尺寸"
+          label-width="100px"
+        >
+          <el-slider
+            v-model="config.customize.scatterSize"
+            class="bs-el-slider-dark"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+      </div>
+      <SettingTitle v-if="!config.customize.scatter">色块模式</SettingTitle>
+      <div class="lc-field-body">
         <el-form-item
           v-if="!config.customize.scatter"
           label="悬浮框背景色"
@@ -250,7 +315,19 @@
           />
         </el-form-item>
         <el-form-item
-          label="是否开启筛选"
+          v-if="!config.customize.scatter"
+          label="悬浮框数值标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.tooltipTitle"
+            placeholder="请输入数值标题"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="启用手动筛选"
           label-width="100px"
         >
           <el-switch
@@ -260,8 +337,8 @@
           />
         </el-form-item>
         <el-form-item
-          v-if="config.customize.visual"
-          label="数值范围"
+          v-if="!config.customize.scatter"
+          label="色块数值范围"
           label-width="100px"
         >
           <el-input-number
@@ -279,8 +356,8 @@
           />
         </el-form-item>
         <el-form-item
-          v-if="config.customize.visual"
-          label="配色方案"
+          v-if="!config.customize.scatter"
+          label="色块配色方案"
           label-width="100px"
         >
           <color-select
@@ -354,6 +431,15 @@ export default {
         {value: '3', label: '城市'},
         {value: '4', label: '区县'}
       ],
+      symbolList: [
+        {value: 'circle', label: '圆形'},
+        {value: 'rect', label: '矩形'},
+        {value: 'roundRect', label: '圆角矩形'},
+        {value: 'triangle', label: '三角形'},
+        {value: 'diamond', label: '菱形'},
+        {value: 'pin', label: '水滴'},
+        {value: 'arrow', label: '箭头'}
+      ],
       // 旧版本地图等级，该数据用于兼容旧版本
       oldLevelMap: {
         'world' : '0',

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

@@ -66,10 +66,18 @@ const customConfig = {
     tooltipBackgroundColor: '#0C121C',
     // 悬浮框边框色
     borderColor: 'rgba(0, 0, 0, 0.16)',
-    // 打点图背景颜色
+    // 悬浮框数值标题
+    tooltipTitle: 'GDP',
+    // 点颜色
     scatterBackgroundColor: 'rgba(255,0,0,.7)',
-    // 打点图文字颜色
+    // 显示点文字
+    showScatterValue: true,
+    // 点文字颜色
     scatterColor: '#fff',
+    // 点形状
+    scatterSymbol: 'circle',
+    // 点大小
+    scatterSize: 40,
     // 分割线颜色
     mapLineColor: 'rgba(53, 86, 165, 1)',
     fontGraphicColor: '#fff',
@@ -79,11 +87,13 @@ const customConfig = {
     // 允许下钻的层级
     downLevel: 1,
     // 地图级别
-    level: 1,
+    level: 2,
     // 范围
     scope: '中国',
     // 地图区域颜色
     areaColor: 'rgba(31, 50, 121, 1)',
+    // 地图区域悬浮颜色
+    emphasisColor: '#389BB7',
     // 是否开启筛选
     visual: false,
     // 筛选范围

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -353,7 +353,7 @@
           </template>
           <div class="lc-field-body">
             <el-form-item
-              label="展示字段"
+              label="值"
               class="data-form-item"
             >
               <el-select
@@ -384,6 +384,19 @@
               label="地名字段"
               class="data-form-item"
             >
+              <template slot="label">
+                <span>
+                  地名字段
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="色块模式下可用，地图将根据该属性值寻找对应的区域，并按照值字段进行色块渲染"
+                    placement="top"
+                  >
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
               <el-select
                 v-model="config.customize.name"
                 class="bs-el-select"
@@ -409,9 +422,22 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              label="x坐标"
+              label="经度字段"
               class="data-form-item"
             >
+              <template slot="label">
+                <span>
+                  经度字段
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
+                    placement="top"
+                  >
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
               <el-select
                 v-model="config.customize.xaxis"
                 class="bs-el-select"
@@ -437,9 +463,22 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              label="y坐标"
+              label="纬度字段"
               class="data-form-item"
             >
+              <template slot="label">
+                <span>
+                  纬度字段
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
+                    placement="top"
+                  >
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
               <el-select
                 v-model="config.customize.yaxis"
                 class="bs-el-select"