bufen

src/components/Scene.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { setScene } from './script'
+// @ts-ignore
+import { setScene } from './script.js'
 
 onMounted(() => {
     setScene(document.querySelector('.three-js-scene'))

src/components/script.js

@@ -90,18 +90,17 @@ function animateTexture() {
     requestAnimationFrame(animateTexture)
 }
 animateTexture()
-
 function createGeo(geoJson) {
 
     const group = new THREE.Group()
     group.info = geoJson
 
     // 材质
+
     const materials = [
         new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff, transparent: true, metalness: 0.5, roughness: 0.5 }),
         new THREE.MeshBasicMaterial({ map: texture, color: 0xffffff * Math.random() }),
     ]
-
     // 遍历添加各个地块
     geoJson.features.forEach((info) => {
 
@@ -111,6 +110,8 @@ function createGeo(geoJson) {
 
         // 行政区块组
         const areaGroup = new THREE.Group()
+        console.log(info.properties.adcode);
+
         areaGroup.info = info
         areaGroup.name = info.properties?.name
         group.add(areaGroup)
@@ -142,12 +143,12 @@ function createGeo(geoJson) {
 }
 
 // 坐标转换
-function coordToVector(coord, type = 2, slace = 10000) {
+function coordToVector(coord, type = 2, scale = 10000) {
     const [lng, lat] = coord
     const x = lng * 20037508.34 / 180
     let y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180)
     y = y * 20037508.34 / 180
-    return type === 2 ? new THREE.Vector2(x / slace, y / slace) : new THREE.Vector3(x / slace, y / slace, 0)
+    return type === 2 ? new THREE.Vector2(x / scale, y / scale) : new THREE.Vector3(x / scale, y / scale, 0)
 }