Cesium三维球叠加天地图瓦片新

最新推荐文章于 2025-06-17 11:54:52 发布

炉火纯青-旺

最新推荐文章于 2025-06-17 11:54:52 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：三维 cesium

本文链接：https://blog.youkuaiyun.com/qq_34870529/article/details/86573170

cesium 同时被 2 个专栏收录

4 篇文章

订阅专栏

三维

2 篇文章

订阅专栏

本文介绍如何使用Cesium JavaScript库结合天地图服务，实现WebGIS应用的搭建。通过具体的代码示例，展示了如何配置Cesium Viewer，加载天地图的基础影像图层和注记图层，以及如何设置视图参数和禁用不必要的UI组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
    @import url(../Build/Cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    var token = "前往http://lbs.tianditu.gov.cn/authorization/authorization.html申请key";
    var viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, //是否创建动画小器件，左下角仪表
      baseLayerPicker: false, //是否显示图层选择器
      fullscreenButton: false, //是否显示全屏按钮
      geocoder: false, //是否显示geocoder小器件，右上角查询按钮  
      homeButton: false, //是否显示Home按钮
      infoBox: false, //是否显示信息框
      sceneModePicker: false, //是否显示3D/2D选择器
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, //是否显示时间轴
      navigationHelpButton: false, //是否显示右上角的帮助按钮
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=token",
        layer: "tdtImgBasicLayer",
        style: "default",
        format: "image/jpeg",
        show: false
      })

    });
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=token",
      layer: "tdtImgAnnoLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
      show: false
    }));
  </script>
  </script>
</body>

</html>

效果展示：