<template> </template>
<script>
import $ from "jquery";
export default {
  name: "fviz-project",
  methods: {
    startup(map) {
      let me = this;
      me.map = map;
      //添加数据源
      me.source = new FwebEarth.ClusterDataSource({
        name: "projects",
        showNumLabel: true //设置聚合后显示包含数量
      });
      me.map.dataSources.add(me.source);

      //工程类型图标文字
      me.projectKeyText = me.$parent.objVal.projectKeyText;

      //工程状态颜色
      me.projectStatusColor = me.$parent.objVal.projectStatusColor;
      me.load();
    },
    load() {
      let me = this;
      var self = this;
        $.getJSON("http://3dcloud.365power.cn/files/waters/model/watersjson/data_projects.json", function (result) {
            self.createProjectFeature(result.rows);
        });
      //绑定数据源
      //me.createProjectFeature(me.$parent.objVal.proSource.rows);
    },
    createProjectFeature(rows) {
      let me = this;
      for (var i = 0; i < rows.length; i++) {
        var data = rows[i];
        //获取工程图标
        var keyText = me.projectKeyText[data.proType];
        //获取工程图标颜色
        var keyColor = me.projectStatusColor[data.proStatus];
        var img = me.createCanvasImage(keyText, keyColor);
        var feature = {
          position: Cesium.Cartesian3.fromDegrees(data.lng, data.lat, 1),
          billboard: {
            image: img,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            width: 32,
            height: 32,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              12000.0,
              Number.MAX_VALUE
            ) //满足距离条件时显示
          },
          HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND //设置贴地形
        };
        feature = me.source.entities.add(feature);
        //保存属性
        feature.attr = data;
        //注册事件
        me.registerEvents(feature);
      }
    },
    loadTileset(lng, lat, alt) {
      //以3dTilese方式加载模型
      var self = this;
      var tileset = new Cesium.Cesium3DTileset({
        url: self.$parent.objVal.modelUrl
      });
      tileset.readyPromise
        .then(function() {
          self.map.scene.primitives.add(tileset);
          tileset.setPosition(
            tileset,
            new FwebEarth.Point3(lng, lat, alt),
            new FwebEarth.Euler(0, 0, 0)
          );
        })
        .otherwise(function(error) {
          throw error;
        });
    },
    createCanvasImage(text, color) {
      text += "";
      var c = document.createElement("canvas");
      (c.width = 64), (c.height = 64);
      var ctx = c.getContext("2d");
      ctx.lineWidth = 3;
      ctx.strokeStyle = "#fff";
      ctx.beginPath();
      ctx.arc(32, 32, 30, 0, 2 * Math.PI);
      ctx.fillStyle = color;
      ctx.fill(); //画实心圆
      ctx.stroke();
      ctx.font = "bold 32px Arial";
      ctx.fillStyle = "#fff";
      ctx.fillText(text, 14, 42);
      return c.toDataURL();
    },
    registerEvents(feature) {
      var self = this;
      //悬停
      feature.mouseover = function() {
        self.showInfomation(feature.attr);
        document.body.style.cursor = "pointer";
        self.$parent.$emit('gis-mouseover',"悬停");
        
      };
      feature.mouseout = function() {
        self.hideInfomation();
        document.body.style.cursor = "default";
        self.$parent.$emit('gis-mouseout',"取消悬停");
      };
      //右键
      feature.rightClick = function(e) {
        console.log(e);
        var screen = e.screen;
        self.gisScreen=screen;
        self.$parent.$emit('gis-right',screen);
   
        
      };
      feature.click = function(e) {
        console.log(e);
        self.$parent.$emit('gis-out-right', "取消右键");
      };
      feature.dbclick = function(e) {
        if (e.feature && e.feature.attr) {
          var lng = e.feature.attr.lng,
            lat = e.feature.attr.lat,
            alt = 0;
          self.map.flyCenter(
            new FwebEarth.Point3(lng, lat, alt),
            new FwebEarth.Euler(-30, 0, 3500)
          );
        }
      };
    },
    //显示工程概况面板
    showInfomation(id) {
      /*       $("#infoPanel").css("left", "0px");
       */
    },
    hideInfomation(id) {
      /*       $("#infoPanel").css("left", "-200px");
       */
    },
    //显示右键菜单
    showContextMenu(e) {
      console.log(e.feature.attr);
      this.attr = e.feature.attr;
      var screen = e.screen;
      /*  $("#customMenu").css({
        left: screen.x + "px",
        top: screen.y + "px"
      }); */
    },
    hideContextMenu() {
      $("#customMenu").css("left", "-5000px");
    },
    //缓慢飞行到目标位置
    flyTo() {}
  },
  mounted() {}
};
</script>
