cesium底图加载底图切换基于天地图服务

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

weixin_30421809

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

阅读量4k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/y-y-y-y/p/10441439.html

本文介绍如何在Cesium中实现底图的加载和切换，特别是使用天地图服务进行操作。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cesium App</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding:0;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height:100%"></div>

    <script>
    //底图切换
    var img_tdt_yx = new Cesium.ProviderViewModel({
        name: "影像底图",
        tooltip: "影像底图",
        //显示切换的图标
        iconUrl: "./images/img_tdt_yx.png",
        creationFunction: function () {
            var esri = new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&