fix: 总览地图更换

app/package.json

@@ -11,10 +11,14 @@
   },
   "dependencies": {
     "@zhgkpt/components": "workspace:^1.0.0",
+    "d3-geo": "^3.1.0",
     "echarts-gl": "^2.0.9",
+    "gsap": "^3.12.2",
     "less": "^4.1.3",
     "lib-flexible": "^0.3.2",
     "pinia": "^2.0.16",
+    "three": "^0.154.0",
+    "three.interaction": "^0.2.3",
     "vue-router": "^3.5.4",
     "vue-seamless-scroll": "^1.1.23",
     "vue2-scale-box": "^0.1.6"

app/src/assets/json/cq-outline.json

@@ -0,0 +1,1084 @@
+{
+  "type": "FeatureCollection",
+  "name": "重庆-outLine",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 500000,
+        "name": "重庆市",
+        "center": [
+          106.504962,
+          29.533155
+        ],
+        "centroid": [
+          107.88398,
+          30.067321
+        ],
+        "childrenNum": 38,
+        "level": "province",
+        "subFeatureIndex": 21,
+        "acroutes": [
+          100000
+        ],
+        "parent": {
+          "adcode": 100000
+        }
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.09256,
+                30.578762
+              ],
+              [
+                109.114734,
+                30.64416
+              ],
+              [
+                108.971836,
+                30.627686
+              ],
+              [
+                108.808612,
+                30.491153
+              ],
+              [
+                108.743939,
+                30.494762
+              ],
+              [
+                108.688504,
+                30.587519
+              ],
+              [
+                108.56778,
+                30.468464
+              ],
+              [
+                108.42673,
+                30.492184
+              ],
+              [
+                108.402092,
+                30.376626
+              ],
+              [
+                108.460606,
+                30.35959
+              ],
+              [
+                108.581947,
+                30.255763
+              ],
+              [
+                108.56778,
+                30.157517
+              ],
+              [
+                108.513577,
+                30.057619
+              ],
+              [
+                108.542526,
+                29.998047
+              ],
+              [
+                108.516041,
+                29.885539
+              ],
+              [
+                108.371295,
+                29.841434
+              ],
+              [
+                108.424266,
+                29.816
+              ],
+              [
+                108.437201,
+                29.741218
+              ],
+              [
+                108.504338,
+                29.707964
+              ],
+              [
+                108.602273,
+                29.865824
+              ],
+              [
+                108.666946,
+                29.842472
+              ],
+              [
+                108.690968,
+                29.689773
+              ],
+              [
+                108.785822,
+                29.633622
+              ],
+              [
+                108.844337,
+                29.658582
+              ],
+              [
+                108.91209,
+                29.571714
+              ],
+              [
+                108.880677,
+                29.442576
+              ],
+              [
+                108.927488,
+                29.435281
+              ],
+              [
+                108.919481,
+                29.326314
+              ],
+              [
+                109.11227,
+                29.360737
+              ],
+              [
+                109.110422,
+                29.215143
+              ],
+              [
+                109.232378,
+                29.119533
+              ],
+              [
+                109.319842,
+                29.042667
+              ],
+              [
+                109.235458,
+                28.882476
+              ],
+              [
+                109.241002,
+                28.776594
+              ],
+              [
+                109.2989,
+                28.747221
+              ],
+              [
+                109.201581,
+                28.598133
+              ],
+              [
+                109.304443,
+                28.623871
+              ],
+              [
+                109.321074,
+                28.581322
+              ],
+              [
+                109.274262,
+                28.494592
+              ],
+              [
+                109.191726,
+                28.470927
+              ],
+              [
+                109.152306,
+                28.349885
+              ],
+              [
+                109.081473,
+                28.249264
+              ],
+              [
+                109.086401,
+                28.184942
+              ],
+              [
+                109.026655,
+                28.220271
+              ],
+              [
+                109.006329,
+                28.163317
+              ],
+              [
+                108.922561,
+                28.217635
+              ],
+              [
+                108.772888,
+                28.21289
+              ],
+              [
+                108.726692,
+                28.282463
+              ],
+              [
+                108.764881,
+                28.306698
+              ],
+              [
+                108.779663,
+                28.425158
+              ],
+              [
+                108.710678,
+                28.500902
+              ],
+              [
+                108.640461,
+                28.457251
+              ],
+              [
+                108.688504,
+                28.422527
+              ],
+              [
+                108.668178,
+                28.334614
+              ],
+              [
+                108.611512,
+                28.324607
+              ],
+              [
+                108.577019,
+                28.534024
+              ],
+              [
+                108.636149,
+                28.621245
+              ],
+              [
+                108.565316,
+                28.662204
+              ],
+              [
+                108.471077,
+                28.627548
+              ],
+              [
+                108.332491,
+                28.679528
+              ],
+              [
+                108.385462,
+                28.772398
+              ],
+              [
+                108.352817,
+                28.815395
+              ],
+              [
+                108.350353,
+                28.933282
+              ],
+              [
+                108.268433,
+                29.089734
+              ],
+              [
+                108.256115,
+                29.040574
+              ],
+              [
+                108.068253,
+                29.086597
+              ],
+              [
+                108.024521,
+                29.038482
+              ],
+              [
+                107.930899,
+                29.035343
+              ],
+              [
+                107.867457,
+                28.960508
+              ],
+              [
+                107.784921,
+                29.04842
+              ],
+              [
+                107.810791,
+                29.138348
+              ],
+              [
+                107.751044,
+                29.199997
+              ],
+              [
+                107.701769,
+                29.142006
+              ],
+              [
+                107.589052,
+                29.149845
+              ],
+              [
+                107.570574,
+                29.218276
+              ],
+              [
+                107.486806,
+                29.174402
+              ],
+              [
+                107.404271,
+                29.187984
+              ],
+              [
+                107.412894,
+                29.095485
+              ],
+              [
+                107.36485,
+                29.010753
+              ],
+              [
+                107.441227,
+                28.943755
+              ],
+              [
+                107.383945,
+                28.848417
+              ],
+              [
+                107.219489,
+                28.772923
+              ],
+              [
+                107.191156,
+                28.888763
+              ],
+              [
+                107.057497,
+                28.895049
+              ],
+              [
+                106.983584,
+                28.851561
+              ],
+              [
+                106.986664,
+                28.793899
+              ],
+              [
+                106.986664,
+                28.793899
+              ],
+              [
+                106.926302,
+                28.809104
+              ],
+              [
+                106.824056,
+                28.756139
+              ],
+              [
+                106.883186,
+                28.69265
+              ],
+              [
+                106.866556,
+                28.624397
+              ],
+              [
+                106.73844,
+                28.554522
+              ],
+              [
+                106.7446,
+                28.465667
+              ],
+              [
+                106.632499,
+                28.503531
+              ],
+              [
+                106.564745,
+                28.485127
+              ],
+              [
+                106.63681,
+                28.623346
+              ],
+              [
+                106.562897,
+                28.753516
+              ],
+              [
+                106.45326,
+                28.816968
+              ],
+              [
+                106.504999,
+                28.662204
+              ],
+              [
+                106.484057,
+                28.530344
+              ],
+              [
+                106.395978,
+                28.570287
+              ],
+              [
+                106.37442,
+                28.525613
+              ],
+              [
+                106.304203,
+                28.650653
+              ],
+              [
+                106.248152,
+                28.829024
+              ],
+              [
+                106.173008,
+                28.92019
+              ],
+              [
+                106.048588,
+                28.906573
+              ],
+              [
+                106.043661,
+                28.954226
+              ],
+              [
+                105.970364,
+                28.966267
+              ],
+              [
+                105.88906,
+                28.909716
+              ],
+              [
+                105.762176,
+                28.991391
+              ],
+              [
+                105.693807,
+                29.267351
+              ],
+              [
+                105.518264,
+                29.264219
+              ],
+              [
+                105.427721,
+                29.316924
+              ],
+              [
+                105.428337,
+                29.417562
+              ],
+              [
+                105.380294,
+                29.456643
+              ],
+              [
+                105.380294,
+                29.456643
+              ],
+              [
+                105.324859,
+                29.448828
+              ],
+              [
+                105.289751,
+                29.552979
+              ],
+              [
+                105.38399,
+                29.67002
+              ],
+              [
+                105.476996,
+                29.674699
+              ],
+              [
+                105.575547,
+                29.745374
+              ],
+              [
+                105.619894,
+                29.846624
+              ],
+              [
+                105.709206,
+                29.840396
+              ],
+              [
+                105.70243,
+                29.924957
+              ],
+              [
+                105.753553,
+                30.018254
+              ],
+              [
+                105.687648,
+                30.038974
+              ],
+              [
+                105.582938,
+                30.123884
+              ],
+              [
+                105.582938,
+                30.127507
+              ],
+              [
+                105.580474,
+                30.129577
+              ],
+              [
+                105.574315,
+                30.130611
+              ],
+              [
+                105.56138,
+                30.183898
+              ],
+              [
+                105.571235,
+                30.17976
+              ],
+              [
+                105.642684,
+                30.186484
+              ],
+              [
+                105.624822,
+                30.275917
+              ],
+              [
+                105.720292,
+                30.252662
+              ],
+              [
+                105.720292,
+                30.252662
+              ],
+              [
+                105.714749,
+                30.322927
+              ],
+              [
+                105.792357,
+                30.427199
+              ],
+              [
+                105.881053,
+                30.387465
+              ],
+              [
+                106.031958,
+                30.373529
+              ],
+              [
+                106.10587,
+                30.310531
+              ],
+              [
+                106.17116,
+                30.306399
+              ],
+              [
+                106.180399,
+                30.23302
+              ],
+              [
+                106.256776,
+                30.19631
+              ],
+              [
+                106.262935,
+                30.211306
+              ],
+              [
+                106.428623,
+                30.254729
+              ],
+              [
+                106.451412,
+                30.307949
+              ],
+              [
+                106.451412,
+                30.307949
+              ],
+              [
+                106.610941,
+                30.292451
+              ],
+              [
+                106.610941,
+                30.292451
+              ],
+              [
+                106.612789,
+                30.235605
+              ],
+              [
+                106.612789,
+                30.235605
+              ],
+              [
+                106.612173,
+                30.235605
+              ],
+              [
+                106.612173,
+                30.235605
+              ],
+              [
+                106.611557,
+                30.235605
+              ],
+              [
+                106.612173,
+                30.235605
+              ],
+              [
+                106.611557,
+                30.235605
+              ],
+              [
+                106.677462,
+                30.157
+              ],
+              [
+                106.726121,
+                30.033277
+              ],
+              [
+                106.825904,
+                30.031205
+              ],
+              [
+                106.825904,
+                30.031205
+              ],
+              [
+                106.913367,
+                30.025506
+              ],
+              [
+                106.974345,
+                30.082992
+              ],
+              [
+                106.976193,
+                30.083509
+              ],
+              [
+                106.980504,
+                30.085062
+              ],
+              [
+                106.981736,
+                30.085062
+              ],
+              [
+                107.053801,
+                30.043636
+              ],
+              [
+                107.054417,
+                30.041046
+              ],
+              [
+                107.055649,
+                30.040528
+              ],
+              [
+                107.058113,
+                30.043118
+              ],
+              [
+                107.221337,
+                30.213891
+              ],
+              [
+                107.359923,
+                30.456087
+              ],
+              [
+                107.516987,
+                30.644675
+              ],
+              [
+                107.424597,
+                30.740889
+              ],
+              [
+                107.514524,
+                30.854986
+              ],
+              [
+                107.645103,
+                30.821079
+              ],
+              [
+                107.739957,
+                30.884259
+              ],
+              [
+                107.763979,
+                30.816968
+              ],
+              [
+                107.85329,
+                30.793842
+              ],
+              [
+                107.994956,
+                30.90839
+              ],
+              [
+                107.943833,
+                30.989466
+              ],
+              [
+                108.053471,
+                31.040745
+              ],
+              [
+                108.009123,
+                31.10839
+              ],
+              [
+                108.083652,
+                31.185713
+              ],
+              [
+                108.095354,
+                31.268088
+              ],
+              [
+                108.185898,
+                31.337104
+              ],
+              [
+                108.153869,
+                31.371338
+              ],
+              [
+                108.216079,
+                31.410666
+              ],
+              [
+                108.191441,
+                31.492333
+              ],
+              [
+                108.34173,
+                31.509679
+              ],
+              [
+                108.391621,
+                31.593298
+              ],
+              [
+                108.517889,
+                31.665131
+              ],
+              [
+                108.535135,
+                31.757769
+              ],
+              [
+                108.343578,
+                31.860987
+              ],
+              [
+                108.259194,
+                31.966628
+              ],
+              [
+                108.373759,
+                32.077217
+              ],
+              [
+                108.447672,
+                32.07164
+              ],
+              [
+                108.369447,
+                32.173493
+              ],
+              [
+                108.509882,
+                32.201343
+              ],
+              [
+                108.67249,
+                32.104083
+              ],
+              [
+                108.734084,
+                32.106617
+              ],
+              [
+                108.902235,
+                31.984899
+              ],
+              [
+                108.988466,
+                31.979317
+              ],
+              [
+                109.164009,
+                31.877247
+              ],
+              [
+                109.195422,
+                31.817782
+              ],
+              [
+                109.273646,
+                31.801003
+              ],
+              [
+                109.281654,
+                31.717061
+              ],
+              [
+                109.585928,
+                31.726731
+              ],
+              [
+                109.731289,
+                31.700263
+              ],
+              [
+                109.76455,
+                31.602981
+              ],
+              [
+                109.719586,
+                31.555067
+              ],
+              [
+                109.848934,
+                31.552008
+              ],
+              [
+                109.946252,
+                31.506108
+              ],
+              [
+                110.054042,
+                31.410666
+              ],
+              [
+                110.140273,
+                31.390238
+              ],
+              [
+                110.189548,
+                31.129391
+              ],
+              [
+                110.119947,
+                31.088409
+              ],
+              [
+                110.135961,
+                30.986902
+              ],
+              [
+                110.172918,
+                30.978694
+              ],
+              [
+                110.082375,
+                30.799496
+              ],
+              [
+                110.008462,
+                30.883746
+              ],
+              [
+                109.893897,
+                30.899662
+              ],
+              [
+                109.780564,
+                30.848822
+              ],
+              [
+                109.590855,
+                30.693566
+              ],
+              [
+                109.435638,
+                30.59576
+              ],
+              [
+                109.35495,
+                30.487028
+              ],
+              [
+                109.36111,
+                30.550942
+              ],
+              [
+                109.299516,
+                30.630775
+              ],
+              [
+                109.143683,
+                30.521052
+              ],
+              [
+                109.103647,
+                30.565883
+              ],
+              [
+                109.106111,
+                30.57052
+              ],
+              [
+                109.106727,
+                30.572066
+              ],
+              [
+                109.108575,
+                30.576702
+              ],
+              [
+                109.102415,
+                30.580308
+              ],
+              [
+                109.100567,
+                30.580823
+              ],
+              [
+                109.09872,
+                30.579277
+              ],
+              [
+                109.09256,
+                30.578762
+              ]
+            ]
+          ],
+          [
+            [
+              [
+                105.574315,
+                30.130611
+              ],
+              [
+                105.580474,
+                30.129577
+              ],
+              [
+                105.582938,
+                30.127507
+              ],
+              [
+                105.582938,
+                30.123884
+              ],
+              [
+                105.574315,
+                30.130611
+              ]
+            ]
+          ],
+          [
+            [
+              [
+                109.09256,
+                30.578762
+              ],
+              [
+                109.09872,
+                30.579277
+              ],
+              [
+                109.106111,
+                30.57052
+              ],
+              [
+                109.103647,
+                30.565883
+              ],
+              [
+                109.09256,
+                30.578762
+              ]
+            ]
+          ],
+          [
+            [
+              [
+                109.102415,
+                30.580308
+              ],
+              [
+                109.108575,
+                30.576702
+              ],
+              [
+                109.106727,
+                30.572066
+              ],
+              [
+                109.100567,
+                30.580823
+              ],
+              [
+                109.102415,
+                30.580308
+              ]
+            ]
+          ],
+          [
+            [
+              [
+                107.053801,
+                30.043636
+              ],
+              [
+                107.058113,
+                30.043118
+              ],
+              [
+                107.055649,
+                30.040528
+              ],
+              [
+                107.054417,
+                30.041046
+              ],
+              [
+                107.053801,
+                30.043636
+              ]
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}

app/src/components/MapChart3D/index.vue

@@ -0,0 +1,474 @@
+<script>
+import * as THREE from 'three'
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import { Line2 } from 'three/addons/lines/Line2.js';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
+import { Interaction } from 'three.interaction/src/index.js';
+import * as d3 from 'd3-geo'
+import gsap from 'gsap'
+import { onMounted, ref, watch } from 'vue';
+
+const BASE_URL = "/src/assets"
+
+export default {
+  name: 'Map3DChart',
+  props: {
+    debugger: {
+      type: Boolean,
+      default: false
+    },
+    qx: String,
+    mapHeatData: {
+      type: Array,
+      default: () => []
+    },
+    formatter: {
+      type: Function,
+      default: function (params) {
+        let res = params.name + "<br/>";
+        res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+        return res;
+      }
+    },
+    areaColor: {
+      type: Function,
+      default: function (params) {
+        return params ? params.meta.分区颜色 : ''
+      }
+    }
+  },
+  setup(props, ctx) {
+    // 初始化3D地图
+    const mapTestBox = ref()
+    const activeArea = ref("")
+    let container = null;
+    let renderer = null, scene = null, camera = null ,labelRenderer = null, controls = null;
+    let WIDTH = 0, HEIGHT = 0;
+    let selectMesh = null;
+    let prevMesh = null;
+    let selectName = null;
+    let selectPrevColor = null;
+    var uniforms2 = {
+      u_time: { value: 0.0 }
+    };
+    var map = new THREE.Group();
+    const COLOR_MAP = {
+      "红色": "#ff4540",
+      "橙色": "#ff8934",
+      "黄色": "#ffff55",
+      "绿色": "#69ff90",
+      "蓝色": "#23a3ff"
+    }
+
+
+    let textureLoader = new THREE.TextureLoader(); //纹理贴图加载器
+    const cacheMap = new Map()
+    // const isInnerClick = ref(true)
+    const mapData = ref(getHeatMapData(props.mapHeatData))
+    function getHeatMapData(val) {
+      return val.reduce((config, current) => {
+        return {
+          ...config,
+          [current.name]: current
+        }
+      },{})
+    }
+
+    function getAreaColor(name) {
+      return COLOR_MAP[props.areaColor(mapData.value[name])]
+    }
+
+
+    watch(() => props.mapHeatData, (val) => {
+      mapData.value = getHeatMapData(val)
+
+      Object.keys( mapData.value ).forEach(key => {
+        const area = cacheMap.get(key);
+        if (area) {
+          area.mesh.material[0].color.set(COLOR_MAP[props.areaColor(mapData.value[key])])
+        }
+      })
+
+    }, {
+      deep: true
+    })
+    watch(() => props.qx, (val) => {
+      const area = cacheMap.get(val);
+      if (area) {
+        clickArea(area.mesh, area.name)
+      }
+    })
+
+
+    onMounted(() => {
+      init()
+    })
+
+    function init() {
+      container = mapTestBox.value || document.body;
+      WIDTH = container.clientWidth
+      HEIGHT = container.clientHeight
+      initScene();
+      initCamera();
+      initRenderer();
+      initLights();
+      initControls();
+		  new Interaction(renderer, scene, camera);
+      initGeoJson();
+      initDebugger();
+      // 添加物体
+      // const cubeGeometry = new THREE.BoxGeometry(1,1,1)
+      // const material = new THREE.MeshBasicMaterial({
+      //   color: '#ffff00'
+      // })
+      // // 根据几何体和材质创建物体
+      // const cube =new THREE.Mesh(cubeGeometry, material)
+      // // 将几何体创建到场景当中
+      // scene.add(cube)
+    }
+
+    function initScene() {
+      // 1、创建场景
+      scene = new THREE.Scene()
+    }
+    // 初始化灯光
+    function initLights() {
+        scene.add(new THREE.AmbientLight(0xffffff,1.2));
+        let directionalLight1 = new THREE.DirectionalLight(0xffffff,1); //037af1
+        directionalLight1.position.set(-100, 10, -100);
+        let directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight2.position.set(100, 10, 100);
+        scene.add(directionalLight1);
+        scene.add(directionalLight2);
+      }
+    function initCamera() {
+      // 2、创建透视相机
+      camera = new THREE.PerspectiveCamera(
+        45,
+        WIDTH / HEIGHT,
+        0.1,
+        1050
+      )
+      // 设置相机位置
+      camera.position.set(3.4, 118, 92)
+		  camera.lookAt(scene.position);
+      // scene.add(camera);
+
+    }
+
+    function initDebugger() {
+      if (props.debugger) {
+        // 添加坐标辅助器
+        const axisHelper = new THREE.AxesHelper(10000)
+        scene.add(axisHelper)
+      }
+    }
+    function initRenderer() {
+      // 初始化渲染器
+      renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})
+      renderer.setPixelRatio(window.devicePixelRatio);
+      renderer.setSize(WIDTH, HEIGHT)
+		  renderer.setClearColor(0x070b13, 1);
+      container.appendChild(renderer.domElement)
+		  // 初始化CSS2DRenderer
+      labelRenderer = new CSS2DRenderer();
+      labelRenderer.setSize(WIDTH,HEIGHT);
+      labelRenderer.domElement.style.position = 'absolute';
+      labelRenderer.domElement.style.top = '0px';
+      labelRenderer.domElement.style.pointerEvents = 'none';
+      container.appendChild(labelRenderer.domElement );
+    }
+    function initControls() {
+      controls = new OrbitControls(camera, renderer.domElement)
+      // 如果使用animate方法时，将此函数删除
+      //controls.addEventListener( 'change', render );
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      controls.enableDamping = true;
+      //动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      //controls.dampingFactor = 0.25;
+      //是否可以缩放
+      controls.enableZoom = true;
+      //是否自动旋转
+      controls.autoRotate = false;
+      controls.autoRotateSpeed = 0.5;
+      //设置相机距离原点的最远距离
+      controls.minDistance = 1;
+      //设置相机距离原点的最远距离
+      controls.maxDistance = 2000;
+      // orbitcontrols.minPolarAngle = Math.PI / 180*10;
+      controls.maxPolarAngle = Math.PI / 180*75;//不然看到底部，超过90就看到底部了
+      //是否开启右键拖拽
+      controls.enablePan = true;
+      controls.update();
+      function render() {
+        renderer.render(scene, camera);
+        labelRenderer.render(scene, camera);
+        controls.update();
+        requestAnimationFrame(render);
+      }
+      render();
+    }
+    function initGeoJson(){
+      let loader = new THREE.FileLoader();
+      loader.load(`${BASE_URL}/json/cq.json`, function (data) {
+        let jsonData = JSON.parse(data);
+        initMap(jsonData);
+      })
+    }
+
+    function clickArea(mesh, name) {
+      if (selectMesh === null) {
+        selectPrevColor = mesh.material[0].color.getHexString();
+        gsap.to(mesh.position, {
+          y: 8,
+          duration: .3
+        });
+        gsap.to(name.element.style, {
+          fontSize: '30px',
+          duration: .3
+        })
+        selectMesh = mesh;
+        selectName = name
+      } else if (selectMesh === mesh) {
+        gsap.to(selectMesh.position, {
+          y: 1.5,
+          duration: .3
+        });
+        gsap.to(name.element.style, {
+          fontSize: '12px',
+          duration: .3
+        })
+        prevMesh = mesh;
+        selectMesh = null;
+        selectName = null;
+      } else {
+        gsap.to(selectMesh.position, {
+          y: 1.5,
+          duration: .3
+        });
+        gsap.to(mesh.position, {
+          y: 8,
+          duration: .3
+        })
+        if (selectName) {
+          gsap.to(selectName.element.style, {
+            fontSize: '12px',
+            duration: .3
+          })
+        }
+        gsap.to(name.element.style, {
+          fontSize: '30px',
+          duration: .3
+        })
+        prevMesh = selectMesh
+        selectMesh = mesh;
+        selectPrevColor = mesh.material[0].color.getHexString();
+        selectName = name
+      }
+      prevMesh && prevMesh.material[0].color.set(`#${selectPrevColor}`)
+      selectMesh && selectMesh.material[0].color.set('#ffffff')
+    }
+    
+  /**
+	 * 根据json生成地图
+	 * @param chinaJson
+	 */
+	function initMap(chinaJson) {
+		let textureMap=textureLoader.load(`${BASE_URL}/images/map/map_gray.jpg`);
+		let texturedispMap=textureLoader.load(`${BASE_URL}/images/map/map-disp.jpg`);
+		let texturefxMap=textureLoader.load(`${BASE_URL}/images/map/map-fx.jpg`);
+		textureMap.wrapS = THREE.RepeatWrapping;  //纹理水平方向的平铺方式
+		textureMap.wrapT = THREE.RepeatWrapping;  //纹理垂直方向的平铺方式
+		textureMap.flipY = texturefxMap.flipY = false;
+		textureMap.rotation = texturefxMap.rotation = THREE.MathUtils.degToRad(45);
+		const scale = 0.01;
+		textureMap.repeat.set(scale, scale);
+		texturefxMap.repeat.set(scale, scale);
+		textureMap.offset.set(0.5,0.5);
+		texturefxMap.offset.set(0.5,0.5);
+		var matLine = new LineMaterial( {
+			color: 0xffffff,
+			linewidth: 0.0013,
+			vertexColors: true,
+			dashed: false,
+			alphaToCoverage: true,
+		} );
+
+		var matLine2 = new LineMaterial( {
+			color: '#01bdc2',
+			linewidth: 0.0025,
+			vertexColors: true,
+			dashed: false,
+			alphaToCoverage: true,
+		} );
+			// 新建一个省份容器：用来存放省份对应的模型和轮廓线
+			const meshArrs = new THREE.Object3D()
+			const meshs = []
+      cacheMap.clear()
+			// d3-geo转化坐标
+		const projection = d3.geoMercator().center([107.70084090820312, 29.942008602258]).scale(1740).translate([0, 0]);
+		// 遍历省份构建模型
+		chinaJson.features.forEach(elem => {
+			const province = new THREE.Object3D()
+			const coordinates = elem.geometry.coordinates
+			const properties = elem.properties;
+			//这里创建光柱
+			const [name,info] = initLightPoint(properties,projection)
+			coordinates.forEach(multiPolygon => {
+				multiPolygon.forEach(polygon => {
+					const positions = [];
+					var colors = [];
+					const color = new THREE.Color();
+					const shape = new THREE.Shape()
+					const extrudeSettings = {
+						depth: 2,  //该属性指定图形可以拉伸多高，默认值是100
+						bevelEnabled: false, //是否给这个形状加斜面，默认加斜面。
+					};
+					var linGeometry = new LineGeometry();
+					for (let i = 0; i < polygon.length; i+=1) {
+						const [x, y] = projection(polygon[i])
+						positions.push(x, -y, 4.01);
+						color.setHSL( 1 , 1, 1 );
+						colors.push( color.r, color.g, color.b );
+						if (i === 0) {
+							shape.moveTo(x, -y)
+						}
+						shape.lineTo(x, -y);
+					}
+					const material = new THREE.MeshPhongMaterial({
+						map: textureMap,
+						displacementMap: texturedispMap,
+						displacementScale: .5,
+						color: getAreaColor(properties.name),
+						combine: THREE.MultiplyOperation,
+						transparent: true,
+						opacity: .9,
+					});
+					const material1 = new THREE.MeshLambertMaterial({ color: '#0088e6', transparent: true, opacity: 0.8 })
+					const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
+					const mesh = new THREE.Mesh(geometry,  [material, material1])
+					mesh.rotateX(-Math.PI/2)
+					mesh.position.set(0,1.5,-3)
+					meshArrs.add(mesh)
+					meshs.push(mesh)
+					mesh.on('click', () => {
+            if (properties.name !== activeArea.value) {
+              activeArea.value = properties.name
+              ctx.emit('selectArea', properties.name)
+            } else {
+              if (activeArea.value === "") {
+                activeArea.value = properties.name
+              ctx.emit('selectArea', properties.name)
+              } else {
+                activeArea.value = ""
+                ctx.emit('selectArea', "重庆市")
+              }
+            }
+					})
+					mesh.on('mouseover', () => {
+            info.element.innerHTML = props.formatter(mapData.value[properties.name])
+						info.visible = true
+					})
+					mesh.on('mouseout', () => {
+						info.visible = false
+					})
+          cacheMap.set(properties.name, {
+            mesh,
+            name,
+            info
+          })
+
+					//Line2
+					linGeometry.setPositions( positions );
+					linGeometry.setColors( colors );
+					const line = new Line2( linGeometry, matLine );
+					const line2 = new Line2( linGeometry, matLine2 );
+					line.computeLineDistances();
+					line.rotateX(-Math.PI/2)
+					line2.rotateX(-Math.PI/2)
+					line.position.set(0,0.1,-3)
+					line2.position.set(0,-3.5,-3)
+					line2.computeLineDistances();
+					line.scale.set( 1, 1, 1 );
+					province.add(line)
+					province.add(line2)
+				})
+			})
+			map.add(province)
+			map.add(meshArrs)
+		})
+		scene.add(map)
+	}
+
+	function initLightPoint(properties,projection){
+		let lightCenter = properties.centroid || properties.center;
+		let areaName =properties.name;
+		// projection用来把经纬度转换成坐标
+		const [x, y]=projection(lightCenter)
+		//这里创建坐标
+		return [createTextPoint(x,y,areaName) , createInfoWindow(x,y, areaName) ];
+	}
+
+
+
+  /**
+	 * @param {*} x
+	 * @param {*} z
+	 * @param {*} areaName 地区名称
+	 */
+	function createTextPoint(x,z,areaName){
+		let tag = document.createElement('div')
+		tag.innerHTML = areaName
+		// tag.className = className
+		tag.style.pointerEvents = 'none'
+		// tag.style.visibility = 'hidden'
+		tag.style.position = 'absolute'
+		tag.style.color = '#fff'
+		let label = new CSS2DObject(tag)
+		label.element.innerHTML = areaName
+		label.element.style.visibility = 'visible'
+		label.position.set(x,5.01,z)
+		label.position.z-=3
+		scene.add(label)
+		return label;
+	}
+
+	function createInfoWindow(x, z, areaName) {
+		let tag = document.createElement('div')
+		tag.innerHTML = areaName
+		tag.style.pointerEvents = 'none'
+		tag.style.position = 'absolute'
+		tag.style.border = '1px solid rgba(61, 115, 255, 0.72)'
+    tag.style.borderRadius = '4px'
+		tag.style.backgroundColor = '#000000'
+		tag.style.color = '#fff'
+		let label = new CSS2DObject(tag)
+		label.element.innerHTML = ""
+		label.element.style.visibility = 'visible'
+		label.position.set(x,20,z)
+		label.position.z-=3
+		label.visible = false
+		scene.add(label)
+		return label;
+	}
+
+
+    return {
+      mapTestBox
+    }
+  }
+}
+</script>
+
+<template >
+  <div ref="mapTestBox" class="map-chart-3d"></div>
+</template>
+
+<style scoped lang='less'>
+.map-chart-3d {
+  width: 100%;
+  height: 100%;
+}
+</style>

app/src/router/index.js

@@ -100,14 +100,9 @@ const router = new VueRouter({
       component: H5
     },
     {
-      path: "/test/three",
-      name: "three",
-      component: () => import('@/views/Test/three.vue')
-    },
-    {
-      path: "/test/menu",
-      name: "menu",
-      component: () => import('@/views/Test/menu.vue')
+      path: "/test/map",
+      name: "map",
+      component: () => import('@/views/Test/map.vue')
     }
   ],
 });

app/src/utils/index.js

@@ -104,7 +104,7 @@ export const formatCityData = (data) =>  {
 export function createMapChartWindowInfo(ctx, render) {
   return `<div>
     <div style="background: url('${titleBg}') center center no-repeat;
-    color: #ffb800;font-size: 16px;
+    color: #ffb800;font-size: 20px;
     font-style: normal;
     font-weight: 400;padding: 5px;">${ctx.title}</div>
     <div style="padding: 5px;" >${render()}</divs>

app/src/views/Home/index.vue

@@ -26,14 +26,22 @@
     </div>
     <div class="display: flex;">
       <div class="map" style="position: relative">
-        <MapChartsCategory
+        <!-- <MapChartsCategory
           :mapHeatData="heatMap"
           :formatter="showLabel"
           :qx="qy"
           @selectArea="(area) => (qy = area)"
-        />
+        /> -->
+        <div style="position: relative; width: 100%; height: 632px;">
+          <MapChart3D
+            :mapHeatData="heatMap"
+            :formatter="showLabel"
+            :qx="qy"
+            @selectArea="(area) => (qy = area)"
+          />
+        </div>
         <div style="position: absolute; top: 10px; width: 500px">
-          <SearchBox :area.sync="qy" />
+          <SearchBox :area="qy" @update:area="e => qy = e" />
         </div>
         <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
       </div>
@@ -136,6 +144,7 @@ import {
 import { fxfb } from "@/api/risk";
 import { formatCityData, createMapChartWindowInfo } from "@/utils";
 import MessageTipModalContent from "@/components/MessageTipModalContent.vue";
+import MapChart3D from '@/components/MapChart3D/index.vue'
 
 export default {
   name: "HomePage",
@@ -152,6 +161,7 @@ export default {
     SearchBox,
     zzglModul,
     MessageTipModalContent,
+    MapChart3D
   },
   data() {
     return {
@@ -222,7 +232,7 @@ export default {
           title: params.name,
         },
         () => {
-          const item = params.data.meta;
+          const item = params.meta;
           let res = `
           <table>
             <tr >

app/src/views/Test/map.vue

@@ -0,0 +1,24 @@
+<script>
+import MapChart3D from '@/components/MapChart3D/index.vue'
+
+// 
+export default {
+  name: 'Test3DMapChart',
+  components: {
+    MapChart3D
+  }
+}
+</script>
+
+<template >
+  <div class="map-test-page">
+    <MapChart3D />
+  </div>
+</template>
+
+<style lang='less'>
+.map-test-page {
+  height: 400px;
+  width: 1000px;
+}
+</style>

app/src/views/Test/menu.vue

@@ -1,237 +0,0 @@
-<script>
-import { defineComponent, ref, unref, onMounted, getCurrentInstance } from 'vue'; 
-import * as echarts from 'echarts';
-import 'echarts-gl';
-import cq from '@/assets/json/cq.json';
-import bg from '@/assets/images/bg1.jpg';
-import { formatCityData } from '@/utils'
-
-export default defineComponent({
-  name: 'MapChart1',
-  setup() {
-    const mapChart = ref()
-    const area = ref()
-
-    const { proxy } = getCurrentInstance()
-
-
-    onMounted(() => {
-      mapChart.value = echarts.init(proxy.$refs.mapDom)
-      echarts.registerMap('chongqing', cq)
-      const option = {
-          tooltip: {
-            trigger: "item",
-            position: "top",
-            backgroundColor: "rgba(0, 0, 0, 0.82)",
-            textStyle: {
-              color: "#33F0FF",
-            },
-            extraCssText: `z-index: 1000;margin:0px;padding:0px;
-    border: 1px solid rgba(61, 115, 255, 0.72);`,
-            borderWidth: 0,
-          },
-        geo3D: [
-          {
-            show: true,
-            map: 'chongqing',
-            regions: [
-            ],
-            regionHeight: 5,
-            shading: 'realistic',
-            realisticMaterial: {
-              detailTexture: ((bg) => {
-                const img = document.createElement('img')
-                img.src = bg
-                return img
-              })(bg),
-              textureTiling: 1,
-            },
-            light: {
-              //光照阴影
-              main: {
-                color: "#fff", //光照颜色
-                intensity: .7, //光照强度
-                shadow: true, //是否显示阴影
-                alpha: 60,
-                beta: 10
-              },
-              ambient: {
-                intensity: 0.6
-              }
-            },
-            viewControl: {
-              distance: 150,
-              maxDistance: 150,
-              alpha: 50
-            },
-            emphasis: {
-              label: {
-                formatter: function (params) {
-                  area.value=params.name;
-                  return "";
-                },
-                show: true
-              }
-            },
-          },
-        ],
-        series: [
-        {
-            type: 'map3D',
-            show: true,
-            map: 'chongqing',
-            regionHeight: 5,
-            itemStyle: {
-              color: '#00000020',
-              opacity: 1,
-              borderWidth: 2,
-              borderColor: "#aaa"
-            },
-            label: {
-              show: true,
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-                fontWeight: 'bold'
-              },
-            },
-            viewControl: {
-              distance: 150,
-              maxDistance: 150,
-              alpha: 50
-            },
-            data: formatCityData([]).map((item, index) => ({
-                ...item,
-              itemStyle: {
-                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
-              },
-            }))
-          }
-        ]
-      }
-      // bg
-      unref(mapChart).setOption(option)
-      unref(mapChart).off('click');
-      // 点击事件
-      unref(mapChart).getZr().on("click",  (params) => {
-        mapChart.value.setOption({
-          tooltip: {
-            trigger: "item",
-            position: "top",
-            backgroundColor: "rgba(0, 0, 0, 0.82)",
-            textStyle: {
-              color: "#33F0FF",
-            },
-            extraCssText: `z-index: 1000;margin:0px;padding:0px;
-    border: 1px solid rgba(61, 115, 255, 0.72);`,
-            borderWidth: 0,
-          },
-          geo3D: [
-          {
-            show: true,
-            map: 'chongqing',
-            regions: [
-            ],
-            regionHeight: 5,
-            shading: 'realistic',
-            realisticMaterial: {
-              detailTexture: ((bg) => {
-                const img = document.createElement('img')
-                img.src = bg
-                return img
-              })(bg),
-              textureTiling: 1,
-            },
-            light: {
-              //光照阴影
-              main: {
-                color: "#fff", //光照颜色
-                intensity: .7, //光照强度
-                shadow: true, //是否显示阴影
-                alpha: 60,
-                beta: 10
-              },
-              ambient: {
-                intensity: 0.6
-              }
-            },
-            viewControl: {
-              distance: 150,
-              maxDistance: 150,
-              alpha: 50
-            },
-            emphasis: {
-              label: {
-                formatter: function (params) {
-                  area.value=params.name;
-                  return '';
-                },
-                show: true
-              }
-            },
-          },
-        ],
-          series: [
-            {
-            type: 'map3D',
-            show: true,
-            map: 'chongqing',
-            regionHeight: 5,
-            itemStyle: {
-              color: '#00000020',
-              opacity: 1,
-              borderWidth: 2,
-              borderColor: "#aaa"
-            },
-            label: {
-              show: true,
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-                fontWeight: 'bold'
-              },
-            },
-            viewControl: {
-              distance: 150,
-              maxDistance: 150,
-              alpha: 50
-            },
-              data: formatCityData([]).map((item, index) => ({
-                ...item,
-              itemStyle: {
-                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
-              },
-              })).map((item, index) => item.name === area.value ? ({
-          ...item,
-          itemStyle: {
-            color:  ['#ff0000', '#ffff00', '#ffaa00', '#00ff00', '#0000ff'][index % 5]
-          }
-        }) : item)
-            }
-          ]
-        })
-      }, {
-        notMerge: true
-      })
-    })
-
-    return {
-
-    }
-  }
-})
-</script>
-
-<template >
-  <div class="map-charts" ref="mapDom"></div>
-</template>
-
-<style lang='less'>
-body,html {
-  // background-color: aliceblue;
-}
-.map-charts {
-  width: 100vw;
-  height: 100vh;
-}
-</style>