import * as THREE from 'three';
|
import * as d3 from 'd3';
|
import mapData from '@/assets/map/zigong2.json';
|
|
import textureMap from '@/assets/map/texture/map_texture.jpg';
|
|
// 地图深度
|
const MAP_DEPTH = 0.2;
|
|
const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]);
|
export default class Map {
|
constructor(experience) {
|
this.experience = experience;
|
this.scene = this.experience.scene;
|
this.material = null;
|
this.operationData(mapData);
|
}
|
operationData(jsondata) {
|
const loader = new THREE.TextureLoader();
|
loader.load(textureMap,
|
(texture) => {
|
this.material = new THREE.MeshBasicMaterial({
|
map: texture
|
});
|
|
this.map = new THREE.Object3D();
|
// geo信息
|
const features = jsondata.features;
|
features.forEach((feature) => {
|
// 单个省份 对象
|
const province = new THREE.Object3D();
|
// 地址
|
province.properties = feature.properties.name;
|
// 多个情况
|
if (feature.geometry.type === "GeometryCollection") {
|
feature.geometry.geometries.forEach((coordinate) => {
|
coordinate.coordinates.forEach((rows) => {
|
const line = this.drawBoundary(rows);
|
const mesh = this.drawExtrudeMesh(rows);
|
province.add(line);
|
province.add(mesh);
|
});
|
});
|
}
|
|
// 单个情况
|
if (feature.geometry.type === "Polygon") {
|
feature.geometry.coordinates.forEach((coordinate) => {
|
const line = this.drawBoundary(coordinate);
|
const mesh = this.drawExtrudeMesh(coordinate);
|
province.add(line);
|
province.add(mesh);
|
});
|
}
|
this.map.add(province);
|
this.map.position.set(0.001, 0, 0.1);
|
this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
|
});
|
this.container = new THREE.Object3D();
|
this.container.add(this.map);
|
this.scene.add(this.container);
|
console.log(this.container);
|
}
|
)
|
}
|
drawBoundary(polygon) {
|
const points = [];
|
for (let i = 0; i < polygon.length; i++) {
|
const [x, y] = projection(polygon[i]);
|
points.push(new THREE.Vector3(x, -y, 0));
|
}
|
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
|
const lineMaterial = new THREE.LineBasicMaterial({
|
color: 'yellow'
|
});
|
const line = new THREE.Line(lineGeometry, lineMaterial);
|
line.translateZ(MAP_DEPTH);
|
return line;
|
}
|
|
drawExtrudeMesh(polygon) {
|
const shape = new THREE.Shape();
|
|
for (let i = 0; i < polygon.length; i++) {
|
const [x, y] = projection(polygon[i]);
|
|
if (i === 0) {
|
shape.moveTo(x, -y);
|
}
|
|
shape.lineTo(x, -y);
|
}
|
|
const geometry = new THREE.ExtrudeGeometry(shape, {
|
depth: MAP_DEPTH,
|
bevelEnabled: false,
|
});
|
|
const material = new THREE.MeshBasicMaterial({
|
color: '#525288',
|
transparent: true,
|
opacity: 1,
|
})
|
|
|
console.log(geometry);
|
|
|
return new THREE.Mesh(geometry, this.material);
|
}
|
}
|
