Step 2. Scene initialization

Prerequisites

Authorization

You need to have an authorization code first. To obtain the authorization code, please refer to Authorization Application.

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 Map.vue file

• Delete all files in the src->components directory and create a new vue file named Map.

• Add basic template code in this file.

  <!-- The main method of defining components -->
  <script setup>
  //Import onMounted life cycle hook
  import { onMounted } from 'vue';
  
  //Call the onMounted hook and execute this function when the component is mounted.
  onMounted(() => {});
  </script>
  
  <!-- Define the template part of the component -->
  <template></template>
  
  <!-- Define the style of the component. The scoped attribute ensures that the style only applies to the current component -->
  <style scoped></style>

notes

For more information about lifecycle hooks, please visit Vue official documentation.

2. Initialize the map

• Add map initialization code in the Map.vue file.

  <!-- The main method of defining components -->
  <script setup>
  //Import onMounted life cycle hook
  import { onMounted } from 'vue';
  
  //Define style file
  const style = {
    version: 8,
    sources: {},
    layers: [ // Create a solid color background layer
        {
            id: 'background',
            type: 'background',
            paint: { 'background-color': 'rgba(9, 30, 55, 0.6)' },
        },
    ],
  };
  
  //Call the onMounted hook and execute this function when the component is mounted.
  onMounted(() => {
    // Map initialization
    let map = new mapmost.Map({
        container: 'map-container', // map container id
        style: style, // map style
        center: [120.72929672369003, 31.288619767132104], // Map center point
        zoom: 17.88998700147244, // Map zoom level
        pitch: 64.42598133276567, // Map pitch angle
        bearing: -37.87271910936988, // Map azimuth
        doubleClickZoom: false, // Turn off double-click zoom map
        userId: '***', // Please enter the authorization code you obtained
    });
  
    /*
    * Assign the map object to the map property of the window object,
    * This allows the map object to be accessed globally through window.map.
    */
    window.map = map;
  })
  </script>
  
  <!-- Define the template part of the component -->
  <template>
    <!-- Map container -->
    <div class="map-container" id="map-container"></div>
  </template>
  
  <!-- Define the style of the component. The scoped attribute ensures that the style only applies to the current component -->
  <style scoped>
  /* Map container style */
  .map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  </style>
  notes

  For more information about map initialization, visit Map.

• Modify the src->App.vue file, the code is as follows:

  <script setup>
  //Import components
  import Map from './components/Map.vue'
  </script>
  
  <template>
    <div class="container">
        <!-- Use components and render them into the page -->
        <Map></Map>
    </div>
  </template>
  
  <style scoped>
  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  </style>

• Modify the src->assets->main.css file and set global styles.

  * {
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

• Run and check the effect. At this time, only one background layer can be seen in the scene.

  npm run dev
  

3. Set the scene environment

• Set the 3D base environment in map initialization.

  // Map initialization
  let map = new mapmost.Map({
    container: 'map-container',
    style: style, 
    center: [120.72929672369003, 31.288619767132104], 
    zoom: 17.88998700147244,    
    pitch: 64.42598133276567,    
    bearing: -37.87271910936988, 
    doubleClickZoom: false,
    userId: '***', // Please enter the authorization code you obtained
    env3D: {
      defaultLights: false, // Turn off default lights
      envMap: './assets/hdr/yun(17).hdr', // Set environment map, support hdr format
      exposure: 2.64, //Set scene exposure
    },
  });

• Set scene lighting.

  • Create a new api folder in the src folder.

  • Create a new SceneApi.js file in the api folder.

  • Add the scene lighting code in the SceneApi.js file.

    // This class is mainly used to set the scene environment
    class SceneApi {
      constructor(map) {
        this._map = map;
        this.initLight(); // Call the initialization light method
      }
      
      //Initialize lights
      initLight() {
        //Create and set up the first directional light source
        let light1 = new mapmost.DirectionalLight({
          color: '#484b4b', // light color
          intensity: 3.7, // light intensity
          position: [291218.1880671615, -359034.8940693505, 220067.97081694918], // Light position
        });
        
        //Create and set up a second directional light source
        let light2 = new mapmost.DirectionalLight({
          color: '#767676', // Light color
          intensity: 0.91, // light intensity
          position: [-291218.1880671615, 359034.8940693505, 220067.97081694918], // Light position
        });
    
        //Add lights to the scene
        this._map.addLight(light1);
        this._map.addLight(light2);
      }
    }
    
    // Export the SceneApi class so that it can be used in other modules
    export default SceneApi;

notes

For more information about lights, visit Lights.

• Set scene sky.

  - Add scene sky code in SceneApi.js file.
  
  ```js
  // This class is mainly used to set the scene environment
  class SceneApi {
    constructor(map) {
      this._map = map;
      this.initLight(); 
      // highlight-start
      this.initSky(); // Call the initialization sky method
      // highlight-end
    }
    
    // highlight-start
    //Initialize the skybox
    initSky() {
      this._map.addLayer({
        id: 'sky',
        type: 'mapmost_sky',
        enableCloud: true,
        paint: {
          // Skybox texture path
          'sky-url': './assets/images/CubeRT_Capture_Tex_2048.png',
          //Skybox rotation angle
          'sky-angle': 0,
          // sky exposure
          'sky-exposure': 1,
          // sky opacity
          'sky-opacity':1,
          'sky-type': 'atmosphere',
          // sun position
          'sky-atmosphere-sun': [227.02725700614292, 110.95561210040023],
          // Sun intensity
          'sky-atmosphere-sun-intensity': 5,
        },
      });
    }
    // highlight-end
  }
  
  // Export the SceneApi class so that it can be used in other modules
  export default SceneApi;
  ``` 

  -Introduce the SceneApi class into the Map.vue file

  import SceneApi from '../api/SceneApi';

• Called in onMounted

  window.map = map;
  // Called when the map is loaded
  map.on('load',()=>{
      new SceneApi(map);
  })

-Run and check the effect. Now you can see a background layer and sky in the scene.

npm run dev

4. Add model

• Add model in map’s load event.

• It should be noted that the scene we provide is a large model without splitting, including buildings, roads, trees, street lights, etc.

  let modelLayer; // Define the three-dimensional layer
  map.on('load', () => {
    new SceneApi(map);
  
    //Set model resources
    let models_obj = [
      {
        type: 'glb',
        url: './assets/models/yq.mm', //Model file path
        // Because the model we provide is encrypted, you need to set this parameter. If you are loading your own model, you do not need to set it.
        decryptWasm:'https://delivery.mapmost.com/cdn/b3dm_codec/0.0.2-alpha/sdk_b3dm_codec_wasm_bg_opt.wasm',
      },
    ];
  
    //Set layer parameters
    let options = {
      id: 'model_id', // Set layer id
      models: models_obj, // Set model resources
      outline: true, // Allow outline highlighting
      type: 'model', // Set layer type
      center: [120.73014920373011, 31.287414975761724, 0.1], // Set the model center point
      callback: function (group, layer) { // Model callback function
        modelLayer = layer;
      },
    };
    
    //Add the model to the map
    map.addLayer(options);
  })

notes

For more information about models, visit Add Model.

5. Check the effect

• Run and check the effect. The park model can be seen in the scene.

  npm run dev