合并分支 'feature/branch_wm' 到 'develop'

城市亮度图初始mock

查看合并请求 !11

src/icons/svg/city-brightness.svg

+<svg t="1689841433435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5685" width="200" height="200"><path d="M290.773333 213.333333v85.333334H426.666667v512H149.333333V213.333333h141.44m42.666667-42.666666H106.666667v682.666666h362.666666V256h-135.893333V170.666667z" p-id="5686"></path><path d="M661.333333 384v426.666667h-192V384h192m42.666667-42.666667H426.666667v512h277.333333V341.333333z" p-id="5687"></path><path d="M768 298.666667v128h106.666667v384h-170.666667V298.666667h64m42.666667-42.666667h-149.333334v597.333333h256V384h-106.666666v-128z" p-id="5688"></path><path d="M85.333333 810.666667h853.333334v42.666666H85.333333zM234.666667 384h106.666666v42.666667h-106.666666zM234.666667 533.333333h106.666666v42.666667h-106.666666zM234.666667 682.666667h106.666666v42.666666h-106.666666zM533.333333 512h64v42.666667h-64zM533.333333 640h64v42.666667h-64zM768 533.333333h42.666667v42.666667h-42.666667zM768 661.333333h42.666667v42.666667h-42.666667z" p-id="5689"></path></svg>

src/lang/en.js

@@ -1529,6 +1529,7 @@ export default {
     step: 'Step(px)',
     no_function: 'Function not enter，please input.',
     chart_flow_map: 'Flow Map',
+    chart_city_brightness_map: 'City Brightness Map',
     start_point: 'Start point(Lat/Long)',
     end_point: 'End point(Lat/Long)',
     line: 'Line',

src/lang/tw.js

@@ -1523,6 +1523,7 @@ export default {
     step: '步長(px)',
     no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
     chart_flow_map: '流向地圖',
+    chart_city_brightness_map: '城市亮度圖',
     start_point: '起點經緯度',
     end_point: '終點經緯度',
     line: '線條',

src/lang/zh.js

@@ -1554,7 +1554,8 @@ export default {
     map_line_color_source_color: '起始颜色',
     map_line_color_target_color: '结束颜色',
     map_line_theta_offset: '弧度',
-    chart_bubble_map: '气泡地图'
+    chart_bubble_map: '气泡地图',
+    chart_city_brightness_map: '城市亮度图'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

src/views/chart/chart/cityBrightness/cityBrightness_antv.js

+import { Scene, PointLayer } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { getLanguage } from '@/lang'
+
+export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action) {
+  console.log('chart==chart.data.tableRow==', chart, chart.data.tableRow)
+  const xAxis = JSON.parse(chart.xaxis)
+  const yAxis = JSON.parse(chart.yaxis)
+  let customAttr
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+  }
+  const size = customAttr.size
+  const color = customAttr.color
+  const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
+  const lang = getLanguage().includes('zh') ? 'zh' : 'en'
+  let init = false
+  if (!chartDom?.map) {
+    try {
+      chartDom.destroy()
+    } catch (e) {
+      //   ignore
+    }
+    chartDom = new Scene({
+      id: chartId,
+      map: new GaodeMap({
+        lang: lang,
+        pitch: size.mapPitch,
+        // pitch: 64.88, // 地图倾角
+        style: mapStyle,
+        // style: 'dark',
+        center: [114.060288, 22.53684], // 地图中心经纬度
+        zoom: 15.63,
+        maxZoom: 20
+      }),
+      logoVisible: false
+    })
+    init = true
+  } else {
+    if (chartDom.map) {
+      chartDom.setPitch(size.mapPitch)
+      chartDom.setMapStyle(mapStyle)
+    }
+  }
+  if (xAxis?.length < 1 || yAxis?.lang < 1) {
+    chartDom.removeAllLayer()
+    return chartDom
+  }
+  // const newTableRow = chart.data.tableRow.map((item, index) => {
+  //   return {
+  //     type: 'Feature',
+  //     properties: {
+  //       capacity: item[yAxis[0].dataeaseName]
+  //     },
+  //     geometry: {
+  //       type: 'Point',
+  //       coordinates: provinceLocation[index]
+  //     },
+  //     bbox: [provinceLocation[index][0], provinceLocation[index][1], provinceLocation[index][0], provinceLocation[index][1]]
+  //   }
+  // })
+  // const mapData = { type: 'FeatureCollection', features: newTableRow }
+  const mapData = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {
+    h0: '3',
+    h1: '2',
+    h2: '1',
+    h3: '0',
+    h4: '0',
+    h5: '0',
+    h6: '0',
+    h7: '3',
+    h8: '4',
+    h9: '5',
+    h10: '6',
+    h11: '5',
+    h12: '6',
+    h13: '4',
+    h14: '4',
+    h15: '5',
+    h16: '4',
+    h17: '5',
+    h18: '4',
+    h19: '4',
+    h20: '5',
+    h21: '4',
+    h22: '6',
+    h23: '6'
+  }, geometry: {
+    type: 'Point',
+    coordinates: [113.950375, 22.534875]
+  }, bbox: [113.950375, 22.534875, 113.950375, 22.534875] }] }
+
+  chartDom.removeAllLayer()
+    .then(() => {
+      const pointLayer = new PointLayer({})
+        .source(mapData)
+        // .source(chart.data.tableRow, {
+        //   parser: {
+        //     type: 'json',
+        //     x: xAxis[0].dataeaseName,
+        //     y: xAxis[1].dataeaseName
+        //   }
+        // })
+        .size(2)
+        .color('h8', [
+          '#0A3663',
+          '#1558AC',
+          '#3771D9',
+          '#4D89E5',
+          '#64A5D3',
+          '#72BED6',
+          '#83CED6',
+          '#A6E1E0',
+          '#B8EFE2',
+          '#D7F9F0'
+        ])
+      if (!init) {
+        chartDom.addLayer(pointLayer)
+      }
+      chartDom.on('loaded', () => {
+        chartDom.addLayer(pointLayer)
+      })
+    })
+  return chartDom
+}

src/views/chart/chart/util.js

@@ -1992,6 +1992,50 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  // 城市亮度图
+  {
+    render: 'antv',
+    category: 'chart.chart_type_space',
+    value: 'city-brightness',
+    title: 'chart.chart_city_brightness_map',
+    icon: 'city-brightness',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'alpha',
+        'mapStyle',
+        'mapLineGradient',
+        'mapLineSourceColor',
+        'mapLineTargetColor'
+      ],
+      'size-selector-ant-v': [
+        'mapPitch',
+        'mapLineType',
+        'mapLineWidth',
+        'mapLineAnimate',
+        'mapLineAnimateDuration',
+        'mapLineAnimateInterval',
+        'mapLineAnimateTrailLength'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ]
+    }
+  },
   /* 下面是echarts图表类型 */
   {
     render: 'echarts',

src/views/chart/components/ChartComponentG2.vue

@@ -63,6 +63,7 @@ import { equalsAny } from '@/utils/StringUtils'
 import { mapState } from 'vuex'
 import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
 import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
+import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
 import { clear } from 'size-sensor'
 export default {
   name: 'ChartComponentG2',
@@ -307,6 +308,8 @@ export default {
         this.myChart = baseHeatMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'bubble') {
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'city-brightness') {
+        this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
@@ -314,7 +317,7 @@ export default {
         }
       }
 
-      if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble') && this.searchCount > 0) {
+      if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness') && this.searchCount > 0) {
         this.myChart.options.animation = false
       }
       if (this.myChart?.options?.legend) {
@@ -447,6 +450,10 @@ export default {
           this.title_class.zIndex = 4
           this.title_class.position = 'absolute'
         }
+        if (this.chart.type === 'city-brightness') {
+          this.title_class.zIndex = 4
+          this.title_class.position = 'absolute'
+        }
       }
       this.initRemark()
     },