threejs創(chuàng)建3D地圖
下載地圖的json，這里我們可以在阿里云數(shù)據(jù)平臺(tái)上進(jìn)行下載
2.在代碼中解析下載的json
const fileloader = new THREE.FileLoader();
fileloader.load('/china.json',(res)=>{
res=JSON.parse(res)
createMap(res)
})
3.得到的坐標(biāo)點(diǎn)是經(jīng)緯度，所以我們要把它轉(zhuǎn)為二維坐標(biāo)，這里使用插件d3
const projection = d3
? .geoMercator() //地圖投影方式(用于繪制球形墨卡托投影)
? .center([108.5525, 34.3227]) //地圖中心點(diǎn)經(jīng)緯度坐標(biāo)
? .scale(84) //縮放
? .translate([0, 0]); //移動(dòng)地圖位置
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.創(chuàng)建多邊形
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;
? //畫(huà)線
? 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炫酷地圖(地圖流光，飛線，水印動(dòng)畫(huà)，高光，波浪)
騰訊課堂鏈接：https://ke.qq.com/course/6033012#term_id=106263170
