cesium 动态浮云框

最新推荐文章于 2025-06-17 10:55:52 发布

原创

最新推荐文章于 2025-06-17 10:55:52 发布 · 3.8k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #浮云框 #动态

本文介绍了如何使用Cesium库创建动态浮云框效果，详细探讨了关键的代码实现和配置过程，帮助读者理解在三维地球场景中动态展示浮云框的技术细节。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Cesium影像服务--在线服务扩展</title>
    <link href="../Cesium/Widgets/widgets.css" rel="stylesheet" />
    <link rel="stylesheet" href="./ysc/css/ysc.css">
    <link rel="stylesheet" href="./ysc/css/reset.css">
    <link rel="stylesheet" href="./ysc/css/layerPay.css">
    <link rel="stylesheet" href="./ysc/css/index.css">
    <!-- <script src="../Cesium/Cesium.js"></script> -->
    <script src="./ysc/jquery-1.10.2.min.js"></script>
    <script src="../../Cesium1.48/Cesium/Cesium.js"></script>
    <script src="./ysc/echarts.js"></script>
    <script src="1-2ImageryProvider-WebExtend.js"></script>
    <!-- <script src="./ysc/ysc.js"></script> -->
    <!-- <script src="./ysc/index.js"></script> -->
    <style>
    html,
    body,
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div class='ysc-dynamic-layer' id='one'>
        <div class='line'></div>
        <div class='main'>
            <div class="charts" id="chart-1"></div>
        </div>
    </div>
    <div id="creditContainer" style="display: none;"></div>
    <script>
    //一： WebMapTileServiceImageryProvider--天地图
    //var mtdt = new Cesium.WebMapTileServiceImageryProvider({
    //     url: 'http://t0.tianditu.com/img_w/wmts?',
    //     layer: 'img',
    //     style: 'default',
    //     format: 'tiles',
    //     tileMatrixSetID: 'w',
    //     credit: new Cesium.Credit('天地图全球影像服务'),
    //     maximumLevel: 18
    // });

    var mtdt = new Cesium.WebMapTileServiceImageryProvider({
        url: "http://{s}.tianditu.com/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=837264f46e683ec982d452e78d71052e",
        layer: "tdtBasicLayer",
        style: "default",
        maximumLevel: 20,
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true,
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
    })
    var noteLayer = 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=837264f46e683ec982d452e78d71052e",
        layer: "tdtBasicLayer",
        style: "default",
        maximumLevel: 20,
        format: "image/png",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true
    });

    //二： UrlTemplateImageryProvider-- esri
    var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, { url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}" });

    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: GoogleMap,
        contextOptions: {
            webgl