Skip to main content

初始化地图

引入THEngine然后初始化地图

一、初始化地图场景​

import THEngine from "@tuh/engine";

  <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined;
      const defaultConfig = {
        //视点
        viewpoint: {
          position: [113.325,23.2456,10000],
          heading: 0,
          pitch: -45,
          roll: 0,
        },
        //底图
        layers: {
          type: "gdTile",
          crs: "WGS84",
        },
        //地形
        terrains: {
          url: "http://data.marsgis.cn/terrain",
        },
        //行政边界
        baseVectorLayer: undefined,
        scene: {
          depthTestAgainstTerrain: true, //是否开启深度检测， true开启，false关闭
          baseColor: "#000", //  //设置无底图影像时地球的颜色,2种颜色都可
          backgroundColor: "#000", //场景的背景颜色，如果没有设置天空盒就会使用这个颜色。默认黑色 #000
          maximumZoomDistance: 5000000, //限制视角缩放，最高50万米
          minimumZoomDistance: 10, //限制视角缩放，最低10米
          contextOptions: {
            //todo:为了cesium能截屏
            webgl: {
              //alpha: false,
              //depth: false,
              //stencil: true,
              //antialias: true,
              //premultipliedAlpha: true,
              preserveDrawingBuffer: true,
              //failIfMajorPerformanceCaveat: false,
              MAX_TEXTURE_SIZE: 64,
            },
            //allowTextureFilterAnisotropic: true,
            //TODO:使支持MSAA抗锯齿
            //requestWebgl2: true,
          },
          infoBox: false, //是否开启默认弹窗，true开启，false关闭
          fullscreenButton: false, //是否开启显示全屏按钮，true显示，false关闭
          selectionIndicator: false, //选取指示器组件
          animation: false, //左下角仪表，动画小器件
          homeButton: false, // 返回（主页）cesium初始位置按钮
          geocoder: false, //位置查找工具
          timeline: false, //下方时间轴
          navigationHelpButton: false, //右上角导航帮助按钮
          sceneModePicker: false, //二维三维投影方式选择器
          requestRenderMode: false, //是否开启手动渲染， true显示，false关闭
          maximumRenderTimeChange: Infinity,
          baseLayerPicker: false,
          orderIndependentTranslucency: true,
          sun: false, //关闭太阳显示
          moon: false, //关闭月亮显示
          fog: false, //关闭场景的雾显示
        },
      };
      function initViewer() {
        viewer = THEngine.scene.map.createMap(
          "viewer-container",
          defaultConfig
        );
      }
      initViewer();
    </script>

在线地址 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=init/crateViewer.html.

二、地图配置参数说明​

1.视点参数（viewpoint）​

用于确定地图初始的观察位置和方向。

  • position：
    • 类型：number[]
    • 说明：以 [经度, 纬度, 高度] 形式表示视点位置，示例值 [113.325, 23.2456, 10000]。经度决定水平方向位置，纬度确定垂直方向位置，高度表示距地面高度。
  • heading：
    • 类型：number
    • 说明：航向角，单位为度，控制水平视角方向，值为 0 时代表初始方向。
  • pitch：
    • 类型：number
    • 说明：俯仰角，单位为度，控制垂直视角，值 -45 表示向下倾斜一定角度观察地图。
  • roll：
    • 类型：number
    • 说明：翻滚角，单位为度，用于控制倾斜视角，当前值 0 表示无倾斜。

2.底图参数（layers）​

用于配置地图底图相关属性。

  • type：
    • 类型：string
    • 说明：指定底图类型，值为 "gdTile"，不同类型底图在样式、数据来源等方面有差异。
  • crs：
    • 类型：string
    • 说明：底图使用的坐标参考系统，值为 "WGS84"，确保地图坐标定位准确和一致性。

3.地形参数（terrains）​

用于获取地形数据的相关配置。

  • url：
    • 类型：string
    • 说明：地形数据的URL地址，值为 "http://data.marsgis.cn/terrain"，通过该地址加载地形数据以展示地形地貌。

4.场景参数（scene）​

用于设置地图场景的各种显示和交互属性。

  • depthTestAgainstTerrain：
    • 类型：boolean
    • 说明：是否开启针对地形的深度检测，true 开启，检测可使地图元素与地形显示更合理，避免遮挡问题。
  • baseColor：
    • 类型：string
    • 说明：无底图影像时地球的颜色，值为 "#000"（黑色），十六进制颜色代码定义颜色。
  • backgroundColor：
    • 类型：string
    • 说明：场景背景颜色，未设置天空盒时生效，默认值 "#000"（黑色）。
  • maximumZoomDistance：
    • 类型：number
    • 说明：视角缩放最大距离限制，单位米，值为 5000000，限制用户可缩放的最大范围。
  • minimumZoomDistance：
    • 类型：number
    • 说明：视角缩放最小距离限制，单位米，值为 10，限制用户可缩放的最小范围。
  • contextOptions.webgl.preserveDrawingBuffer：
    • 类型：boolean
    • 说明：是否保留绘图缓冲区，用于截屏功能，true 保留，开启后可实现截屏操作。
  • contextOptions.webgl.MAX_TEXTURE_SIZE：
    • 类型：number
    • 说明：最大纹理尺寸，值为 64，影响纹理显示质量和性能，尺寸越大可能性能消耗越大。
  • infoBox：
    • 类型：boolean
    • 说明：是否开启默认弹窗，true 开启，弹窗可展示地图相关信息。
  • fullscreenButton：
    • 类型：boolean
    • 说明：是否显示全屏按钮，true 显示，方便用户切换全屏模式。
  • selectionIndicator：
    • 类型：boolean
    • 说明：是否显示选取指示器组件，true 显示，用于指示用户选取操作。
  • animation：
    • 类型：boolean
    • 说明：是否显示左下角动画仪表，true 显示，提供地图相关动态信息。
  • homeButton：
    • 类型：boolean
    • 说明：是否显示返回cesium初始位置按钮，true 显示，方便用户回到地图初始视角。
  • geocoder：
    • 类型：boolean
    • 说明：是否显示位置查找工具，true 显示，用户可通过工具查找位置。
  • timeline：
    • 类型：boolean
    • 说明：是否显示下方时间轴，true 显示，用于展示与时间相关的地图信息（若有）。
  • navigationHelpButton：
    • 类型：boolean
    • 说明：是否显示右上角导航帮助按钮，true 显示，为用户提供导航操作帮助。
  • sceneModePicker：
    • 类型：boolean
    • 说明：是否显示二维三维投影方式选择器，true 显示，方便用户切换投影方式。
  • requestRenderMode：
    • 类型：boolean
    • 说明：是否开启手动渲染，true 开启，开启后可手动控制地图渲染。
  • maximumRenderTimeChange：
    • 类型：number
    • 说明：最大渲染时间变化，值为 Infinity，表示无限制，影响地图渲染时间性能。
  • baseLayerPicker：
    • 类型：boolean
    • 说明：是否显示底图选择器，true 显示，用户可切换不同底图。
  • orderIndependentTranslucency：
    • 类型：boolean
    • 说明：是否开启独立于顺序的半透明效果，true 开启，使半透明效果更合理。
  • sun：
    • 类型：boolean
    • 说明：是否显示太阳，true 显示，用于模拟真实场景光照效果。
  • moon：
    • 类型：boolean
    • 说明：是否显示月亮，true 显示，用于丰富地图场景效果。
  • fog：
    • 类型：boolean
    • 说明：是否显示场景雾效果，true 显示，营造不同视觉氛围。