-
@param polygon 多边形 点数组
-
@param color 材质颜色
-
*/
function lineDraw(polygon:any, color:ColorRepresentation) {
const lineGeometry = new BufferGeometry();
const pointsArray = new Array();
polygon.forEach((row:any) => {
const projectionRow = projection(row);
if (!projectionRow) {
return
}
let x = projectionRow[0]
let y = projectionRow[1]
// 创建三维点
pointsArray.push(new Vector3(x, -y, 0));
linePinots.push([x, -y, 0]);
});
// 放入多个点
lineGeometry.setFromPoints(pointsArray);
const lineMaterial = new LineBasicMaterial({
color: color,
});
return new Line(lineGeometry, lineMaterial);
}
export { countryLine };
全部代码: demo
geojson 版本我们需要将提供的经纬度坐标点转场成平面,各平台算法不同,投影失真情况不同,所以一些情况地图会失真无法重合。
我们刚才使用卡墨托投影转换,也会失真并且和echarts 地图轮廓对不上,所以想起其他方案。
我们利用svg路径来取点,UI提供的svg地图轮廓肯定是一致的。
设计思路:
-
加载svg 取所有的点
-
根绝点来创建threejs 亮光点
-
移动动画
核心代码:
import * as THREE from ‘three’;
import { initRender } from ‘./render’;
import { initScene } from ‘./scene’;
import { initCamera } from ‘./camera’;
// import { countryLine } from “./countryPolygon”;
import { SVGLoader } from ‘three/examples/jsm/loaders/SVGLoader.js’;
export interface OutLineConfig {
outline: boolean;
outlineColor?: THREE.ColorRepresentation;
tintColor: THREE.ColorRepresentation;
speed: number;
tintLength?: number;