td_official/src/views/gisHome/component/map.vue

<template>
  <div class="ol-map" id="olMap"></div>
  <el-button class="btn" type="primary" @click="drawRectangle">绘制矩形</el-button>
</template>

<script setup>
import { workScheduleDel } from '@/api/progress/plan';
import { renderFacilitiesToCesium } from '@/views/gisHome/js/renderFacilities';
let sdk = null;

const initFacilities = async () => {
  const res = await workScheduleDel('1933358821565095951');
  console.log(res);

  renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPositionList, 'Polygon', { flyToFirst: true });
  renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPointPositionList, 'Point', { flyToFirst: true });
};

// 初始化 Cesium 地球
const createEarth = () => {
  sdk = new YJ.YJEarth('olMap');

  YJ.Global.setDefaultView(sdk, {
    destination: { lng: 100, lat: 30, alt: 22099000 },
    orientation: {
      heading: 0.0,
      pitch: -90.0,
      roll: 0.0
    }
  });

  new YJ.Obj.ArcgisWXImagery(sdk, {
    show: true,
    layer_index: 1
  });

  YJ.Global.CesiumContainer(sdk, {
    compass: false
  });

  new YJ.Tools(sdk).flyHome(0);
};

// 点击按钮时绘制一个矩形并飞行过去
const drawRectangle = () => {
  const viewer = sdk.viewer;
  const rectangleEntity = viewer.entities.add({
    name: '测试矩形',
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(100.0, 30.0, 102.0, 32.0), // 西南角到东北角
      material: Cesium.Color.YELLOW.withAlpha(0.5),
      outline: true,
      height: 2.5,
      outlineColor: Cesium.Color.BLACK
    }
  });
  viewer.flyTo(viewer.entities);
};

onMounted(async () => {
  // 最早执行
  window.CESIUM_BASE_URL = '/Cesium/';

  await YJ.on();
  createEarth();
  await initFacilities();
  console.log(YJ);
});
</script>

<style lang="scss" scoped>
@import '../css/gis.scss';
.ol-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh);
}
.btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}
</style>