漂浮地图

7f442311 · 韩艳丽 · f262b416 · 7f442311 · 7f442311 · 7f442311
Commit 7f442311 authored Aug 11, 2023 by 韩艳丽
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1180,7 +1180,7 @@ export default {
    chart_pie_rose: 'Rose Pie',
    chart_pie_donut_rose: 'Rose Donut Pie',
    chart_funnel: 'Funnel',
-    chart_sankey:'Sankey',
+    chart_sankey: 'Sankey',
    chart_radar: 'Radar',
    chart_gauge: 'Gauge',
    chart_map: 'Map',
@@ -1533,6 +1533,7 @@ export default {
    no_function: 'Function not enter，please input.',
    chart_flow_map: 'Flow Map',
    chart_city_brightness_map: 'City Brightness Map',
+    chart_float_map: 'Float Map Module',
    start_point: 'Start point(Lat/Long)',
    end_point: 'End point(Lat/Long)',
    line: 'Line',

--- a/src/lang/tw.js
+++ b/src/lang/tw.js
@@ -1178,7 +1178,7 @@ export default {
    chart_pie_rose: '南丁格爾玫瑰圖',
    chart_pie_donut_rose: '南丁格爾玫瑰環形圖',
    chart_funnel: '漏鬥圖',
-    chart_sankey:'桑基圖',
+    chart_sankey: '桑基圖',
    chart_radar: '雷達圖',
    chart_gauge: '儀表盤',
    chart_map: '地圖',
@@ -1526,6 +1526,7 @@ export default {
    no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
    chart_flow_map: '流向地圖',
    chart_city_brightness_map: '城市亮度圖',
+    chart_float_map: '漂浮地圖模塊',
    start_point: '起點經緯度',
    end_point: '終點經緯度',
    line: '線條',

--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1178,7 +1178,7 @@ export default {
    chart_pie_rose: '南丁格尔玫瑰图',
    chart_pie_donut_rose: '南丁格尔玫瑰环形图',
    chart_funnel: '漏斗图',
-    chart_sankey:'桑基图',
+    chart_sankey: '桑基图',
    chart_radar: '雷达图',
    chart_gauge: '仪表盘',
    chart_map: '地图',
@@ -1558,7 +1558,8 @@ export default {
    map_line_color_target_color: '结束颜色',
    map_line_theta_offset: '弧度',
    chart_bubble_map: '气泡地图',
-    chart_city_brightness_map: '城市亮度图'
+    chart_city_brightness_map: '城市亮度图',
+    chart_float_map: '漂浮地图模块'
  },
  dataset: {
    scope_edit: '仅编辑时生效',

--- a/src/views/chart/chart/float/float_antv.js
+++ b/src/views/chart/chart/float/float_antv.js
+import { Scene, PointLayer, PolygonLayer, LineLayer } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { getLanguage } from '@/lang'
+export function baseFloatMapOption(chartDom, chartId, chart, action) {
+  // console.log(chart)
+  const xAxis = JSON.parse(chart.xaxis)
+  // console.log(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,
+        style: mapStyle,
+        // style: 'dark',
+        center: [104.58631, 30.71882], // 成阿中心经纬度
+        zoom: 6.2,
+        maxZoom: 10
+      }),
+      logoVisible: false
+    })
+    init = true
+  } else {
+    if (chartDom.map) {
+      chartDom.setPitch(size.mapPitch)
+      chartDom.setMapStyle(mapStyle)
+    }
+  }
+  // if (xAxis?.length < 3) {
+  //   chartDom.removeAllLayer()
+  //   return chartDom
+  // }
+  const texts = []
+  const newTableRow = chart.data.tableRow.map((item, index) => {
+    const name = item[xAxis[0].dataeaseName]
+    const center = item[xAxis[1].dataeaseName]
+    const [lng, lat] = center
+    texts.push({ name, lng, lat })
+    return {
+      type: 'Feature',
+      geometry: {
+        type: 'MultiPolygon',
+        coordinates: item[xAxis[2].dataeaseName]
+      },
+      properties: {
+        name: item[xAxis[0].dataeaseName],
+        center: item[xAxis[1].dataeaseName]
+      }
+    }
+  })
+  const mapData = { type: 'FeatureCollection', features: newTableRow }
+  const proData = { type: 'FeatureCollection', features: [newTableRow[0]] }
+  console.log(mapData, proData)
+  chartDom.removeAllLayer()
+    .then(() => {
+      const textLayer = new PointLayer({ zIndex: 2 })
+        .source(texts, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat'
+          }
+        })
+        .shape('name', 'text')
+        .size(14)
+        .color('#0ff')
+        .style({
+          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+          spacing: 2, // 字符间距
+          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+          stroke: '#0ff', // 描边颜色
+          strokeWidth: 0.2, // 描边宽度
+          raisingHeight: 200000 + 150000 + 10000,
+          textAllowOverlap: true
+        })
+      const lineDown = new LineLayer()
+        .source(mapData)
+        .shape('line')
+        .color('#0DCCFF')
+        .size(1)
+        .style({
+          raisingHeight: 200000
+        })
+      const lineUp = new LineLayer({ zIndex: 1 })
+        .source(mapData)
+        .shape('line')
+        .color('#0DCCFF')
+        .size(1)
+        .style({
+          raisingHeight: 200000 + 150000
+        })
+      const lineLayer = new LineLayer()
+        .source(proData)
+        .shape('wall')
+        .size(150000)
+        .style({
+          heightfixed: true,
+          opacity: 0.6,
+          sourceColor: '#0DCCFF',
+          targetColor: 'rbga(255,255,255, 0)'
+        })
+      chartDom.addLayer(lineLayer)// 底部地图上的线
+      const provincelayer = new PolygonLayer({})
+        .source(proData)
+        .size(150000)
+        .shape('extrude')// shape 为 extrude 几何图层用于绘制 3D 的几何体
+        .color('#0DCCFF')
+        .active({
+          color: 'rgb(100,230,255)'
+        })
+        .style({
+          heightfixed: true, // heightFixed 设置 3D 填充图的高度时候固定
+          pickLight: true, // pickLight 设置 3D 填充图的拾取高亮色是否计算光照。
+          raisingHeight: 200000,
+          opacity: 0.8
+        })
+      chartDom.addLayer(provincelayer)// 省份
+      provincelayer.on('mousemove', () => {
+        provincelayer.style({
+          raisingHeight: 200000 + 100000
+        })
+        lineDown.style({
+          raisingHeight: 200000 + 100000
+        })
+        lineUp.style({
+          raisingHeight: 200000 + 150000 + 100000
+        })
+        textLayer.style({
+          raisingHeight: 200000 + 150000 + 10000 + 100000
+        })
+      })
+      provincelayer.on('unmousemove', () => {
+        provincelayer.style({
+          raisingHeight: 200000
+        })
+        lineDown.style({
+          raisingHeight: 200000
+        })
+        lineUp.style({
+          raisingHeight: 200000 + 150000
+        })
+        textLayer.style({
+          raisingHeight: 200000 + 150000 + 10000
+        })
+      })
+      if (!init) {
+        chartDom.addLayer(textLayer)// 地图文字
+        chartDom.addLayer(lineDown)// 漂浮块底部
+        chartDom.addLayer(lineUp)// 漂浮块顶部线
+        chartDom.addLayer(lineLayer)
+        chartDom.addLayer(provincelayer)
+      }
+      chartDom.on('loaded', () => {
+        chartDom.addLayer(textLayer)// 地图文字
+        chartDom.addLayer(lineDown)// 漂浮块底部
+        chartDom.addLayer(lineUp)// 漂浮块顶部线
+        chartDom.addLayer(lineLayer)
+        chartDom.addLayer(provincelayer)
+      })
+    })
+  return chartDom
+}
--- a/src/views/chart/chart/util.js
+++ b/src/views/chart/chart/util.js
@@ -2145,6 +2145,47 @@ export const TYPE_CONFIGS = [
      ]
    }
  },
+  // 漂浮地图模块
+  {
+    render: 'antv',
+    category: 'chart.chart_type_space',
+    value: 'float',
+    title: 'chart.chart_float_map',
+    icon: 'bubble_map',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'mapStyle',
+        'value'
+      ],
+      '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',

--- a/src/views/chart/components/ChartComponentG2.vue
+++ b/src/views/chart/components/ChartComponentG2.vue
@@ -65,8 +65,9 @@ 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 { baseFloatMapOption } from '@/views/chart/chart/float/float_antv'
 import { clear } from 'size-sensor'
-import {baseSankeyOptionAntV} from "@/views/chart/chart/sankey/sankey_antv";
+import { baseSankeyOptionAntV } from '@/views/chart/chart/sankey/sankey_antv'
 export default {
  name: 'ChartComponentG2',
  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -312,18 +313,20 @@ export default {
        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 (chart.type === 'chart_sankey') {
+      } else if (chart.type === 'chart_sankey') {
        this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-       } else if (chart.type === 'threeDColumn') {
+      } else if (chart.type === 'threeDColumn') {
        this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-       } else {
+      } else if (chart.type === 'float') {
+        this.myChart = baseFloatMapOption(this.myChart, this.chartId, chart, this.antVAction)
+      } else {
        if (this.myChart) {
          this.antVRenderStatus = false
          this.myChart.destroy()
        }
      }
-      if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness') && this.searchCount > 0) {
+      if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness', 'float') && this.searchCount > 0) {
        this.myChart.options.animation = false
      }
      if (this.myChart?.options?.legend) {