- 下载地图的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;
}
腾讯课堂链接：https://ke.qq.com/course/6033012#term_id=106263170文章来源：https://www.toymoban.com/news/detail-700892.html
CSDN视频链接：threejs炫酷地图（地图流光，飞线，水印动画，高光，波浪）文章来源地址https://www.toymoban.com/news/detail-700892.html
到了这里，关于threejs创建3D炫酷地图(地图流光，飞线，水印动画，高光)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
