fuchengshen
2022-06-22 23bf56d279ee4857750c59d4f76c2995b2ae950c
before merge
2个文件已修改
1个文件已添加
115 ■■■■■ 已修改文件
public/hn3d/example/00_hn_new.html 32 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/hn3d/example/test1.vue 79 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
vite.config.ts 4 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/hn3d/example/00_hn_new.html
@@ -74,14 +74,14 @@
    </div>
  </div>
  <div class="infoview bottomWindows">
  <!-- <div class="infoview bottomWindows">
    <div>
      <input id="changqu_btn" type="button" class="btn btn-primary" value="厂区" />
      <input id="meipeng_btn" type="button" class="btn btn-primary" value="煤棚" />
      <input id="pengnei_btn" type="button" class="btn btn-primary" value="棚内" />
    </div>
  </div>
  </div> -->
  <!-- 操作按钮栏 -->
  <div class="infoview infoWindows handle">
    <button type="button" id="meipeng" class="btn btn-primary active" style="width: 100%;">煤棚整体</button>
@@ -228,6 +228,9 @@
        },
        control: {
          infoBox: false,
          timeline: true,
          clockAnimate: false,
          distanceLegend: { left: "100px", bottom: "27px" }
        },
        layers: [
          {
@@ -358,8 +361,26 @@
      });
      var eventTarget = new mars3d.BaseClass()
      //创建三维地球场景
      map = new mars3d.Map("mars3dContainer", mapOptions);
      var clockAnimate = new mars3d.control.ClockAnimate({
        format: "yyyy-MM-dd HH:mm:ss"
      })
      map.addControl(clockAnimate)
      clockAnimate.on(mars3d.EventType.click, function (event) {
        if (event.targetType === "label") {
          console.log("单击了时间文本区域", event)
          console.log(eventTarget, "eventTarget")
          var startTime = Cesium.JulianDate.toDate(map.clock.startTime)
          var stopTime = Cesium.JulianDate.toDate(map.clock.stopTime)
          var currentTime = Cesium.JulianDate.toDate(map.clock.currentTime)
          eventTarget.fire("clickShowClockAnimate", { startTime, stopTime, currentTime })
        }
      })
      // 创建斗轮机图层
@@ -640,6 +661,11 @@
      // 斗轮机旋转
      $("#dou_rote").click(function () {
        // 无动画效果的旋转
public/hn3d/example/test1.vue
New file
@@ -0,0 +1,79 @@
<template>
  <mars-pannel :visible="showClockAnimate"
               left="60"
               bottom="50">
    <p class="closePannel f-mb">
      <mars-icon icon="close"
                 width="14"
                 @click="onClickHiddenTime" />
    </p>
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">当前时间:</span>
        <mars-date-picker style="width: 170px"
                          v-model:value="currrentTime"
                          format="YYYY-MM-DD HH:mm:ss"
                          :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                          @change="onChangeCurrentTime" />
      </a-space>
    </div>
    <div class="f-mb">
      <a-space>
        <span class="mars-pannel-item-label">时间范围:</span>
        <mars-range-picker v-model:value="nowTimeScope"
                           :show-time="{ format: 'HH:mm' }"
                           format="YYYY-MM-DD HH:mm"
                           :placeholder="['开始时间', '结束时间']"
                           @change="onRangeChange" />
      </a-space>
    </div>
  </mars-pannel>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import dayjs, { Dayjs } from "dayjs";
import * as mapWork from "./map.js";
const showClockAnimate = ref<boolean>(false);
const nowTimeScope = ref<[Dayjs, Dayjs]>();
const currrentTime = ref<Dayjs>();
mapWork.eventTarget.on("clickShowClockAnimate", (e: any) => {
  showClockAnimate.value = !showClockAnimate.value;
  nowTimeScope.value = [dayjs(e.startTime), dayjs(e.stopTime)];
  currrentTime.value = dayjs(e.currentTime);
});
const onClickHiddenTime = () => {
  showClockAnimate.value = false;
};
const onRangeChange = (value: [Dayjs, Dayjs], dateString: [string, string]) => {
  mapWork.setClockAnimateTime(dateString[0], dateString[1]);
};
const onChangeCurrentTime = (value: Dayjs) => {
  mapWork.setCurrentTime(value);
};
</script>
<style>
.infoView {
  overflow-x: hidden;
  top: calc(100% - 195px) !important;
  right: calc(100% - 415px) !important;
}
</style>
<style lang="less" scoped>
// .closePannel {
//   display: flex;
//   justify-content: flex-end;
// }
// :deep(.ant-select-dropdown) {
//   background-color: #3f5563c4 !important;
// }
// :deep(.ant-picker) {
//   width: 300px;
// }
</style>
vite.config.ts
@@ -18,8 +18,8 @@
  const proxy = {
    "/dev": {
      // target: "http://192.168.1.16:8001",
      // target: "http://47.92.33.19:8001",
      target: "http://127.0.0.1:8001",
      target: "http://47.92.33.19:8001",
      // target: "http://127.0.0.1:8001",
      changeOrigin: true,
      rewrite: (path: string) => path.replace(/^\/dev/, "")
    },