threejs创建3D地图
下载地图的json，这里我们可以在阿里云数据平台上进行下载
2.在代码中解析下载的json
const fileloader = new THREE.FileLoader();
fileloader.load('/china.json',(res)=>{
res=JSON.parse(res)
createMap(res)
})
3.得到的坐标点是经纬度，所以我们要把它转为二维坐标，这里使用插件d3
const projection = d3
.geoMercator() //地图投影方式(用于绘制球形墨卡托投影)
.center([108.5525, 34.3227]) //地图中心点经纬度坐标
.scale(84) //缩放
.translate([0, 0]); //移动地图位置
4.生成地图
let chinaObj = new THREE.Object3D();
const edgeMaterial = new THREE.LineBasicMaterial({
color: 0xffffff,
blending: THREE.AdditiveBlending,
});
const extrudeMats = [
new THREE.MeshStandardMaterial({
color: new THREE.Color(0x0000ff),
transparent: true,
opacity: 0.85,
blending: THREE.AdditiveBlending,
}),
new THREE.MeshStandardMaterial({
color: new THREE.Color(0x0000ff),
transparent: true,
opacity: 0.35,
blending: THREE.AdditiveBlending,
}),
];
function createMap(res) {
res = JSON.parse(res);
res.features.forEach((province) => {
//省市的物体
let provinceObj = new THREE.Object3D();
if (province.geometry.type == "Polygon") {
province.geometry.coordinates.forEach((polygon) => {
let shape = new THREE.Shape();
let arr = [];
for (let i = 0; i < polygon.length; i++) {
let [x, y] = projection(polygon[i]);
if (i == 0) {
shape.moveTo(x, -y);
} else {
shape.lineTo(x, -y);
}
arr.push(x, -y, 1);
}
let mesh = createPolygon(shape, arr，province);
provinceObj.add(mesh);
});
} else if (province.geometry.type == "MultiPolygon") {
province.geometry.coordinates.forEach((multipolygon) => {
multipolygon.forEach((polygon) => {
let shape = new THREE.Shape();
let arr = [];
for (let i = 0; i < polygon.length; i++) {
let [x, y] = projection(polygon[i]);
if (i == 0) {
shape.moveTo(x, -y);
} else {
shape.lineTo(x, -y);
}
arr.push(x, -y, 1);
}
let mesh = createPolygon(shape, , arr，province);
provinceObj.add(mesh);
});
});
}
chinaObj.add(provinceObj);
});
base.scene.add(chinaObj);
}
5.创建多边形
function createPolygon(shape, , arr，province) {
let geo = new THREE.ExtrudeGeometry(shape);
let mesh = new THREE.Mesh(geo, extrudeMats);
if (province.properties.name) mesh.name = province.properties.name;
//画线
let buffer = new THREE.BufferGeometry();
buffer.setAttribute(
"position",
new THREE.BufferAttribute(new Float32Array(arr), 3)
);
let line = new THREE.Line(buffer, edgeMaterial);
chinaObj.add(line);
return mesh;
}
threejs炫酷地图(地图流光，飞线，水印动画，高光，波浪)
腾讯课堂链接：https://ke.qq.com/course/6033012#term_id=106263170
