跳到主要内容
版本：9.4.1

步骤四、添加UI界面

资源获取​

注意

场景中涉及到的图片、模型、第三方库、源码等资源，点击下载获取。

步骤​

1、创建组件​

  • 在 src 文件夹中新建 layout 文件夹。
  • 我们按照结构将界面分成了上下左右四个部分，所以需要在 layout 文件夹中创建4个vue文件。
    • LyBottom.vue
    • LyLeft.vue
    • LyRight.vue
    • LyTop.vue
  • 在 src 文件夹中新建 style.css 文件，该文件主要存放全局的样式。

2、安装 SCSS​

  • 在终端输入如下命令，安装 SCSS。
    npm install -D sass-embedded
    笔记

    SCSS 是 CSS 的一个预处理工具，它提供了许多 CSS 本身不具备的功能，如变量、嵌套规则、混合（Mixins）、继承、函数等，这些功能可以大大提高编写 CSS 的效率，想要了解更多信息，请访问官网。

3、界面编写​

  • 因为界面不是我们这款SDK产品的功能，所以大家可以直接从源码库中复制过来。
  • 关于场景的功能触发都写在了LyBottom.vue里，可以先把里面关于MapApi的方法先隐藏。

4、引用组件​

  • 在 src->App.vue 中引用界面组件。

    <script setup>
      // 导入组件
      import Map from './components/Map.vue'
      import LyTop from './layout/LyTop.vue';
      import LyLeft from './layout/LyLeft.vue';
      import LyRight from './layout/LyRight.vue';
      import LyBottom from './layout/LyBottom.vue';
    </script>

    <template>
      <div class="container">
          <Map></Map>
          <div class="layout">
              <div class="layout_img">
                  <ly-top></ly-top>
                  <div class="center_wapper">
                      <ly-left></ly-left>
                      <ly-right></ly-right>
                  </div>
                  <ly-bottom></ly-bottom>
              </div>
          </div>
      </div>
    </template>

    <style lang="scss" scoped>
      .container {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .layout {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          pointer-events: none;
          background: url(./assets/images/pure-mask3.png) no-repeat;
          background-size: 110% 140%;
          background-position: center 50%;
      }

      .layout_img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 11;
          pointer-events: none;
          background: url(./assets/images/pure-mask.png) no-repeat;
          background-size: 100% 110%;
      }

      .center_wapper {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
      }
      }
    </style>

5、引用样式文件​

  • 在 src->main.js 中引用样式文件。

    import { createApp } from 'vue';
    import './style.css';
    import App from './App.vue';
    import mapmost from '@mapmost/mapmost-webgl';

    window.mapmost = mapmost;
    createApp(App).mount('#app');
注意

这里为了示意，除了按钮，别的数据都是图片，如果想要替换为真实的图表，可以使用echarts图表。

6、查看效果​

  • 运行，查看效果，这时场景中就可以看见面板了。

    npm run dev
    show