qp_onemap_ui/src/views/wgn/Example.vue

<template>
  <!-- 时空算子库 -->
  <div class="example">
    <div id="skysceneryContainer"></div>
    <!-- 操作栏 -->
    <ControlPanel ref="controlPanel" />
  </div>
</template>

<script>
import ControlPanel from "../../components/wgn/controlPanel.vue";
// 需要开发出一个时空算子库的示例页面：需要能绘制点线面的工具，且能包装绘制的几何对象传入到后台接口中
export default {
  name: "wgnExample",
  // 2. 局部注册组件（键值同名可简写）
  components: {
    ControlPanel, // 完整写法：MyButton: MyButton
  },
  data() {
    return {};
  },
  mounted() {
    window.SkySceneryConfig = {};
    window.loadScripts([systemConfig.scriptMain]).then(() => {
      this.creatMap();
    });
  },
  methods: {
    creatMap() {
      window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择器
        imageryProvider: new SkyScenery.SingleTileImageryProvider({
          url: (function createColorCanvas(color) {
            var width = 1,
              height = 1;
            var canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, width, height);
            return canvas.toDataURL();
          })("#ffffff00"),
          rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        }),
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
        homeButton: false, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        shouldAnimate: false, //是否自动播放
        // 性能优化配置
        requestRenderMode: true,
        maximumRenderTimeChange: Infinity,
        preserveDrawingBuffer: false,
        useBrowserRecommendedResolution: true,
      });

      // 添加地图服务
      viewer.imageryLayers.addImageryProvider(
        new SkyScenery.ArcGisMapServerImageryProvider({
          url:
            "https://szlszxdt.qpservice.org.cn/internal_map/?servertype=shmap_blue_web&proxyToken=" +
            SkySceneryConfig.token,
          enablePickFeatures: false, // 禁用要素拾取功能以提高性能
        })
      );

      // 定位
      viewer.camera.setView({
        destination: SkyScenery.Cartesian3.fromDegrees(121.1, 31, 30000.0), // 设置位置
        orientation: {
          heading: SkyScenery.Math.toRadians(0.0), // 方向
          pitch: SkyScenery.Math.toRadians(-90.0), // 倾斜角度
          roll: 0,
        },
      });
      this.$refs["controlPanel"].initDrawHandler();
    },
  },
};
</script>

<style lang="less" scoped>
.example {
  width: 100%;
  // height: calc(100vh - 120px);
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#skysceneryContainer {
  width: 70vw;
  max-width: calc(100vw - 500px);
  height: 100%;
}
</style>