Skip to main content

Step 4. Add UI interface

Resource acquisition​

Attention

The pictures, models, third-party libraries, source code and other resources involved in the scene can be obtained by click to download.

Steps​

1. Create components​

  • Create a new layout folder in the src folder.
  • We divided the interface into four parts according to the structure: upper, lower, left and right, so we need to create 4 vue files in the layout folder.
    • LyBottom.vue
    • LyLeft.vue
    • LyRight.vue
    • LyTop.vue
  • Create a new style.css file in the src folder, which mainly stores global styles.

2. Install SCSS​

  • Enter the following command in the terminal to install SCSS.
    npm install -D sass-embedded
    notes

    SCSS is a preprocessing tool for CSS. It provides many functions that CSS itself does not have, such as variables, nested rules, mixins, inheritance, functions, etc. These functions can greatly improve the efficiency of writing CSS. For more information, please visit official website.

3. Interface writing​

  • Because the interface is not a function of our SDK product, you can copy it directly from the source code library.
  • The function triggering of the scene is all written in LyBottom.vue. You can hide the MapApi methods in it first.

4. Reference components​

  • Reference interface components in src->App.vue.

    <script setup>
      //Import components
      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. Reference style files​

  • Reference style files in 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');
Attention

For illustration purposes here, except for buttons, other data are pictures. If you want to replace them with real charts, you can use echarts charts.

6. Check the effect​

-Run and check the effect. The panel will now be visible in the scene.

npm run dev
show