前言

在 WebGis 开发中，摄像机的行为控制是至关重要的一部分。通过调整摄像机的旋转、缩放、倾斜等操作，用户可以获得更自然和灵活的交互体验。在本篇文章中，我们将展示如何通过 DT-SDK 与 dat.GUI 相结合，控制地图的摄像机操作，赋予用户更大的操控自由度。

组件库地址：…

演示地址：…

核心功能概述

本文将实现以下功能：

核心代码实现1. 初始化 Viewer 和高德地图图层

首先，我们通过 DT-SDK 初始化 Viewer，并添加高德地图作为基础图层：

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(); // 添加 GUI 控制面板
}
DT.ready(initViewer);

2. 添加 GUI 控制面板

我们通过 dat.GUI 提供的控制面板，让用户可以动态调整摄像机的行为。以下是实现控制的代码：

function addGuiController() {
    let controls = {
        mouseMode: DT.MouseMode.LEFT_MIDDLE,
        enableInputs: true,
        enableRotate: true,
        enableTilt: true,
        enableTranslate: true,
        enableZoom: true,
        enableCollisionDetection: true,
        minimumZoomDistance: 1.0,
        maximumZoomDistance: 40489014.0,
    };
    let gui = new dat.GUI();
    // 切换鼠标操作模式
    gui.add(controls, 'mouseMode', { 'left+middle': DT.MouseMode.LEFT_MIDDLE, 'left+right': DT.MouseMode.LEFT_RIGHT }).onChange(value => {
        viewer.changeMouseMode(Number(value));
    });
    // 启用/禁用摄像机输入
    gui.add(controls, 'enableInputs').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableInputs: value
            }
        });
    });
    // 控制摄像机旋转
    gui.add(controls, 'enableRotate').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableRotate: value
            }
        });
    });
    // 控制摄像机倾斜
    gui.add(controls, 'enableTilt').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableTilt: value
            }
        });
    });
    // 控制摄像机平移
    gui.add(controls, 'enableTranslate').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableTranslate: value
            }
        });
    });
    // 控制摄像机缩放
    gui.add(controls, 'enableZoom').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableZoom: value
            }
        });
    });
    // 启用/禁用碰撞检测
    gui.add(controls, 'enableCollisionDetection').onChange(value => {
        viewer.setOptions({
            cameraController: {
                enableCollisionDetection: value
            }
        });
    });
    // 设置最小缩放距离
    gui.add(controls, 'minimumZoomDistance', 1.0, 40489014.0, 1000).onChange(value => {
        viewer.setOptions({
            cameraController: {
                minimumZoomDistance: value
            }
        });
    });
    // 设置最大缩放距离
    gui.add(controls, 'maximumZoomDistance', 1.0, 40489014.0, 1000).onChange(value => {
        viewer.setOptions({
            cameraController: {
                maximumZoomDistance: value
            }
        });
    });
}

HTML 结构

为了确保地图与控制面板的正常显示，需要有一个容器来渲染 Viewer：

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

效果展示

总结

本篇文章展示了如何使用 DT-SDK 初始化地图场景，并通过 dat.GUI 动态调整摄像机行为。摄像机操作的灵活性为用户提供了更强的交互体验，同时也让开发者能够更好地管理地图的可视范围与交互方式。下一篇文章将进一步介绍如何结合数据展示进行互动，敬请期待。

参考资料