nicolas/three_china
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改
All checks were successful
Deploy / test (push) Successful in 3s
Details

Browse Source
This commit is contained in:
nicomacbookpro 2025-06-18 13:56:30 +08:00
parent 3746494c32
commit 8f026a7268
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/script.js
View File

@ -7,9 +7,10 @@ const PAEAMS = { DEPTH: 6, coordsMaxCounts: 500 }
const fetchJson = (url) => fetch(url).then((res) => res.json()) const fetchJson = (url) => fetch(url).then((res) => res.json())
import chinajson from '@/assets/china.json?url' import chinajson from '@/assets/china.json?url'
let scene = null
export async function setScene(DOM) { export async function setScene(DOM) {
const scene = new THREE.Scene() scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(50, DOM.clientWidth / DOM.clientHeight, 0.1, 100000000) const camera = new THREE.PerspectiveCamera(50, DOM.clientWidth / DOM.clientHeight, 0.1, 100000000)
camera.position.set(0, 600, 200) camera.position.set(0, 600, 200)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
@ -81,6 +82,7 @@ function clickEvent(camera, controls, DOM, rootGroup) {
} }
import textureMap from '@/assets/texture.png?url' import textureMap from '@/assets/texture.png?url'
import zhejiang from '@/assets/map/zhejiang_top_surface.jpg?url'
// 创建地图 // 创建地图
const texture = new THREE.TextureLoader().load(textureMap) const texture = new THREE.TextureLoader().load(textureMap)
texture.wrapT = THREE.RepeatWrapping texture.wrapT = THREE.RepeatWrapping
@ -110,15 +112,39 @@ function createGeo(geoJson) {
// 行政区块组 // 行政区块组
const areaGroup = new THREE.Group() const areaGroup = new THREE.Group()
console.log(info.properties.adcode);
areaGroup.info = info areaGroup.info = info
areaGroup.name = info.properties?.name areaGroup.name = info.properties?.name
group.add(areaGroup) group.add(areaGroup)
if (info.geometry.type === 'MultiPolygon') info.geometry.coordinates.forEach((j) => j.forEach((z) => areaGroup.add(createShapeWithCoord(z, materials)))) if (info.geometry.type === 'MultiPolygon') info.geometry.coordinates.forEach((j) => j.forEach((z) => areaGroup.add(createShapeWithCoord(z, materials))))
else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials))) else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials)))
if (info.properties.adcode === 330000) {
const box = new THREE.Box3().setFromObject(areaGroup.clone())
//const helper = new THREE.Box3Helper(box, 0xff0000)
// areaGroup.add(helper)
// 实例化浙江省上表面
// box上面四个点
// const topPoints = [
// new THREE.Vector3(box.min.x, box.max.y, box.max.z),
// new THREE.Vector3(box.max.x, box.max.y, box.max.z),
// new THREE.Vector3(box.max.x, box.min.y, box.max.z),
// new THREE.Vector3(box.min.x, box.min.y, box.max.z),
// ]
// 四个点生成面 plane
const zhejiangTexture = new THREE.TextureLoader().load(zhejiang)
const topPlane = new THREE.PlaneGeometry(box.max.x - box.min.x, box.max.y - box.min.y)
const topMaterial = new THREE.MeshBasicMaterial({ map: zhejiangTexture })
const topMesh = new THREE.Mesh(topPlane, topMaterial)
topMesh.position.z += PAEAMS.DEPTH || 2
topMesh.position.copy(box.getCenter(new THREE.Vector3()))
topMesh.position.z = topMesh.position.z + box.max.z / 2
areaGroup.add(topMesh)
}
const div = document.createElement('div') const div = document.createElement('div')
div.innerHTML = info.properties?.name div.innerHTML = info.properties?.name
div.style.color = '#dbdbdb' div.style.color = '#dbdbdb'