运行天地图Cesium.js三维服务案例

零、技术选型及相关网址

技术选型：Vue2、VueCli5、Cesium.js、天地图
相关网址：三维服务 - 天地图帮助文档

一、cesium 初始化参数解析

initializeCesium() {
  this.viewer = new Cesium.Map("cesiumContainer", {
    shouldAnimate: true, // 是否启用动画效果。
    selectionIndicator: false, // 是否显示选中指示器。
    baseLayerPicker: false, // 是否显示底图选择器。
    fullscreenButton: false, // 是否显示全屏按钮。
    geocoder: false, // 是否显示地理编码器（用于地址搜索）。
    homeButton: false, // 是否显示“回到初始视角”的按钮。
    infoBox: false, // 是否显示信息框。
    sceneModePicker: false, // 是否显示场景模式选择器（2D、3D、哥伦布视图）。
    timeline: false, // 是否显示时间线。
    navigationHelpButton: false, // 是否显示导航帮助按钮。
    navigationInstructionsInitiallyVisible: false, // 是否初始显示导航指示。
    showRenderLoopErrors: false, // 是否显示渲染循环错误。
    shadows: false, // 是否渲染阴影。
  });
}

二、配置相关属性

setupConfigProp() {
  // 抗锯齿。
  this.viewer.scene.fxaa = false;
  // 禁用快速近似抗锯齿(FXAA)后处理阶段。
  this.viewer.scene.postProcessStages.fxaa.enabled = false;

  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    this.viewer.resolutionScale = window.devicePixelRatio;
  }

  // 启用地球大气层效果（如地平线上的光晕）。
  this.viewer.scene.globe.showGroundAtmosphere = true;

  // 设置相机的最大俯仰角度，这里设置为-20度（弧度制）。
  this.viewer.scene.screenSpaceCameraController.constrainedPitch =
    Cesium.Math.toRadians(-20);

  // 禁用相机在视角重置时自动调整俯仰和方向。
  this.viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;

  // 设置相机缩放的惯性，0.5 表示中等惯性。
  this.viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;

  // 设置相机允许的最小缩放距离，单位米。
  this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;

  // 设置相机允许的最大缩放距离，单位米。
  this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;

  // 定义相机缩放的触发事件类型。
  this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG, // 右键拖拽
    Cesium.CameraEventType.WHEEL, // 鼠标滚轮
    Cesium.CameraEventType.PINCH, // 触摸屏捏合
  ];

  // 定义相机倾斜的触发事件类型。
  this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG, // 中键拖拽
    Cesium.CameraEventType.PINCH, // 触摸屏捏合
    {
      eventType: Cesium.CameraEventType.LEFT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    }, // 按住 CTRL 键的同时左键拖拽
    {
      eventType: Cesium.CameraEventType.RIGHT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    }, // 按住 CTRL 键的同时右键拖拽
  ];
}

三、叠加影像服务

setupImageryLayers() {
  // 叠加影像服务(通过使用指定的URL模板请求图块来提供图像)
  const imgMap = new Cesium.UrlTemplateImageryProvider({
    url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
    subdomains: subdomains,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18,
  });
  this.viewer.imageryLayers.addImageryProvider(imgMap);

  // 叠加国界服务
  const iboMap = new Cesium.UrlTemplateImageryProvider({
    url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
    subdomains: subdomains,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 10,
  });
  this.viewer.imageryLayers.addImageryProvider(iboMap);
},

四、点击事件、双击事件

setupEventHandlers() {
  // 取消默认的双击事件
  this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );

  // 添加鼠标点击事件监听器
  const handler = new Cesium.ScreenSpaceEventHandler(
    this.viewer.scene.canvas
  );

  handler.setInputAction((click) => {
    const earthPosition = this.viewer.scene.pickPosition(click.position);

    if (Cesium.defined(earthPosition)) {
      const cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude);
      const height = cartographic.height; // 获取高度信息

      console.log(`经度: ${longitude}, 纬度: ${latitude}, 高度: ${height}`);
      // 在这里可以根据经纬度进行进一步的处理
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

鼠标点击事件输入为：

五、相机飞行位置

flyToPosition() {
  // 将三维球定位到中国
  this.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees( 121.28148939885521, 30.702808303473166, 700 ),
    orientation: {
      heading: Cesium.Math.toRadians(334.8202942851978),
      pitch: Cesium.Math.toRadians(-45),
      roll: Cesium.Math.toRadians(0),
    },
    complete: function callback() {
      // 定位完成之后的回调函数
    },
  });
}

六、叠加三维地名服务

// 叠加三维地名服务
addGeoWTFS() {
  // 叠加三维地名服务
  const wtfs = new Cesium.GeoWTFS({
    viewer: this.viewer,
    //三维地名服务，使用wtfs服务
    subdomains: cesiumConfig.subdomains,
    metadata: {
      boundBox: {
        minX: -180,
        minY: -90,
        maxX: 180,
        maxY: 90,
      },
      minLevel: 1,
      maxLevel: 20,
    },
    depthTestOptimization: true,
    dTOElevation: 15000,
    dTOPitch: Cesium.Math.toRadians(-70),
    aotuCollide: true, //是否开启避让
    collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
    serverFirstStyle: true, //服务端样式优先
    labelGraphics: {
      font: "28px sans-serif",
      fontSize: 28,
      fillColor: Cesium.Color.WHITE,
      scale: 0.5,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      showBackground: false,
      backgroundColor: Cesium.Color.RED,
      backgroundPadding: new Cesium.Cartesian2(10, 10),
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      eyeOffset: Cesium.Cartesian3.ZERO,
      pixelOffset: new Cesium.Cartesian2(5, 5),
      disableDepthTestDistance: undefined,
    },
    billboardGraphics: {
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      eyeOffset: Cesium.Cartesian3.ZERO,
      pixelOffset: Cesium.Cartesian2.ZERO,
      alignedAxis: Cesium.Cartesian3.ZERO,
      color: Cesium.Color.WHITE,
      rotation: 0,
      scale: 1,
      width: 18,
      height: 18,
      disableDepthTestDistance: undefined,
    },
  });

  // 三维地名服务，使用wtfs服务
  wtfs.getTileUrl = function () {
    return (
      cesiumConfig.tdtUrl +
      "mapservice/GetTiles?lxys={z},{x},{y}&tk=" +
      cesiumConfig.token
    );
  };

  // 三维图标服务
  wtfs.getIcoUrl = function () {
    return (
      cesiumConfig.tdtUrl +
      "mapservice/GetIcon?id={id}&tk=" +
      cesiumConfig.token
    );
  };

  wtfs.initTDT([
    {
      x: 6,
      y: 1,
      level: 2,
      boundBox: { minX: 90, minY: 0, maxX: 135, maxY: 45 },
    },
    {
      x: 7,
      y: 1,
      level: 2,
      boundBox: { minX: 135, minY: 0, maxX: 180, maxY: 45 },
    },
    {
      x: 6,
      y: 0,
      level: 2,
      boundBox: { minX: 90, minY: 45, maxX: 135, maxY: 90 },
    },
    {
      x: 7,
      y: 0,
      level: 2,
      boundBox: { minX: 135, minY: 45, maxX: 180, maxY: 90 },
    },
    {
      x: 5,
      y: 1,
      level: 2,
      boundBox: { minX: 45, minY: 0, maxX: 90, maxY: 45 },
    },
    {
      x: 4,
      y: 1,
      level: 2,
      boundBox: { minX: 0, minY: 0, maxX: 45, maxY: 45 },
    },
    {
      x: 5,
      y: 0,
      level: 2,
      boundBox: { minX: 45, minY: 45, maxX: 90, maxY: 90 },
    },
    {
      x: 4,
      y: 0,
      level: 2,
      boundBox: { minX: 0, minY: 45, maxX: 45, maxY: 90 },
    },
    {
      x: 6,
      y: 2,
      level: 2,
      boundBox: { minX: 90, minY: -45, maxX: 135, maxY: 0 },
    },
    {
      x: 6,
      y: 3,
      level: 2,
      boundBox: { minX: 90, minY: -90, maxX: 135, maxY: -45 },
    },
    {
      x: 7,
      y: 2,
      level: 2,
      boundBox: { minX: 135, minY: -45, maxX: 180, maxY: 0 },
    },
    {
      x: 5,
      y: 2,
      level: 2,
      boundBox: { minX: 45, minY: -45, maxX: 90, maxY: 0 },
    },
    {
      x: 4,
      y: 2,
      level: 2,
      boundBox: { minX: 0, minY: -45, maxX: 45, maxY: 0 },
    },
    {
      x: 3,
      y: 1,
      level: 2,
      boundBox: { minX: -45, minY: 0, maxX: 0, maxY: 45 },
    },
    {
      x: 3,
      y: 0,
      level: 2,
      boundBox: { minX: -45, minY: 45, maxX: 0, maxY: 90 },
    },
    {
      x: 2,
      y: 0,
      level: 2,
      boundBox: { minX: -90, minY: 45, maxX: -45, maxY: 90 },
    },
    {
      x: 0,
      y: 1,
      level: 2,
      boundBox: { minX: -180, minY: 0, maxX: -135, maxY: 45 },
    },
    {
      x: 1,
      y: 0,
      level: 2,
      boundBox: { minX: -135, minY: 45, maxX: -90, maxY: 90 },
    },
    {
      x: 0,
      y: 0,
      level: 2,
      boundBox: { minX: -180, minY: 45, maxX: -135, maxY: 90 },
    },
  ]);
}