<template>
  <div id="cesiumContainer" ref="cesiumContainer">
    <!-- <c-pointer></c-pointer> -->
    <slot v-if="map"></slot>
  </div>
</template>

<script>
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
window.Cesium = Cesium;
window.CESIUM_BASE_URL = "/static/Cesium/";
import { CesiumZh } from "utils/cesium/CesiumZh.js";
export default {
  name: "LhMap3d",
  props: {
    // 初始化缩放层级
    zoom: {
      type: Number,
      default: 10,
    },
    // 初始化中心经纬度
    center: {
      type: Array,
      default() {
        return [108.349402, 21.678761, 500];
      },
    },
    viewerOptions: {
      type: Object,
      default() {
        return {
          CreditsDisplay: false, //展示数据版权属性
          animation: false, //左下角仪表
          fullscreenButton: false, //全屏按钮
          timeline: false, //时间轴
          // sceneMode: 3,
        };
      },
    },
  },
  data() {
    return {
      map: null,
      isMap: true,
      isOlMap: false,
    };
  },
  provide() {
    return {
      coordType: null,
      bounds: null,
    };
  },
  methods: {
    init() {
      this.$store.commit("setIsOlMap", false);
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiY2RhMDMyYi1mODVkLTRkODAtYmI4MS0zZTY0OTM3OGExZWEiLCJpZCI6MjU5LCJpYXQiOjE2MTQ1OTIwNDZ9.0jO0HJaY0N1DrvfxPuuoDPWN_ebN2o2Ku2DrRC_P8qs";
      // A simple demo of 3D Tiles feature picking with hover and select behavior
      // Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
      });

      viewer.scene.globe.depthTestAgainstTerrain = true;

      // Set the initial camera view to look at Manhattan
      var initialPosition = Cesium.Cartesian3.fromDegrees(
        -74.01881302800248,
        40.69114333714821,
        753
      );
      var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
        21.27879878293835,
        -21.34390550872461,
        0.0716951918898415
      );
      viewer.scene.camera.setView({
        destination: initialPosition,
        orientation: initialOrientation,
        endTransform: Cesium.Matrix4.IDENTITY,
      });

      // Load the NYC buildings tileset
      var tileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
      });
      viewer.scene.primitives.add(tileset);

      // 用于在鼠标上显示功能名称的HTML覆盖
      var nameOverlay = document.createElement("div");
      viewer.container.appendChild(nameOverlay);
      nameOverlay.className = "backdrop";
      nameOverlay.style.display = "none";
      nameOverlay.style.position = "absolute";
      nameOverlay.style.bottom = "0";
      nameOverlay.style.left = "0";
      nameOverlay.style["pointer-events"] = "none";
      nameOverlay.style.padding = "4px";
      nameOverlay.style.backgroundColor = "black";

      // 有关当前选定功能的信息
      var selected = {
        feature: undefined,
        originalColor: new Cesium.Color(),
      };

      // An entity object which will hold info about the currently selected feature for infobox display
      var selectedEntity = new Cesium.Entity();

      // 获取左键单击时未拾取特征时的默认左键单击处理程序
      var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      );

     //如果支持轮廓，则鼠标上方的轮廓特征为蓝色，鼠标单击时为绿色轮廓。
     //如果不支持轮廓，请将特征颜色更改为鼠标上方的黄色，单击鼠标时将其更改为绿色。
      if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        // Silhouettes are supported
        var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
        silhouetteBlue.uniforms.length = 0.01;
        silhouetteBlue.selected = [];

        var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteGreen.uniforms.color = Cesium.Color.LIME;
        silhouetteGreen.uniforms.length = 0.01;
        silhouetteGreen.selected = [];

        viewer.scene.postProcessStages.add(
          Cesium.PostProcessStageLibrary.createSilhouetteStage([
            silhouetteBlue,
            silhouetteGreen,
          ])
        );

        // 在悬停时剪影一个蓝色的特征。
        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
          movement
        ) {
          // If a feature was previously highlighted, undo the highlight
          silhouetteBlue.selected = [];

          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.endPosition);
          if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = "none";
            return;
          }

          // A feature was picked, so show it's overlay content
          nameOverlay.style.display = "block";
          nameOverlay.style.bottom =
            viewer.canvas.clientHeight - movement.endPosition.y + "px";
          nameOverlay.style.left = movement.endPosition.x + "px";
          var name = pickedFeature.getProperty("BIN");
          nameOverlay.textContent = name;

          // Highlight the feature if it's not already selected.
          if (pickedFeature !== selected.feature) {
            silhouetteBlue.selected = [pickedFeature];
          }
        },
        Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // Silhouette a feature on selection and show metadata in the InfoBox.
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
          movement
        ) {
          // If a feature was previously selected, undo the highlight
          silhouetteGreen.selected = [];

          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
          }

          // Select the feature if it's not already selected
          if (silhouetteGreen.selected[0] === pickedFeature) {
            return;
          }

          // Save the selected feature's original color
          var highlightedFeature = silhouetteBlue.selected[0];
          if (pickedFeature === highlightedFeature) {
            silhouetteBlue.selected = [];
          }

          // Highlight newly selected feature
          silhouetteGreen.selected = [pickedFeature];

          // Set feature infobox description
          var featureName = pickedFeature.getProperty("name");
          selectedEntity.name = featureName;
          selectedEntity.description =
            'Loading <div class="cesium-infoBox-loading"></div>';
          viewer.selectedEntity = selectedEntity;
          selectedEntity.description =
            '<table class="cesium-infoBox-defaultTable"><tbody>' +
            "<tr><th>BIN</th><td>" +
            pickedFeature.getProperty("BIN") +
            "</td></tr>" +
            "<tr><th>DOITT ID</th><td>" +
            pickedFeature.getProperty("DOITT_ID") +
            "</td></tr>" +
            "<tr><th>SOURCE ID</th><td>" +
            pickedFeature.getProperty("SOURCE_ID") +
            "</td></tr>" +
            "</tbody></table>";
        },
        Cesium.ScreenSpaceEventType.LEFT_CLICK);
      } else {
        // Silhouettes are not supported. Instead, change the feature color.

        // Information about the currently highlighted feature
        var highlighted = {
          feature: undefined,
          originalColor: new Cesium.Color(),
        };

        // Color a feature yellow on hover.
        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
          movement
        ) {
          // If a feature was previously highlighted, undo the highlight
          if (Cesium.defined(highlighted.feature)) {
            highlighted.feature.color = highlighted.originalColor;
            highlighted.feature = undefined;
          }
          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.endPosition);
          if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = "none";
            return;
          }
          // A feature was picked, so show it's overlay content
          nameOverlay.style.display = "block";
          nameOverlay.style.bottom =
            viewer.canvas.clientHeight - movement.endPosition.y + "px";
          nameOverlay.style.left = movement.endPosition.x + "px";
          var name = pickedFeature.getProperty("name");
          if (!Cesium.defined(name)) {
            name = pickedFeature.getProperty("id");
          }
          nameOverlay.textContent = name;
          // Highlight the feature if it's not already selected.
          if (pickedFeature !== selected.feature) {
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.YELLOW;
          }
        },
        Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // 在选定内容上为功能着色，并在信息框中显示元数据。.
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
          movement
        ) {
          //如果某个特征以前高亮显示过，请撤消高亮显示
          if (Cesium.defined(selected.feature)) {
            selected.feature.color = selected.originalColor;
            selected.feature = undefined;
          }
          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
          }
          // 如果尚未选择功能，请选择该功能
          if (selected.feature === pickedFeature) {
            return;
          }
          selected.feature = pickedFeature;
          // Save the selected feature's original color
          if (pickedFeature === highlighted.feature) {
            Cesium.Color.clone(
              highlighted.originalColor,
              selected.originalColor
            );
            highlighted.feature = undefined;
          } else {
            Cesium.Color.clone(pickedFeature.color, selected.originalColor);
          }
          // Highlight newly selected feature
          pickedFeature.color = Cesium.Color.LIME;
          // Set feature infobox description
          var featureName = pickedFeature.getProperty("name");
          selectedEntity.name = featureName;
          selectedEntity.description =
            'Loading <div class="cesium-infoBox-loading"></div>';
          viewer.selectedEntity = selectedEntity;
          selectedEntity.description =
            '<table class="cesium-infoBox-defaultTable"><tbody>' +
            "<tr><th>BIN</th><td>" +
            pickedFeature.getProperty("BIN") +
            "</td></tr>" +
            "<tr><th>DOITT ID</th><td>" +
            pickedFeature.getProperty("DOITT_ID") +
            "</td></tr>" +
            "<tr><th>SOURCE ID</th><td>" +
            pickedFeature.getProperty("SOURCE_ID") +
            "</td></tr>" +
            "<tr><th>Longitude</th><td>" +
            pickedFeature.getProperty("longitude") +
            "</td></tr>" +
            "<tr><th>Latitude</th><td>" +
            pickedFeature.getProperty("latitude") +
            "</td></tr>" +
            "<tr><th>Height</th><td>" +
            pickedFeature.getProperty("height") +
            "</td></tr>" +
            "<tr><th>Terrain Height (Ellipsoid)</th><td>" +
            pickedFeature.getProperty("TerrainHeight") +
            "</td></tr>" +
            "</tbody></table>";
        },
        Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
    },
  },
  beforeDestroy() {},
  mounted() {
    this.init();
    //汉化
    CesiumZh.load();
  },
};
</script>
<style lang='scss' scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  /deep/.cesium-viewer-bottom {
    display: none;
  }
}
</style>