addBoxMarkers(group, radius, items) {
    for (let i = 0; i < items.length; i++) {
      // 获取场景下组内已有的柱形图标记模型
      let boxMarker = _.find(group.children, (model) => {
        return (
          model.userData.type == 'bar' && model.userData.name == items[i].name
        );
      });
      // 不存在就建立
      if (!boxMarker) {
        // 柱形图的深度，即显示出来的高度
        // 防止数据大小差异很大，这里用log方法对数据进行归一化处理
        let depth = window.Math.log2(items[i].total) * 5;
        let boxMarkerGeom = this.vdGeom.createBoxMarkerGeom(depth);
        let boxMarkerMat = this.vdMaterial.createBoxMakerMat();
        boxMarker = new Mesh(boxMarkerGeom, boxMarkerMat);
        // 定位
        let position = getPosition(
          parseFloat(items[i].lng),
          parseFloat(items[i].lat),
          radius
        );
        boxMarker.position.set(position.x, position.y, position.z);
        // 设置柱形图的自定义数据为遍历的数据项
        boxMarker.userData = Object.assign({ type: 'bar' }, items[i]);
        // 标记垂直于圆心
        boxMarker.lookAt(new Vector3(0, 0, 0));
        group.add(boxMarker);
      }
      // 缩放0.1倍，为后续柱形图动画预留
      boxMarker.scale.set(1, 1, 0.1);
      boxMarkAnimate(boxMarker);
    }
  }

// 建立模型
function initObj() {

   ...   

   // 定义好的数据格式  
   var data = [{
   name:'中国',
   lng：'116.46',
   lat: '39.92',
   total:'80000'
   },{
   name:'美国',
   lng：'-77.02',
   lat: '39.91',
   total:'890000'
   }]
   var self = this  
   // 建立一个标记组
    self.markerGroup = new Group();
    // 建立标记
    var myMarkers = new marker();
    // 柱形
    myMarkers.addBoxMarkers(self.markerGroup, self.radius, data);
    // 添加到地球模型组里
    self.baseGroup.add(self.markerGroup);
   ...
}

addNameMarkers(group, radius, items, font) {
    for (let i = 0; i < items.length; i++) {
      let nameMarker = _.find(group.children, (model) => {
        return (
          model.userData.type == 'name' && model.userData.name == items[i].name
        );
      });
      if (!nameMarker) {
        let geometry = this.vdGeom.createNameMarkerGeom(
          items[i].name + ':' + items[i].total,
          font
        );
        let material = this.vdMaterial.createNameMarkerMat();
        nameMarker = new Mesh(geometry, material);
        // 定位
        let position = getPosition(
          parseFloat(items[i].lng),
          parseFloat(items[i].lat),
          radius + window.Math.log2(items[i].total) * 5
        );
        nameMarker.position.set(position.x, position.y, position.z);
        // 标记垂直于圆心
        nameMarker.lookAt(
          new Vector3(position.x * 1.1, position.y * 1.1, position.z * 1.1)
        );
        group.add(nameMarker);
      }
      nameMarker.visible = false;
      nameMarker.userData = Object.assign({ type: 'name' }, items[i]);
    }
  }

// 建立模型
function initObj() {
  let self = this;
  let fontloader = new FontLoader();
  // 建立地球模型组
  this.baseGroup = new Group();
  // 建立地球
  this.radius = minSize(this.contentWidth, this.contentHeight) * 0.2;
  let globalMesh = new model().createGlobe(this.radius, this.textrue);
  this.baseGroup.add(globalMesh);
  // 建立星点
  let stars = new model().createStars();
  this.baseGroup.add(stars);
  var data = [{
   name:'中国',
   lng：'116.46',
   lat: '39.92',
   total:'80000'
  },
  {
   name:'美国',
   lng：'-77.02',
   lat: '39.91',
   total:'890000'
   }]
    // 建立一个标记组
    self.markerGroup = new Group();
    // 建立标记
    var myMarkers = new marker();
    // 柱形
    myMarkers.addBoxMarkers(self.markerGroup, self.radius, data);
    // 加载字体
    if (self.font) {
      myMarkers.addNameMarkers(self.markerGroup, self.radius, data, self.font);
    } else {
      fontloader.load('./fonts/SimHei_Regular.json', function (font) {
        self.font = font;
        myMarkers.addNameMarkers(
          self.markerGroup,
          self.radius,
          data,
          self.font
        );
      });
    }
    self.baseGroup.add(self.markerGroup);
  this.scene.add(this.baseGroup);
}

import {Vector2,Raycaster} from 'three'
// 获取mesh
function getAllMeshes(obj, meshArr) {
    obj.children.forEach(element => {
      if (element.type == 'Mesh') {
        meshArr.push(element);
      } else if (element.children.length > 0) {
        getAllMeshes(element, meshArr);
      }
    });
}
// 柱状标记点击事件
export function createModelClick(){
    var self = this
    //点击事件
    window.addEventListener('click',function (e) {
        // 重置选择的柱形标注的颜色
        if(self.seledModel){
            self.seledModel.object.material.color.set('#6dc3ec');
        }
        // 重置名称的可见
        if(self.nameModel ){
            self.nameModel.visible = false;
        }
        var mouse = new Vector2();
        mouse.x =((e.clientX - window.innerWidth + self.contentWidth) / self.contentWidth) * 2 - 1;
        mouse.y =-((e.clientY - window.innerHeight + self.contentHeight) / self.contentHeight) *2 + 1;
        
        var raycaster = new Raycaster();
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera(mouse, self.camera);
        
        var objects = [];
        // 获取标记组下全部的mesh
        getAllMeshes(self.markerGroup, objects);

        //射线和模型求交，选中一系列直线
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length > 0) {
            for (var i = 0; i < intersects.length; i++) {
                var ele = intersects[i];
                if (ele.object.userData && ele.object.userData.type === 'bar') {
                    // 选中的柱形图颜色修改
                    self.seledModel = ele;
                    ele.object.material.color.set('#e0ef08');
                    // 选中的柱形标注对应的文本的可见
                    self.nameModel = _.find(self.markerGroup.children,model=>{
                        return model.userData.type == 'name' && model.userData.name == ele.object.userData.name
                    })
                    if(self.nameModel){
                        self.nameModel.visible = true;
                    }
                    
                    return ;
                }
                self.seledModel = null
                self.nameModel = null
            }
        }else{
            self.seledModel = null
            self.nameModel = null
        }
    }, false);
}

init(opt = {}) {
    var self = this;
    // 合并用户配置属性
    _.merge(this.options, opt);

    // 获取容器的宽高
    this.contentWidth = this.options.container.offsetWidth;
    this.contentHeight = this.options.container.offsetHeight;
    // 加载贴图
    let globeTextureLoader = new TextureLoader();
    globeTextureLoader.load('./images/world.jpg', function (textrue) {
      self.textrue = textrue;
      // 初始化渲染器
      initRenderer.call(self);
      // 初始化舞台
      initScene.call(self);
      // 初始化相机
      initCamera.call(self);
      // 初始化灯光
      initLight.call(self);
      // 初始化控制器
      initControls.call(self);
      // 初始化模型
      initObj.call(self);
      // 初始化点击事件
      createModelClick.call(self);
      // 初始化实时更新方法
      animate.call(self);
    });
  }