cesium加载高德、百度、腾讯地图

最新推荐文章于 2025-07-23 09:34:18 发布
原创最新推荐文章于 2025-07-23 09:34:18 发布 · 2.9k 阅读
12 ·
CC 4.0 BY-SA版权
文章标签：
#前端
本文展示了如何使用Cesium.js集成天地图、高德、百度、腾讯等不同地图源，并详细解释了BaiduImageryProvider的实现，包括创建地球视图、设置地形和加载影像层的过程。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
$(function () {
    var basemapo = {
        "天地图影像": {
            url: "http://t0.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=313cd4b28ed520472e8b43de00b2de56",
            layers:
            [{
                url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3&scene=0"
            }]
        },
        "高德影像": {
            url: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        },
        "高德电子": {
            url: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
        },
        "高德注记": {
            url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
        },
        "百度影像": {
            url: "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1"
        },
        "百度电子": {
            url: "https://maponline1.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=&from=jsapi2_0"
        },
        "百度黑色": {
            url: "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=dark"
        },
        "灰色底图": {
            url: "https://api.mapbox.com/styles/v1/marsgis/cki0a92b123qo1aluk0e5v7sb/tiles/512/{z}/{x}/{y}@2x"
        },
        "百度深蓝色":{
            url: "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=midnight"
        },
        "腾讯影像": {
            url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=244",
        },
        "腾讯电子": {
            url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297"
        },
        "腾讯注记": {
            url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297"
        },
        "腾讯黑色": {
            url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0"
        },
        "腾讯电子2": {
            url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3&scene=0"
        }
    };
    var viewers = []; // 地球视图数组
    Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMjg1ZGI2NS04MGQ1LTRjYjAtOGRjYi1mYzc3YTQ4MDZiNWMiLCJpZCI6MzYxMzQsImlhdCI6MTYxMjU2ODIyM30.E22DhsNFi4_L2rKXvlX3DCtVBGnLURH_6PBYWrcd95k";
    var jqBox = $("#box");
    for (var k in basemapo) {
        var htmls = [];
        htmls.push("<div style='position:relative;width:50%;height:400px'>");
        htmls.push("<div class='cesiumContainer' style='width:100%;height:400px'></div>");
        htmls.push("<span style='position:absolute; left:0; top: 0;color:white;background: black;'>" + k + "<span>");
        htmls.push("</div>");
        jqBox.append(htmls.join(""))
    }
    var cesiumContainers = $(".cesiumContainer", jqBox);

    Cesium.BaiduImageryProvider = function(options) {
        this._errorEvent = new Cesium.Event();
        this._tileWidth = 256;
        this._tileHeight = 256;
        this._maximumLevel = 18;
        this._minimumLevel = 1;
        let southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
        let northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
        this._tilingScheme = new Cesium.WebMercatorTilingScheme({
            rectangleSouthwestInMeters: southwestInMeters,
            rectangleNortheastInMeters: northeastInMeters
        });
        this._rectangle = this._tilingScheme.rectangle;
        this._resource = Cesium.Resource.createIfNeeded(options.url);
        this._tileDiscardPolicy = undefined;
        this._credit = undefined;
        this._readyPromise = undefined;
    };
     
    Object.defineProperties(Cesium.BaiduImageryProvider.prototype, {
        url: {
            get: function () {
                return this._resource.url;
            }
        },
        proxy: {
            get: function () {
                return this._resource.proxy;
            }
        },
        tileWidth: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
                }
                return this._tileWidth;
            }
        },
     
        tileHeight: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
                }
                return this._tileHeight;
            }
        },
     
        maximumLevel: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
                }
                return this._maximumLevel;
            }
        },
     
        minimumLevel: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
                }
                return this._minimumLevel;
            }
        },
     
        tilingScheme: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
                }
                return this._tilingScheme;
            }
        },
     
        tileDiscardPolicy: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
                }
                return this._tileDiscardPolicy;
            }
        },
     
        rectangle: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
                }
                return this._rectangle;
            }
        },
     
        errorEvent: {
            get: function () {
                return this._errorEvent;
            }
        },
        ready: {
            get: function () {
                return this._resource;
            }
        },
        readyPromise: {
            get: function () {
                return this._readyPromise;
            }
        },
        credit: {
            get: function () {
                if (!this.ready) {
                    throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
                }
                return this._credit;
            }
        },
    });
     
    Cesium.BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
        let xTileCount = this._tilingScheme.getNumberOfXTilesAtLevel(level);
        let yTileCount = this._tilingScheme.getNumberOfYTilesAtLevel(level);
        let url = this.url
            .replace("{x}", x - xTileCount / 2)
            .replace("{y}", yTileCount / 2 - y - 1)
            .replace("{z}", level)
            .replace("{s}", Math.floor(10 * Math.random()));
        console.log("zxy:" + level + ", " + x + ", " + y + "; " + url);
        return Cesium.ImageryProvider.loadImage(this, url);
    };
    // 绘制地球
    var idx = 0;
    for (var k in basemapo) {
        var viewer = new Cesium.Viewer(cesiumContainers[idx++], // **创建地球视图
            { // **设置地形
                // terrainProvider: Cesium.createWorldTerrain(),
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                baseLayerPicker: false,
                navigationHelpButton: false,
                animation: false,
                timeline: false,
                fullscreenButton: false,
                vrButton: false,
                infoBox: false,
                selectionIndicator: false
            });
        viewer.cesiumWidget.creditContainer.style.display = "none"; // 取消商标
        viewer.imageryLayers.get(0).show = false;
        if( k== "百度电子"|| k== "百度影像"|| k== "百度黑色"|| k== "百度深蓝色")
            viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
                url: basemapo[k].url
        }));
        if (k == "腾讯电子" || k == "腾讯影像") {
            var map= viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                url:
                    basemapo[k].url,
                customTags: {
                    sx: function (imageryProvider, x, y, level) {
                        return x >> 4
                    },
                    sy: function (imageryProvider, x, y, level) {
                        return ((1 << level) - y) >> 4
                    }
                }
            }));        }
        else if( k== "天地图影像")
        {
            viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({   
            //影像注记
            url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=token值",
            // layer: "tdtCiaLayer",
            // style: "default",
            // format: "image/jpeg",
            // tileMatrixSetID: "GoogleMapsCompatible",
            // show: true
          }));
          viewer.imageryLayers.addImageryProvider(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}&TileCol={TileCol}&style=default&format=tiles&tk=token值",
          // layer: "tdtCiaLayer",
          // style: "default",
          // format: "image/jpeg",
          // tileMatrixSetID: "GoogleMapsCompatible",
          // show: true
        }));
        }
        else
        loadImageLayer( basemapo[ k].url);

        if (basemapo[k].layers) {
            for( var i= 0; i< basemapo[k].layers.length; i++)
                loadImageLayer( basemapo[ k].layers[ i].url)
        }

        // 飞入
        viewer.camera.flyTo(
            {
                destination: Cesium.Cartesian3.fromDegrees(120.875746, 31.567942, 1091.471),
            });

        // 函数：加载影像
        function loadImageLayer( url)
        {
            viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                url: url
            }));
        }
    }
})