1.大屏端增加准格尔旗的区域点击高亮功能;

public/assets/json/road.qmd

+<!DOCTYPE qgis PUBLIC 'http://mrcc.com/qgis.dtd' 'SYSTEM'>
+<qgis version="3.40.5-Bratislava">
+  <identifier></identifier>
+  <parentidentifier></parentidentifier>
+  <language></language>
+  <type>dataset</type>
+  <title></title>
+  <abstract></abstract>
+  <links/>
+  <dates/>
+  <fees></fees>
+  <encoding></encoding>
+  <crs>
+    <spatialrefsys nativeFormat="Wkt">
+      <wkt>GEOGCRS["WGS 84",ENSEMBLE["World Geodetic System 1984 ensemble",MEMBER["World Geodetic System 1984 (Transit)"],MEMBER["World Geodetic System 1984 (G730)"],MEMBER["World Geodetic System 1984 (G873)"],MEMBER["World Geodetic System 1984 (G1150)"],MEMBER["World Geodetic System 1984 (G1674)"],MEMBER["World Geodetic System 1984 (G1762)"],MEMBER["World Geodetic System 1984 (G2139)"],MEMBER["World Geodetic System 1984 (G2296)"],ELLIPSOID["WGS 84",6378137,298.257223563,LENGTHUNIT["metre",1]],ENSEMBLEACCURACY[2.0]],PRIMEM["Greenwich",0,ANGLEUNIT["degree",0.0174532925199433]],CS[ellipsoidal,2],AXIS["geodetic latitude (Lat)",north,ORDER[1],ANGLEUNIT["degree",0.0174532925199433]],AXIS["geodetic longitude (Lon)",east,ORDER[2],ANGLEUNIT["degree",0.0174532925199433]],USAGE[SCOPE["Horizontal component of 3D system."],AREA["World."],BBOX[-90,-180,90,180]],ID["EPSG",4326]]</wkt>
+      <proj4>+proj=longlat +datum=WGS84 +no_defs</proj4>
+      <srsid>3452</srsid>
+      <srid>4326</srid>
+      <authid>EPSG:4326</authid>
+      <description>WGS 84</description>
+      <projectionacronym>longlat</projectionacronym>
+      <ellipsoidacronym>EPSG:7030</ellipsoidacronym>
+      <geographicflag>true</geographicflag>
+    </spatialrefsys>
+  </crs>
+  <extent/>
+</qgis>

src/views/gdMap/map.js

@@ -28,6 +28,9 @@ import {
   AddEquation,
   DstColorFactor,
   OneFactor,
+  FileLoader,
+  Shape,
+  ExtrudeGeometry,
 } from "three"
 import {
   Mini3d,
@@ -136,7 +139,7 @@ export class World extends Mini3d {
     // 旋转圆环
     this.createRotateBorder()
     // 创建标签
-    this.createLabel()
+    this.createLabel(this.mapFocusLabelInfo)
     // 创建地图
     this.createMap()
     // 添加事件
@@ -154,7 +157,9 @@ export class World extends Mini3d {
     // 创建轮廓
     this.createStorke()
     // 创造3d地形
-    this.createTerrain()
+    // this.createTerrain()
+    // 创造geoJson图
+    // this.createGeoJson()
     // this.time.on("tick", () => {
     //   console.log(this.camera.instance.position);
     // });
@@ -416,6 +421,7 @@ export class World extends Mini3d {
     mapLine.setParent(focusMapGroup)
     focusMapGroup.position.set(0, 0, -0.01)
     focusMapGroup.scale.set(1, 1, 0)
+    focusMapGroup.name = "focusMapGroup"
     mapGroup.add(focusMapGroup)
     mapGroup.rotation.x = -Math.PI / 2
     mapGroup.position.set(0, 0.2, 0)
@@ -498,6 +504,7 @@ export class World extends Mini3d {
       renderOrder: 2,
     })
     mapTop.mapGroup.children.map((group) => {
+      group.name = group.userData.name
       group.children.map((mesh) => {
         if (mesh.type === "Mesh") {
           this.eventElement.push(mesh)
@@ -724,7 +731,25 @@ export class World extends Mini3d {
     this.eventElement.map((mesh) => {
       this.interactionManager.add(mesh)
       mesh.addEventListener("mousedown", (ev) => {
-        console.log(ev.target.userData.name)
+        let countryName = ev.target.userData.name
+        this.countryData = ev.target.parent.parent.children
+        if(ev.originalEvent.buttons === 1) {
+          console.log("label",this.label112)
+          this.focusMapGroup.children[0].visible = false
+          this.countryData.map((item) => {
+            // console.log("this.mapFocusLabel",this.mapFocusLabel)
+            if (item.name != countryName) {
+              item.visible = false // 隐藏其他区域
+            } else {
+              console.log("item",item)
+              item.visible = true // 显示被点击的区域
+              const [x, y] = this.geoProjection([109.840171, 38.864362])
+              // console.log("mapFocusLabel",this.mapFocusLabel)
+              this.mapFocusLabel.element.innerHTML = `<div class="other-label" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);"><span>${item.name}</span><span>ZHUNGEERQI</span></div>`
+              // this.mapFocusLabel.position.set(x, -y, 0.4);
+            }
+          })
+        }
       })
       mesh.addEventListener("mouseover", (event) => {
         if (!objectsHover.includes(event.target.parent)) {
@@ -742,6 +767,15 @@ export class World extends Mini3d {
         document.body.style.cursor = "default"
       })
     })
+    document.addEventListener("contextmenu",(event) => {
+      this.focusMapGroup.children[0].visible = true 
+      if(this.countryData.length > 0) {
+        this.countryData.map((item) => {
+          item.visible = true // 显示所有区域
+          this.mapFocusLabel.element.innerHTML = `<div class="other-label" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);"><span>准格尔旗</span><span>ZHUNGEER QI</span></div>`
+        })
+      }
+    })
   }
   createHUIGUANG(h, color) {
     let geometry = new PlaneGeometry(0.35, h)
@@ -898,7 +932,7 @@ export class World extends Mini3d {
     this.scene.add(mesh)
   }
 
-  createLabel() {
+  createLabel(val) {
     let self = this
     let labelGroup = this.labelGroup
     let label3d = this.label3d
@@ -908,9 +942,9 @@ export class World extends Mini3d {
       let label = labelStyle01(province, label3d, labelGroup)
       otherLabel.push(label)
     })
-    let mapFocusLabel = labelStyle02(
+    this.mapFocusLabel = labelStyle02(
       {
-        ...this.mapFocusLabelInfo,
+        ...val,
       },
       label3d,
       labelGroup
@@ -937,7 +971,7 @@ export class World extends Mini3d {
       label3d,
       labelGroup
     )
-    otherLabel.push(mapFocusLabel)
+    otherLabel.push(this.mapFocusLabel)
     otherLabel.push(iconLabel1)
     otherLabel.push(iconLabel2)
     this.otherLabel = otherLabel
@@ -1280,9 +1314,6 @@ export class World extends Mini3d {
   }
   // 创建地形模型
   createTerrain() {
-    console.log("this.terrainResource",this.terrainResource);
-    // let terrainData = this.assets.instance.getResource("mapTerrain");
-    // console.log("terrainData", terrainData);
     this.pngTexture = this.terrainResource.loaders.Texture.load("../../../public/assets/json/TrueColorImage.png");
     this.pngTexture.flipY = false;
     this.terrainResource.loaders.GLTF.load("../../../public/assets/json/Scene_cq15_200.gltf",
@@ -1290,7 +1321,6 @@ export class World extends Mini3d {
         let terrain = gltf.scene;
         // 调整 GLTF 模型的缩放比例和位置
         terrain.scale.set(17, 17, 17);
-        // console.log("this.depth", this.depth);
         // 根据需要调整位置
         terrain.position.set(-0.8, this.depth + 1.1, 0.9);
         terrain.traverse((node) => {
@@ -1315,7 +1345,95 @@ export class World extends Mini3d {
     )
     // this.scene.add(barGroup)
   }
+  // 创建geoJson
+  createGeoJson() {
+    this.FileLoader = new FileLoader()
+    this.FileLoader.load("../../../public/assets/json/road.geojson", (data) => { 
+      let jsonData = JSON.parse(data)
+      console.log("jsonData", jsonData);
+      const roadGeoJson = new Group();
+      const roadProjection = geoMercator().center(this.geoProjectionCenter)
+      // 遍历Json的feature
+      jsonData.features.forEach((feature,i)=>{
+        // 获取feature中的geometry数据，方便引用
+          const geometry = feature.geometry;
+          const type = geometry.type;
+          // 创建分组，把同一个市的形状放在一个分组，便于管理
+          const city = new Group();
+          if(type === 'LineString'){
+          // 遍历geometry中的数据
+          geometry.coordinates.forEach((multipolygon)=>{
+          // 创建形状，用于展示地理形状
+            const shape = new Shape()
+            // 存储每个坐标，用于绘制边界线
+            const arr = []
+            multipolygon.forEach((polygon)=>{
+              polygon.forEach((item,index) => {
+              // 使用d3转换坐标
+                const [x,y]= roadProjection.translate([0,0])(item);
+                // 根据转换后的坐标绘制形状
+                if(index === 0){
+                  shape.moveTo(x,y)
+                }else {
+                  shape.lineTo(x,y)
+                }
+                arr.push(x,y,3)
+              });
+            })
+            console.log("arr", arr);
+            // 绘制边界线
+            createLine(arr,city)
+            // 创建 ExtrudeGeometry用于显示3d效果
+            const extrudGeometry = new ExtrudeGeometry(shape,{
+                depth:2 // 地图的厚度
+              })
+              // 创建材质，用于显示地图的外观
+              const material = new MeshBasicMaterial({
+                color:'#ffff33'
+              });
+              // 创建物体，用于显示地图
+              const mesh = new Mesh(extrudGeometry,material)
+              mesh.position.set(0,0,0)
+              // 添加到分组
+              city.add(mesh)
+          })
+        }
+        // 添加到分组
+        roadGeoJson.add(city)
+      })
+      this.scene.add(roadGeoJson);
+    })
+  }
+
+  // 跳转到指定group 
+  zoomToFocusMapGroup(group) {
+    // 创建一个 Box3 来计算 focusMapGroup 的边界盒
+    const box = new THREE.Box3().setFromObject(group);
 
+    // 获取边界盒的中心点和大小
+    const center = new THREE.Vector3();
+    const size = new THREE.Vector3();
+    box.getCenter(center);
+    box.getSize(size);
+
+    // 计算摄像机距离，确保整个对象都在视野内
+    const maxDim = Math.max(size.x, size.y, size.z);
+    const fov = this.camera.instance.fov * (Math.PI / 180); // 摄像机视野角度（弧度）
+    let distance = maxDim / (2 * Math.tan(fov / 2));
+
+    // 增加一些缓冲距离
+    distance *= 1.2;
+
+    // 设置摄像机位置（沿着 Z 轴方向）
+    const cameraPosition = center.clone().add(new THREE.Vector3(0, 0, distance));
+    this.camera.instance.position.copy(cameraPosition);
+
+    // 让摄像机看向 focusMapGroup 的中心
+    this.camera.instance.lookAt(center);
+
+    // 更新摄像机矩阵
+    this.camera.instance.updateProjectionMatrix();
+  }
   geoProjection(args) {
     return geoMercator().center(this.geoProjectionCenter).scale(this.geoProjectionScale).translate([0, 0])(args)
   }