使用 DT-SDK 创建可交互的地图与 GUI 控制面板本篇文章介绍了如何通过 DT-SDK 初始化三维地球场景，并使用

前言

在 WebGis 开发中，灵活的交互功能和视觉效果调整对于提升用户体验至关重要。通过 DT-SDK，我们可以轻松实现这些功能。这篇文章将展示如何使用 DT-SDK 初始化地图并通过 dat.GUI 库提供的控制面板实时调整地图的视觉效果。最终，我们将实现一个支持切换 2D、2.5D、3D 模式、显示或隐藏天空盒、太阳、月亮、大气层等多种效果的交互式地图。

组件库地址：www.shuqin.cc/component/s…

演示地址：www.shuqin.cc/preview/sta…

功能概述

本篇文章的目标是实现以下功能：

• 初始化带有高德影像地图的场景
• 动态切换 2D、2.5D、3D 视图模式
• 控制天空盒、太阳、月亮、大气层等视觉元素的显示与隐藏
• 使用 dat.GUI 提供的图形化界面调整这些设置

核心代码实现

1. 初始化 Viewer 和高德地图图层

在初始化 Viewer 的同时，我们会通过 DT-SDK 的 ImageryLayerFactory 添加高德地图作为基础图层。

let viewer = undefined;

function initViewer() {
    viewer = new DT.Viewer('viewer-container');
    
    // 创建高德地图图层
    let baseLayer = DT.ImageryLayerFactory.createImageryLayer(DT.ImageryType.AMAP, {
        style: 'img',
        crs: 'WGS84'
    });
    
    // 将图层添加到 Viewer 中
    viewer.addBaseLayer(baseLayer);
    
    addGuiController(); // 添加控制面板
}

DT.ready(initViewer);

2. 使用 GUI 控制面板动态调整场景效果

为了让用户可以实时调整场景的模式和效果，我们使用了 dat.GUI 库创建一个图形化控制面板。用户可以通过它来调整显示选项，比如天空盒、太阳、月亮、大气层、抗锯齿等。

function addGuiController() {
    let controls = {
        sceneMode: 3, // 初始设置为 3D 模式
        showSkyBox: true,
        showSun: true,
        showMoon: true,
        showAtmosphere: true,
        enableFxaa: true,
        shadows: false,
    };

    let gui = new dat.GUI();

    // 场景模式控制（2D、2.5D、3D）
    gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
        viewer.changeSceneMode(Number(value), 2);
    });

    // 控制天空盒显示
    gui.add(controls, 'showSkyBox').onChange(value => {
        viewer.setOptions({
            skyBox: { show: value }
        });
    });

    // 控制太阳显示
    gui.add(controls, 'showSun').onChange(value => {
        viewer.setOptions({
            showSun: value
        });
    });

    // 控制月亮显示
    gui.add(controls, 'showMoon').onChange(value => {
        viewer.setOptions({
            showMoon: value
        });
    });

    // 控制大气层显示
    gui.add(controls, 'showAtmosphere').onChange(value => {
        viewer.setOptions({
            showAtmosphere: value
        });
    });

    // 控制抗锯齿效果
    gui.add(controls, 'enableFxaa').onChange(value => {
        viewer.setOptions({
            enableFxaa: value
        });
    });

    // 控制阴影效果
    gui.add(controls, 'shadows').onChange(value => {
        viewer.setOptions({
            shadows: value
        });
    });
}

HTML 结构

为了正常渲染地图和 GUI 控制面板，确保页面上有相应的容器元素：

<div id="viewer-container" style="width: 100%; height: 100vh;"></div>

viewer-container 是三维场景渲染的容器，dat.GUI 会自动生成浮动的控制面板。

效果展示

• 启动页面后，你将看到高德地图作为基础图层显示在浏览器中。
• 用户可以通过 dat.GUI 的控制面板自由切换 2D、2.5D 和 3D 视图。
• 通过简单的点击操作，可以选择显示或隐藏天空盒、太阳、月亮和大气层，或启用/禁用阴影和抗锯齿效果。

总结

在本篇文章中，我们展示了如何使用 DT-SDK 初始化地图场景并通过 dat.GUI 提供的交互界面调整地图的各项视觉效果。这种方式不仅提升了用户体验，还极大地方便了开发者在项目中的调试和效果管理。下一篇文章中，我们将探讨更多关于数据展示与交互的高级功能，敬请期待。

参考资料

• DT-SDK 文档
• dat.GUI 官方文档