环境
ThreeJS 107版本three.min.jsOrbitControls.js说明
撒点功能原理是在地球上根据坐标批量加上圆对象,可以设置颜色和球大小。
解决方案
创建球的过程参见"ThreeJS制作地球"
创建点group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除
// 标记点组合var marking = new THREE.Group();
根据数据,循环添加圆以及材质
for (var i = 0; i < _markData.length; i++) {// 创建标记点球体var mark = new THREE.Mesh(new THREE.SphereGeometry(radius, 30, 30), new THREE.MeshBasicMaterial({color: _style.color ? _style.color : '#1bb4b0'}));// 获取标记点坐标var markPos = this.getPosition(_markData[i].attributes.x + 90, _markData[i].attributes.y, 30);mark.position.set(markPos.x, markPos.y, markPos.z);marking.add(mark);}scene.add(marking);
经纬度转球坐标
this.getPosition = function (_longitude, _latitude, _radius) {var lg = THREE.Math.degToRad(_longitude);var lt = THREE.Math.degToRad(_latitude);var temp = _radius * Math.cos(lt);var x = temp * Math.sin(lg);var y = _radius * Math.sin(lt);var z = temp * Math.cos(lg);return {x: x,y: y,z: z}}