三维地图的创建和三维地图的模型上传，保存和删除功能

core/core-frontend/config/dev.ts

@@ -2,13 +2,13 @@ export default {
   server: {
     proxy: {
       '/api/f': {
-        target: 'http://192.168.1.58:8100',
+        target: 'http://192.168.1.20:8100',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api\/f/, 'de2api')
       },
       // 使用 proxy 实例
       '/api': {
-        target: 'http://192.168.1.58:8100',
+        target: 'http://192.168.1.20:8100',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, 'de2api')
       }

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -386,7 +386,8 @@ const boardMoveActive = computed(() => {
     'symbolic-map',
     'heat-map',
     't-heatmap',
-    'circle-packing'
+    'circle-packing',
+    'three-map'
   ]
   return element.value.isPlugin || CHARTS.includes(element.value.innerType)
 })

core/core-frontend/src/components/three-display/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <div v-loading="loading">
+    <div class="all_conter">
+      <el-button type="primary" @click="importclick()" style="width: 200px;">导入三维模型</el-button>
+      <input type="file" id="avatar" style="display:none" @change="changeFiless">
+    </div>
+    <el-scrollbar height="59vh">
+      <div class="model-container">
+        <div v-for="(model, index) in modelAll" :key="index" class="model-wrapper">
+          <div class="positionbutton" @click="deleteModel(index)">删除</div>
+          <div :ref="(el) => setCanvasRef(el, index)" class="model-canvas"></div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { uploadFileResult } from '@/api/staticResource'
+//保存 1.拿数据
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { storeToRefs } from 'pinia'
+import { imgUrlTrans } from '@/utils/imgUtils'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+const snapshotStore = snapshotStoreWithOut()
+// 模型路径
+let threeModel: any = ref([])
+let modelAll: any = ref([])
+// 用于保存每个模型容器的引用
+const canvasRefs = ref([])
+
+// 存储每个模型对应的 renderer / controls / scene 等实例
+const scenes = []
+const cameras = []
+const renderers = []
+const controlsList = []
+let loading = ref(true)
+// 设置 canvas 引用
+const setCanvasRef = (el, index) => {
+  if (el) {
+    canvasRefs.value[index] = el
+  }
+}
+
+// 初始化场景
+const initScene = (container, modelPath, index) => {
+  const scene = new THREE.Scene()
+  scenes.push(scene)
+
+  const camera = new THREE.PerspectiveCamera(20, 198 / 148, 0.1, 1000)
+  cameras.push(camera)
+
+  const canvas = document.createElement('canvas')
+  container.appendChild(canvas)
+
+  const renderer = new THREE.WebGLRenderer({ canvas })
+  renderer.setSize(198, 148)
+  renderer.setPixelRatio(Math.min(1.5, window.devicePixelRatio)) // 降低像素比
+  renderers.push(renderer)
+
+  // 添加光源
+  const ambientLight = new THREE.AmbientLight(0xffffff, 5)
+  scene.add(ambientLight)
+
+  // 创建相机初始位置
+  camera.position.z = 5
+
+  // 创建控制器
+  const controls = new OrbitControls(camera, canvas)
+  controls.dampingFactor = 0.05
+  controls.enableDamping = true
+  controls.update()
+
+  controls.addEventListener('change', () => {
+    if (!renderers[index].autoClear) {
+      renderers[index].clear()
+    }
+    renderers[index].render(scene, camera)
+  })
+
+  controlsList.push(controls)
+
+  // 加载模型
+  const dracoLoader = new DRACOLoader()
+  dracoLoader.setDecoderPath('./static/js/')
+  dracoLoader.setDecoderConfig({ type: 'js' })
+
+  const loader = new GLTFLoader()
+  loader.setDRACOLoader(dracoLoader)
+
+  loader.load(modelPath, (gltf) => {
+    const model = gltf.scene
+    scene.add(model)
+
+    // 计算模型包围盒的中心
+    const box = new THREE.Box3().setFromObject(model)
+    const center = box.getCenter(new THREE.Vector3())
+
+    // 将模型中心设为本地坐标系原点
+    model.position.sub(center)
+
+    // 设置 OrbitControls 的目标为中心点
+    controls.target.copy(center)
+    controls.update()
+
+    // 初始渲染一次
+    renderer.render(scene, camera)
+  }, undefined, (error) => {
+    console.error('Error loading model:', error)
+  })
+}
+//上传文件
+function importclick() {
+  const avatar = document.getElementById('avatar');
+  avatar?.click();
+}
+function changeFiless(e: any) {
+  loading.value = true
+  const files = new FormData()
+  files.append('file', e.target.files[0])
+  uploadFileResult(e.target.files[0], fileUrl => {
+    threeModel.value.push({ path: fileUrl })
+    modelAll.value = getmodelurl(threeModel.value)
+    curComponent.value.threeModel = threeModel.value
+    snapshotStore.recordSnapshotCacheToMobile('threeModel')
+    batchOptChange('threeModel')
+    nextTick(() => {
+      // 手动重新渲染新添加的模型
+      const newIndex = modelAll.value.length - 1
+      const container = canvasRefs.value[newIndex]
+      if (container) {
+        initScene(container, modelAll.value[newIndex].path, newIndex)
+        loading.value = false
+      }
+    })
+    var file: any = document.getElementById('avatar');
+    file.value = '';
+  })
+}
+function getmodelurl(modelPath: any) {
+  let urlArr = JSON.parse(JSON.stringify(modelPath))
+  urlArr.map((item: any) => {
+    item.path = imgUrlTrans(item.path)
+  })
+  return urlArr
+}
+const batchOptChange = (custom, property, value, subProp?) => {
+  dvMainStore.setChangeProperties({
+    custom: custom,
+    property: property,
+    value: value,
+    subProp: subProp
+  })
+  snapshotStore.recordSnapshotCache('renderChart')
+}
+const deleteModel = (index: number) => {
+  ElMessageBox.confirm(
+    '确定要删除该三维模型吗？',
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      // 清理 THREE 渲染资源
+      const scene = scenes[index]
+      const renderer = renderers[index]
+      const control = controlsList[index]
+
+      scene.clear()
+      renderer.dispose()
+      control.dispose()
+
+      // 删除数组中的对应项
+      scenes.splice(index, 1)
+      cameras.splice(index, 1)
+      renderers.splice(index, 1)
+      controlsList.splice(index, 1)
+
+      // 删除数据源中的模型
+      threeModel.value.splice(index, 1)
+      modelAll.value.splice(index, 1)
+
+      // 同步保存到 Pinia store
+      curComponent.value.threeModel = threeModel.value
+      snapshotStore.recordSnapshotCacheToMobile('threeModel')
+      batchOptChange('threeModel')
+    })
+
+}
+// 监听 threeModel 的变化
+
+onMounted(() => {
+  threeModel.value = curComponent.value.threeModel ? curComponent.value.threeModel : []
+  modelAll.value = getmodelurl(threeModel.value)
+  nextTick(() => {
+    canvasRefs.value.forEach((container, index) => {
+      if (container) {
+        initScene(container, modelAll.value[index].path, index)
+      }
+    })
+    loading.value = false
+  })
+
+})
+
+onBeforeUnmount(() => {
+  scenes.forEach(scene => {
+    scene.clear()
+  })
+  renderers.forEach(renderer => {
+    renderer.dispose()
+  })
+  controlsList.forEach(control => control.dispose())
+
+  scenes.length = 0
+  cameras.length = 0
+  renderers.length = 0
+  controlsList.length = 0
+})
+</script>
+
+<style lang="less" scoped>
+.model-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.model-wrapper {
+  width: 200px;
+  height: 150px;
+  background-color: #00000050;
+  margin: auto;
+  cursor: pointer;
+  will-change: transform; // 提升合成层
+  border: 1px solid #ffffff00;
+  border-radius: 5px;
+  overflow: hidden;
+  position: relative;
+
+  .positionbutton {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+  }
+
+  .positionbutton:hover {
+    color: #1989fa;
+  }
+}
+
+.model-wrapper:hover {
+  border: 1px solid #1989fa;
+}
+
+.all_conter {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+</style>

core/core-frontend/src/components/visualization/SettingMenu.vue

@@ -176,7 +176,8 @@ const state = reactive({
     'word-cloud',
     'flow-map',
     'bidirectional-bar',
-    'symbolic-map'
+    'symbolic-map',
+    'three-map'
   ],
   linkageExcludeViewType: [
     'richTextView',
@@ -187,7 +188,8 @@ const state = reactive({
     'word-cloud',
     'flow-map',
     'bidirectional-bar',
-    'symbolic-map'
+    'symbolic-map',
+    'three-map'
   ],
   copyData: null,
   hyperlinksSetVisible: false,

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -422,7 +422,7 @@ const openMessageLoading = cb => {
   })
 }
 // 地图
-const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map','three-map']
 const htmlToImage = () => {
   downLoading.value = mapChartTypes.includes(viewInfo.value.type) ? false : true
   useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)

core/core-frontend/src/components/visualization/ViewTrackBar.vue

@@ -1,26 +1,12 @@
 <template>
   <div>
-    <el-dropdown
+    <el-dropdown :id="'view-track-bar-' + chartId" :teleported="false" trigger="click" @visible-change="visibleChange">
-      :id="'view-track-bar-' + chartId"
-      :teleported="false"
-      trigger="click"
-      @visible-change="visibleChange"
-    >
       <input id="input" ref="trackButton" type="button" hidden />
       <template #dropdown>
         <div :class="{ 'data-mobile': isDataVMobile }">
-          <el-dropdown-menu
+          <el-dropdown-menu class="track-menu" :style="{ 'font-family': fontFamily }" :append-to-body="false">
-            class="track-menu"
+            <el-dropdown-item v-for="(item, key) in trackMenu" :key="key" @mousedown.stop
-            :style="{ 'font-family': fontFamily }"
+              @click="trackMenuClick(item)"><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item>
-            :append-to-body="false"
-          >
-            <el-dropdown-item
-              v-for="(item, key) in trackMenu"
-              :key="key"
-              @mousedown.stop
-              @click="trackMenuClick(item)"
-              ><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item
-            >
           </el-dropdown-menu>
         </div>
       </template>

core/core-frontend/src/locales/en.ts

@@ -2003,6 +2003,7 @@ export default {
     export_raw_details: 'Raw Details',
     field_is_empty_export_error: 'No fields available, unable to export',
     chart_symbolic_map: 'Symbolic map',
+    three_map: 'Three map',
     symbolic: 'Symbolic',
     symbolic_shape: 'Symbolic Shape',
     symbolic_upload_hint: 'Supports SVG, JPG, JPEG, PNG files within 1MB',

core/core-frontend/src/locales/tw.ts

@@ -1950,6 +1950,7 @@ export default {
     export_raw_details: '導出原始明細',
     field_is_empty_export_error: '目前無欄位，無法匯出',
     chart_symbolic_map: '符號地圖',
+    three_map: '三維地圖',
     symbolic: '符號',
     symbolic_shape: '符號形狀',
     symbolic_upload_hint: '支持 1MB 以內的 SVG, JPG, JPEG, PNG 文件',

core/core-frontend/src/locales/zh-CN.ts

@@ -1956,6 +1956,7 @@ export default {
     field_is_empty_export_error: '当前无字段，无法导出',
     chart_symbolic_map: '符号地图',
     symbolic: '符号',
+    three_map: '三维地图',
     symbolic_shape: '符号形状',
     symbolic_upload_hint: '支持 1MB 以内的 SVG, JPG, JPEG, PNG 文件',
     symbolic_range: '区间',

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -9,6 +9,7 @@ import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import threeDisplay from '@/components/three-display/index.vue'
 import {
   PropType,
   reactive,
@@ -321,6 +322,8 @@ const chartStyleShow = computed(() => {
 })
 
 const chartViewInstance = computed(() => {
+  // console.log(chartViewManager.getChartView(view.value.render, view.value.type))
+  // debugger
   return chartViewManager.getChartView(view.value.render, view.value.type)
 })
 const showAxis = (axis: AxisType) => chartViewInstance.value?.axis?.includes(axis)
@@ -3131,9 +3134,9 @@ const deleteChartFieldItem = id => {
                         </el-row>
 
                         <!--filter-->
-                        <el-row class="padding-lr drag-data no-top-border no-top-padding">
+                        <el-row v-if="view.type != 'three-map'"  class="padding-lr drag-data no-top-border no-top-padding">
                           <div class="form-draggable-title">
-                            <span>
+                            <span >
                               {{ t('chart.result_filter') }}
                             </span>
                             <el-tooltip
@@ -3180,7 +3183,9 @@ const deleteChartFieldItem = id => {
                             <span>{{ $t('chart.filter') }}</span>
                           </el-button>
                         </el-row>
-
+                        <div v-if="view.type == 'three-map'">
+                          <threeDisplay  :view="view" />
+                        </div>
                         <el-row v-if="showAggregate" class="refresh-area">
                           <el-form-item
                             class="form-item no-margin-bottom"
@@ -3306,7 +3311,7 @@ const deleteChartFieldItem = id => {
                       </el-row>
                     </el-footer>
                   </el-container>
-                </el-tab-pane>
+                </el-tab-pane>         
 
                 <el-tab-pane
                   name="style"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1536,6 +1536,13 @@ export const CHART_TYPE_CONFIGS = [
         value: 'symbolic-map',
         title: t('chart.chart_symbolic_map'),
         icon: 'symbolic-map'
+      },
+      {
+        render: 'antv',
+        category: 'map',
+        value: 'three-map',
+        title:  t('chart.three_map'),
+        icon: 'three-map'
       }
     ]
   },

core/core-frontend/src/views/chart/components/js/panel/charts/map/three-map.ts

@@ -0,0 +1,145 @@
+import {
+  L7ChartView,
+  L7Config,
+  L7DrawConfig,
+  L7Wrapper
+} from '@/views/chart/components/js/panel/types/impl/l7'
+import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common'
+import {
+  parseJson,
+} from '@/views/chart/components/js/util'
+import { deepCopy } from '@/utils/utils'
+import { Scene } from '@antv/l7-scene'
+import {
+  getMapCenter,
+  getMapScene,
+  getMapStyle,
+  mapRendered
+} from '@/views/chart/components/js/panel/common/common_antv'
+import { HeatmapLayer } from '@antv/l7-layers'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
+/**
+ * 符号地图
+ */
+export class ThreeMap extends L7ChartView<Scene, L7Config> {
+  properties: EditorProperty[] = [
+    'background-overall-component',
+    'border-style',
+    'basic-style-selector',
+    'title-selector',
+    'label-selector',
+    'tooltip-selector',
+    'threshold'
+  ]
+  propertyInner: EditorPropertyInner = {
+    ...MAP_EDITOR_PROPERTY_INNER,
+    'basic-style-selector': [
+      'colors',
+      'alpha',
+      'mapBaseStyle',
+      'zoom',
+      'showLabel',
+      'autoFit',
+      'mapCenter',
+      'zoomLevel'
+    ],
+
+    'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
+    'tooltip-selector': [
+      'color',
+      'fontSize',
+      'showFields',
+      'customContent',
+      'show',
+      'backgroundColor',
+      'carousel'
+    ],
+    threshold: ['lineThreshold']
+  }
+  axis: AxisType[] = ['extLabel', 'extTooltip']
+
+  constructor() {
+    super('three-map', [])
+  }
+
+  async drawChart(drawOption: L7DrawConfig<L7Config>) {
+    // console.log('111111111')
+    // debugger 
+    const { chart, container, action } = drawOption
+    const containerDom = document.getElementById(container)
+    const rect = containerDom?.getBoundingClientRect()
+    // 修改后
+    if (rect?.height <= 0) {
+      // 容器不可见时，监听尺寸变化并重试绘制
+      const observer = new ResizeObserver(() => {
+        observer.disconnect()
+        this.drawChart(drawOption) // 重新绘制
+      })
+      observer.observe(containerDom)
+      return new L7Wrapper(drawOption.chartObj?.getScene(), [])
+    }
+    const xAxis = deepCopy(chart.xAxis)
+    let basicStyle
+    let miscStyle
+    if (chart.customAttr) {
+      basicStyle = parseJson(chart.customAttr).basicStyle
+      miscStyle = parseJson(chart.customAttr).misc
+    }
+
+    const mapKey = await this.getMapKey()
+    const mapStyle = getMapStyle(mapKey, basicStyle)
+
+    let center = getMapCenter(basicStyle)
+    // 联动时，聚焦到数据点，多个取第一个
+    if (
+      chart.chartExtRequest?.linkageFilters?.length &&
+      xAxis?.length === 2 &&
+      chart.data?.tableRow.length
+    ) {
+      // 经度
+      const lng = chart.data?.tableRow?.[0][chart.xAxis[0].gisbiName]
+      // 纬度
+      const lat = chart.data?.tableRow?.[0][chart.xAxis[1].gisbiName]
+      center = [lng, lat]
+    }
+    const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
+    let scene = chartObj?.getScene()
+    scene = await getMapScene(
+      chart,
+      scene,
+      container,
+      mapKey,
+      basicStyle,
+      miscStyle,
+      mapStyle,
+      center
+    )
+    this.configZoomButton(chart, scene, mapKey)
+    const config: L7Config = new HeatmapLayer({
+          name: 'line',
+          blend: 'normal',
+          autoFit: !(basicStyle.autoFit === false)
+        })
+          .source(chart.data?.data, {
+            parser: {
+              type: 'json',
+              x: 'x',
+              y: 'y'
+            }
+          })
+          .size('value', [0, 1.0]) // weight映射通道
+          .shape(basicStyle.heatMapType ?? DEFAULT_BASIC_STYLE.heatMapType)
+    
+        config.style({
+          intensity: basicStyle.heatMapIntensity ?? DEFAULT_BASIC_STYLE.heatMapIntensity,
+          radius: basicStyle.heatMapRadius ?? DEFAULT_BASIC_STYLE.heatMapRadius,
+          rampColors: {
+            colors: basicStyle.colors.reverse(),
+            positions: [0, 0.11, 0.22, 0.33, 0.44, 0.55, 0.66, 0.77, 0.88, 1.0]
+          }
+        })
+    // const configList: L7Config[] = []
+    scene.render()
+    return new L7Wrapper(scene, config)
+  }
+}

core/core-frontend/src/views/chart/components/js/util.ts

@@ -241,7 +241,7 @@ export function getRemark(chart) {
 
 export const quotaViews = ['label', 'richTextView', 'indicator', 'gauge', 'liquid']
 // 地图
-const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map','three-map']
 // 分布图
 const distributionChartTypes = [
   'pie',

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -28,15 +28,7 @@ import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { L7ChartView } from '@/views/chart/components/js/panel/types/impl/l7'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ExportImage, Scale, Fullscreen, Control, Scene, TileLayer } from '@antv/l7'
+import { ExportImage, Scale, Fullscreen, Control} from '@antv/l7'
-import { GaodeMap } from '@antv/l7-maps';
-//三维导入
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 控制器
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-
-
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack, inMobile } =
@@ -241,7 +233,7 @@ const calcData = async (view, callback) => {
         callback?.()
       })
   } else {
-    if (['bubble-map', 'map', 'flow-map', 'heat-map'].includes(view.type)) {
+    if (['bubble-map', 'map', 'flow-map', 'heat-map','three-map'].includes(view.type)) {
       await renderChart(view, callback)
     }
     callback?.()
@@ -249,6 +241,7 @@ const calcData = async (view, callback) => {
 }
 let curView
 const renderChart = async (view, callback?) => {
+  console.log('renderChart',view.type, callback)
   if (!view) {
     return
   }
@@ -263,6 +256,8 @@ const renderChart = async (view, callback?) => {
   const chartView = chartViewManager.getChartView(view.render, view.type)
   recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
   recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
+  console.log('chart', chart)
+  console.log( chartView)
   switch (chartView.library) {
     case ChartLibraryType.L7_PLOT:
       await renderL7Plot(chart, chartView as L7PlotChartView<any, any>, callback)
@@ -344,7 +339,6 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView<any, any
 
 class SatelliteControl extends Control {
   protected onAdd() {
-    // debugger
     const btn = document.createElement('button');
     btn.className = 'l7-control-button l7-satellite-control';
     btn.innerHTML = '卫星';
@@ -398,7 +392,6 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callb
       chart: chart,
       action
     });
-
     // 清除已有比例尺 
     if (!scaleControl) {
       scaleControl = new Scale({
@@ -425,188 +418,12 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callb
       myChart.getScene()?.addControl(satelliteControlInstance);
     }
     // ====== 修复完成 ======
-    threel7()
     myChart?.render();
     callback?.();
     emit('resetLoading');
   }, 500);
 };
-//三维模型集成
-let threeJSLayerRef:any  = null
-const threel7 = () => {
-  // ====== 三维模型集成 ======
-  const scene = myChart.getScene(); // 获取场景
-  scene.registerRenderService(ThreeRender);
-  threeJSLayerRef = new ThreeLayer({
-    enableMultiPassRenderer: false,
-    onAddMeshes: (threeScene: any, layer: any) => {
-       // 添加相机初始化代码
-       const camera = new THREE.PerspectiveCamera(
-        75,
-        scene.width / scene.height,
-        0.1,
-        1000000000
-      );
-      camera.position.set(0, 0, 10000000);
-      threeScene.add(camera);
-      layer.camera = camera; // 关键：将相机绑定到图层
-      threeScene.add(new THREE.AmbientLight(0xffffff));
-      const sunlight: any = new THREE.DirectionalLight(0xffffff, 0.25);
-      sunlight.position.set(0, 80000000, 100000000);
-      sunlight.matrixWorldNeedsUpdate = true;
-      threeScene.add(sunlight);
-      // 使用 Three.js glTFLoader 加载模型
-      const manager: any = new THREE.LoadingManager()
-      manager.setURLModifier((url: any, path: any) => {
-        return (path || '') + url
-      })
-      const loader = new GLTFLoader(manager);
-      const dracoLoader = new DRACOLoader();
-      dracoLoader.setDecoderPath('./static/js/');
-      dracoLoader.setDecoderConfig({ type: 'js' });
-      loader.setDRACOLoader(dracoLoader);
-      loader.load(
-        `./static/3DModel/scene.glb`,
-        (gltf) => {
-          // debugger
-          const gltfScene: any = gltf.scene
-          // setDouble(gltfScene);
-          content = gltfScene
-          layer.adjustMeshToMap(gltfScene);
-          // gltfScene.scale.set(1000, 1000, 1000)
-          layer.setMeshScale(gltfScene, 10, 10, 10);
-          layer.setObjectLngLat(gltfScene, [116.397428, 39.91923], 0);
-          // 添加环境光
-          threeScene.add(new THREE.AmbientLight(0xffffff, 0.3));
-          // 动态调整 UV Mapping
-          gltfScene.traverse((node) => {
-            if (node.isMesh) {
-              const material = node.material;
-              if (material.map) {
-                const uv = node.geometry.attributes.uv;
-                for (let i = 0; i < uv.count; i++) {
-                  uv.setX(i, /* 新的 U 值 */);
-                  uv.setY(i, /* 新的 V 值 */);
-                }
-                uv.needsUpdate = true;
-              }
-            }
-          });
 
-          // 调整材质属性
-          gltfScene.traverse((node) => {
-            if (node.isMesh) {
-              const material = node.material;
-              if (material.map) {
-                material.map.repeat.set(1, 1);
-                material.map.offset.set(0, 0);
-                material.map.wrapS = THREE.ClampToEdgeWrapping;
-                material.map.wrapT = THREE.ClampToEdgeWrapping;
-              }
-            }
-          });
-          // 添加方向光
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.4);
-          sunlight.position.set(50, 100, 50);
-          sunlight.target.position.set(0, 0, 0);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          // 添加点光源
-          const pointLight = new THREE.PointLight(0xffffff, 0.6, 1000);
-          pointLight.position.set(10, 15, -5);
-          threeScene.add(pointLight);
-
-          // 添加聚光灯
-          const spotLight = new THREE.SpotLight(0xffffff, 0.8);
-          spotLight.position.set(10, 25, 15);
-          spotLight.angle = Math.PI / 4;
-          threeScene.add(spotLight);
-          // 添加模型点击事件监听
-          scene.on('click', handleModelClick);
-          // 向场景中添加模型
-          threeScene.add(gltfScene);
-          // // 重绘图层
-          layer.render();
-        },
-      );
-    },
-  }).animate(true);
-  scene.addLayer(threeJSLayerRef);
-
-  // ====== 三维模型集成完成 ======
-}
- // 模型点击事件处理函数
- const handleModelClick = (e: any) => {
-  // debugger
-   // 添加安全校验
-   if (!threeJSLayerRef || !threeJSLayerRef.camera) {
-    console.warn('Camera not initialized');
-    return;
-  }
-  
-  // 1. 获取正确的鼠标坐标
-  const point = e.containerPoint || { x: e.originEvent.x, y: e.originEvent.y }; // 兼容不同事件结构
-  const scene = myChart.getScene();
-  const container = scene.getContainer();
-  const width = container.clientWidth;
-  const height = container.clientHeight;
-  // 2. 计算归一化设备坐标
-  const mouse = new THREE.Vector2();
-  mouse.x = (point.x / width) * 2 - 1;
-  mouse.y = -(point.y / height) * 2 + 1;
-  
-  // 3. 优化射线检测
-  const raycaster = new THREE.Raycaster();
-  raycaster.setFromCamera(mouse, threeJSLayerRef.camera);
-  
-  // 4. 检测所有可交互对象（包括嵌套结构）
-  const allObjects = [];
-  content.traverse(child => {
-    if (child.isMesh && child.visible) {
-      allObjects.push(child);
-    }
-  });
-  
-  const intersects = raycaster.intersectObjects(allObjects);
-  
-  // 5. 处理点击结果
-  if (intersects.length > 0) {
-    const closest = intersects[0];
-    console.log('模型被点击:', closest.object);
-    
-    // 6. 添加业务逻辑（示例：高亮选中对象）
-    highlightSelectedObject(closest.object);
-  } else {
-    // 点击空白区域处理
-    clearSelection();
-  }
-};
-
-// 高亮选中对象
-const highlightSelectedObject = (object) => {
-  // 保存原始材质
-  if (!object.userData.originalMaterial) {
-    object.userData.originalMaterial = object.material;
-  }
-  
-  // 应用高亮材质
-  object.material = new THREE.MeshBasicMaterial({
-    color: 0xff0000,
-    transparent: true,
-    opacity: 0.7
-  });
-};
-
-// 清除选中状态
-const clearSelection = () => {
-  content.traverse(child => {
-    if (child.userData.originalMaterial) {
-      child.material = child.userData.originalMaterial;
-      delete child.userData.originalMaterial;
-    }
-  });
-};
 
 
 const pointClickTrans = () => {
@@ -917,33 +734,53 @@ defineExpose({
 
 let resizeObserver
 const TOLERANCE = 0.01
-const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map']
+const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map','three-map']
 onMounted(() => {
-  console.log('Three.js实际版本:', THREE.REVISION);
+  // 1. 获取当前图表容器的 DOM 元素
   const containerDom = document.getElementById(containerId)
+  // 2. 记录容器初始尺寸 [宽度, 高度]
   const { offsetWidth, offsetHeight } = containerDom
   const preSize = [offsetWidth, offsetHeight]
+
+  // 3. 创建 ResizeObserver 实例，监听容器尺寸变化
   resizeObserver = new ResizeObserver(([entry] = []) => {
+    // 3.1 仅对指定图表类型（如 map、three-map）生效
     if (!RESIZE_MONITOR_CHARTS.includes(view.value.type)) {
       return
     }
+
+    // 3.2 获取当前容器尺寸
     const [size] = entry.borderBoxSize || []
+    // 3.3 计算尺寸变化率（相对于初始尺寸）
     const widthOffsetPercent = (size.inlineSize - preSize[0]) / preSize[0]
     const heightOffsetPercent = (size.blockSize - preSize[1]) / preSize[1]
+
+    // 3.4 若变化率小于容差值（TOLERANCE=0.01），避免频繁触发重绘
     if (Math.abs(widthOffsetPercent) < TOLERANCE && Math.abs(heightOffsetPercent) < TOLERANCE) {
       return
     }
+
+    // 3.5 尺寸变化超过阈值且图表已初始化时，重新渲染图表
     if (myChart && preSize[1] > 1) {
-      renderChart(curView)
+      renderChart(curView) // 调用 [renderChart](file://e:\2项目\1gis_bi\gis-bi\core\core-frontend\src\views\chart\components\views\components\ChartComponentG2Plot.vue#L241-L273) 重绘图表
     }
+
+    // 3.6 更新记录的尺寸为当前值
     preSize[0] = size.inlineSize
     preSize[1] = size.blockSize
   })
-  resizeObserver.observe(containerDom)
-  useEmitt({ name: 'l7-prepare-picture', callback: preparePicture })
-  useEmitt({ name: 'l7-unprepare-picture', callback: unPreparePicture })
-  // 初始化 Three.js
 
+  // 4. 开始监听图表容器尺寸变化
+  resizeObserver.observe(containerDom)
+
+  // 5. 绑定全局事件监听器
+  // 5.1 监听 `l7-prepare-picture` 事件：触发图表转图片操作
+  useEmitt({ name: 'l7-prepare-picture', callback: preparePicture })
+  // 5.2 监听 `l7-unprepare-picture` 事件：还原图表内容
+  useEmitt({ name: 'l7-unprepare-picture', callback: unPreparePicture })
+
+  // 6. 预留 Three.js 初始化逻辑（当前未启用）
+  // 示例：this.initThreeJs()
 })
 onBeforeUnmount(() => {
   try {

core/core-frontend/src/views/chart/components/views/index.vue

@@ -598,7 +598,7 @@ const calcData = params => {
 }
 
 const showChartView = (...libs: ChartLibraryType[]) => {
-  if (view.value?.render && view.value?.type) {
+  if (view.value?.render && view.value?.type) { 
     const chartView = chartViewManager.getChartView(view.value.render, view.value.type)
     return chartView && libs?.includes(chartView.library)
   } else {
@@ -1049,7 +1049,7 @@ const loadPluginCategory = data => {
 }
 
 const allEmptyCheck = computed(() => {
-  return ['rich-text', 'picture-group'].includes(element.value.innerType)
+  return ['rich-text', 'picture-group','three-map'].includes(element.value.innerType)
 })
 /**
  * 标题提示的最大宽度
@@ -1160,6 +1160,7 @@ const clearG2Tooltip = () => {
     </div>
     <!--这里去渲染不同图库的图表-->
     <div v-if="allEmptyCheck || (chartAreaShow && !showEmpty)" style="flex: 1; overflow: hidden">
+     
       <plugin-component
         v-if="view.plugin?.isPlugin && loadPlugin"
         :jsname="view.plugin.staticMap['index']"
@@ -1230,7 +1231,7 @@ const clearG2Tooltip = () => {
         :font-family="fontFamily"
         :active="active"
         v-else-if="
-          showChartView(ChartLibraryType.G2_PLOT, ChartLibraryType.L7_PLOT, ChartLibraryType.L7)
+          showChartView(ChartLibraryType.G2_PLOT, ChartLibraryType.L7_PLOT, ChartLibraryType.L7) || view.type == 'three-map'
         "
         ref="chartComponent"
         @onChartClick="chartClick"

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -124,7 +124,7 @@ const loadCanvasData = (dvId, weight?) => {
   )
 }
 // 地图类图表，需要预先准备图片
-const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map','three-map']
 const downloadH2 = type => {
   downloadStatus.value = true
   const mapElementIds =

core/core-frontend/src/views/data-visualization/index.vue

@@ -175,10 +175,10 @@ const handleNew = newComponentInfo => {
   const { componentName, innerType, staticMap } = newComponentInfo
   if (componentName) {
     const { width, height, scale } = canvasStyleData.value
-    const component = findNewComponent(componentName, innerType, staticMap)
+    const component = findNewComponent(componentName, innerType, staticMap)//动态创建组件实例
     component.style.top = ((height - component.style.height) * scale) / 200
     component.style.left = ((width - component.style.width) * scale) / 200
-    component.id = guid()
+    component.id = guid() //生成唯一的随机id
     const popComponents = componentData.value.filter(
       ele => ele.category && ele.category === 'hidden'
     )
@@ -191,9 +191,9 @@ const handleNew = newComponentInfo => {
       component.category = canvasState.value.curPointArea
       component.commonBackground.backgroundColor = 'rgba(41, 41, 41, 1)'
     }
-    changeComponentSizeWithScale(component)
+    changeComponentSizeWithScale(component) //确保组件在不同比例下保持视觉比例协调
     dvMainStore.addComponent({ component: component, index: undefined })
-    adaptCurThemeCommonStyle(component)
+    adaptCurThemeCommonStyle(component)//用户切换亮/暗色模式时，自动更新所有组件的样式（如文字颜色、背景色）。
     snapshotStore.recordSnapshotCache('renderChart', component.id)
     if (state.countTime > 10) {
       state.sideShow = false

core/core-frontend/src/viewsnew/data-visualization/index.vue

@@ -169,7 +169,7 @@ const contentStyle = computed(() => {
   }
 })
 
-// 通过实时监听的方式直接添加组件
+// 通过实时监听的方式直接添加组件 symbolic-map
 const handleNew = newComponentInfo => {
   state.countTime++
   const { componentName, innerType, staticMap } = newComponentInfo