"d3": "^7.9.0",
"three": "^0.169.0",
"vue": "^3.5.10"
地图数据来源: DataV.GeoAtlas地理小工具系列
<script setup>
import {onMounted, ref} from 'vue'
import * as THREE from 'three'
import * as d3 from "d3"; //莫开托坐标 矫正地图坐标
import map from './constant/map.json'
// 引入轨道控制器扩展库OrbitControls.js
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
// 拿到页面的宽高
const width = window.innerWidth, height = window.innerHeight;
// d3投影转换函数 (109, 34.5 中心点位置)
const handleProject = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0])
// 存储地图容器
const mapContainer = new THREE.Object3D()
// 创建场景
const scene = new THREE.Scene();
// 将背景颜色设置为白色
scene.background = new THREE.Color("#000000");
// 创建相机
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
// 设置相机位置
camera.position.z = 1000;
// // 辅助线 AxesHelper
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
//阻尼 更真实
controls.enableDamping = true
// 地图数据处理
const initGeom = () => {
// 将地图数据显示在屏幕上
// 如果是服务器返回的数据,需要先将数据转为geojson格式 这里默认用的本地数据
handleData(map)
}
const handleData = (jsonData) => {
const featureList = jsonData.features;
featureList.forEach((feature) => {
// 创建省的容器
const province = new THREE.Object3D;
// 省份名称
province.properties = feature.properties.name
province.name = feature.properties.name // 省份名称
mapContainer.name = feature.properties.name // 省份名称
// 省份坐标信息
const coordinates = feature.geometry.coordinates
if (feature.geometry.type === 'MultiPolygon') {
coordinates.forEach((cord) => {
// coordinate 就是边界素组坐标系
cord.forEach((coordinate) => {
// 三维多边形
const extrudeMesh = creatDepthPolygon(coordinate)
// 给extrudeMesh对象加一个自定义的属性(properties)用来存放省份名称
extrudeMesh.properties = feature.properties.name
// 绘制省份边缘线条
const line = createLine(coordinate);
// 将面加入3d 中
province.add(extrudeMesh)
// 将线加入3d 中
province.add(line)
})
})
}
if (feature.geometry.type === 'Polygon') {
coordinates.forEach((coordinate) => {
// 三维多边形
const extrudeMesh = creatDepthPolygon(coordinate)
extrudeMesh.properties = feature.properties.name
// 线条
const line = createLine(coordinate);
province.add(extrudeMesh)
province.add(line)
})
}
// 将每个省份的容器加入到地图容器中
mapContainer.add(province)
})
// 将地图容器加入到场景中
scene.add(mapContainer)
}
// 创建三维多边形(也就是每个省份的地图)
const creatDepthPolygon = (coordinate) => {
const shape = new THREE.Shape();
// 每一个item都是省份边界坐标 需要把 json 的坐标系 转化为d3的坐标系 例如:[117.429915,40.576141]
coordinate.forEach((item, index) => {
const [x_XYZ, y_XYZ] = handleProject(item)
if (index === 0) {
// moveTo 的主要作用是定义形状的起点位置
shape.moveTo(x_XYZ, -y_XYZ)
} else {
// 依次按照坐标 形成一个多边形
shape.lineTo(x_XYZ, -y_XYZ)
}
})
const extrudeSettings = {
steps: 2,
depth: 16,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
// ExtrudeGeometry 创建一个多边形
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings) //挤压缓冲几何体
// 设置每个身份的背景颜色
const material = new THREE.MeshBasicMaterial({
// color: new THREE.Color(Math.random() * 0xffffff), // 每个省随机赋色
color: '#d13a34',
transparent: true,
opacity: 0.6
})
return new THREE.Mesh(geometry, material)
}
// 创建省份边界线条
const createLine = (coordinate) => {
const material = new THREE.LineBasicMaterial({
color: '#ffffff'
});
const points = []
coordinate.forEach((item, index) => {
// 每一个item都是省份边界坐标 需要把 json 的坐标系 转化为d3的坐标系 例如:[117.429915,40.576141]
const [x_XYZ, y_XYZ] = handleProject(item)
points.push(new THREE.Vector3(x_XYZ, -y_XYZ, 25))
})
const geometry = new THREE.BufferGeometry().setFromPoints(points);
return new THREE.Line(geometry, material);
}
// 渲染页面
const render = () => {
// 将场景(scene)和摄像机(camera 加入进来)
renderer.render(scene, camera)
// 渲染下一帧的时候会调用render函数
requestAnimationFrame(render)
controls.update()
}
const initLight = () => {
// 基本光源
const ambLight = new THREE.AmbientLight('#ffffff', 0.3)
/**
* 设置聚光灯相关的的属性
*/
const spotLight = new THREE.SpotLight(0xFFFFFF); // 聚光灯
spotLight.position.set(40, 200, 10);
spotLight.castShadow = true; // 只有该属性为true时,该点光源允许产生阴影,并且下列属性可用
scene.add(ambLight, spotLight); // 向场景中添加光源
}
onMounted(() => {
// 添加物体到场景
initGeom()
// 渲染
render()
// 设置环境光
initLight()
// 将渲染加入到页面上
document.body.appendChild(renderer.domElement);
})
</script>
<template>
<div id="info"></div>
</template>
<style scoped>
</style>