步骤二、场景初始化

先决条件

授权

您需要先拥有一个授权码，授权码获取请参考授权申请。

资源获取

注意

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

步骤

1、创建Map.vue文件

• 删除 src->components 目录下的所有文件，新建一个名为 Map 的 vue 文件。

• 在该文件中添加基本模板代码。

  <!-- 定义组件的主要方法 -->
  <script setup>
  // 导入 onMounted 生命周期钩子
  import { onMounted } from 'vue';
  
  // 调用 onMounted 钩子，当组件挂载完成后执行该函数
  onMounted(() => {});
  </script>
  
  <!-- 定义组件的模板部分 -->
  <template></template>
  
  <!-- 定义组件的样式，scoped 属性确保样式只作用于当前组件 -->
  <style scoped></style>

笔记

有关生命周期钩子的更多信息，请访问Vue官方文档。

2、初始化地图

• 在 Map.vue 文件中添加地图初始化代码。

  <!-- 定义组件的主要方法 -->
  <script setup>
  // 导入 onMounted 生命周期钩子
  import { onMounted } from 'vue';
  
  // 定义样式文件
  const style = {
    version: 8,
    sources: {},
    layers: [ // 创建纯色背景图层
        {
            id: 'background',
            type: 'background',
            paint: { 'background-color': 'rgba(9, 30, 55, 0.6)' },
        },
    ],
  };
  
  // 调用 onMounted 钩子，当组件挂载完成后执行该函数
  onMounted(() => {
    // 地图初始化
    let map = new mapmost.Map({
        container: 'map-container', // 地图容器 id
        style: style, // 地图样式
        center: [120.72929672369003, 31.288619767132104], // 地图中心点
        zoom: 17.88998700147244,     // 地图缩放级别
        pitch: 64.42598133276567,    // 地图俯仰角
        bearing: -37.87271910936988, // 地图方位角
        doubleClickZoom: false,      // 关闭双击缩放地图
        userId: '***', // 请输入您获取的授权码
    });
  
    /*
    * 将 map 对象赋值给 window 对象的 map 属性，
    * 这样可以在全局范围内通过 window.map 访问 map 对象。
    */
    window.map = map;
  })
  </script>
  
  <!-- 定义组件的模板部分 -->
  <template>
    <!-- 地图容器 -->
    <div class="map-container" id="map-container"></div>
  </template>
  
  <!-- 定义组件的样式，scoped 属性确保样式只作用于当前组件 -->
  <style scoped>
  /* 地图容器样式 */
  .map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  </style>
  笔记

  有关地图初始化的更多信息，请访问地图(Map)。

• 修改 src->App.vue 文件，代码如下：

  <script setup>
  // 导入组件
  import Map from './components/Map.vue'
  </script>
  
  <template>
    <div class="container">
        <!-- 使用组件，并渲染到页面中 -->
        <Map></Map>
    </div>
  </template>
  
  <style scoped>
  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  </style>

• 修改 src->assets->main.css 文件，设置全局样式。

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

• 运行，查看效果，这时场景中只能看见一个背景图层。

  npm run dev
  

3、设置场景环境

• 在地图初始化中设置三维基础环境。

  // 地图初始化
  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: '***', // 请输入您获取的授权码
    env3D: {
      defaultLights: false, // 关闭默认灯光
      envMap: './assets/hdr/yun(17).hdr', // 设置环境贴图，支持hdr格式
      exposure: 2.64, // 设置场景曝光度
    },
  });

• 设置场景灯光。

  • 在 src 文件夹中新建 api 文件夹。

  • 在 api 文件夹中新建 SceneApi.js 文件。

  • 在 SceneApi.js 文件中添加场景灯光代码。

    // 该类主要用于设置场景环境
    class SceneApi {
      constructor(map) {
        this._map = map;
        this.initLight(); // 调用初始化灯光方法
      }
      
      // 初始化灯光
      initLight() {
        // 创建并设置第一个平行光源
        let light1 = new mapmost.DirectionalLight({
          color: '#484b4b', // 灯光颜色
          intensity: 3.7,   // 灯光强度
          position: [291218.1880671615, -359034.8940693505, 220067.97081694918], // 灯光位置
        });
        
        // 创建并设置第二个平行光源
        let light2 = new mapmost.DirectionalLight({
          color: '#767676', // 灯光颜色
          intensity: 0.91,  // 灯光强度
          position: [-291218.1880671615, 359034.8940693505, 220067.97081694918], // 灯光位置
        });
    
        // 将灯光添加到场景中
        this._map.addLight(light1);
        this._map.addLight(light2);
      }
    }
    
    // 导出SceneApi类，使其可以在其他模块中被使用
    export default SceneApi;

笔记

有关灯光的更多信息，请访问灯光(Lights)。

• 设置场景天空。

  • 在 SceneApi.js 文件中添加场景天空代码。

    // 该类主要用于设置场景环境
    class SceneApi {
      constructor(map) {
        this._map = map;
        this.initLight(); 
        this.initSky(); // 调用初始化天空方法
      }
      
      // 初始化天空盒
      initSky() {
        this._map.addLayer({
          id: 'sky',
          type: 'mapmost_sky',
          enableCloud: true,
          paint: {
            // 天空盒纹理路径
            'sky-url': './assets/images/CubeRT_Capture_Tex_2048.png',
            // 天空盒旋转角度
            'sky-angle': 0,
            // 天空曝光度
            'sky-exposure': 1,
            // 天空不透明度
            'sky-opacity':1,
            'sky-type': 'atmosphere',
            // 太阳位置
            'sky-atmosphere-sun': [227.02725700614292, 110.95561210040023],
            // 太阳强度
            'sky-atmosphere-sun-intensity': 5,
          },
        });
      }
    }
    
    // 导出SceneApi类，使其可以在其他模块中被使用
    export default SceneApi;

• 在 Map.vue 文件中引入 SceneApi 类

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

• 在 onMounted 中调用

  window.map = map;
  // 当地图加载完成后调用
  map.on('load',()=>{
      new SceneApi(map);
  })

• 运行，查看效果，这时场景中可以看见一个背景图层和天空。

  npm run dev
  

4、添加模型

• 在地图的加载事件中添加模型。

• 需要注意的是，我们提供的场景是一个大模型，没有做拆分，包括建筑、道路、树木、路灯等。

  let modelLayer; // 定义三维图层
  map.on('load', () => {
    new SceneApi(map);
  
    // 设置模型资源
    let models_obj = [
      {
        type: 'glb',
        url: './assets/models/yq.mm', // 模型文件路径
        // 因我们提供的模型是加密过的，所以需要设置该参数，如果加载的是自己的模型，就不用设置
        decryptWasm:'https://delivery.mapmost.com/cdn/b3dm_codec/0.0.2-alpha/sdk_b3dm_codec_wasm_bg_opt.wasm',
      },
    ];
  
    // 设置图层参数
    let options = {
      id: 'model_id',     // 设置图层 id
      models: models_obj, // 设置模型资源
      outline: true,      // 允许轮廓高亮
      type: 'model',      // 设置图层类型
      center: [120.73014920373011, 31.287414975761724, 0.1], // 设置模型中心点
      callback: function (group, layer) {  // 模型回调函数
        modelLayer = layer;
      },
    };
    
    // 将模型添加到地图中
    map.addLayer(options);
  })

笔记

有关模型的更多信息，请访问添加模型。

5、查看效果

• 运行，查看效果，这时场景中可以看见园区模型。

  npm run dev