Cesium：加载百度地图

最新推荐文章于 2024-08-12 16:15:15 发布

KaiSarH

最新推荐文章于 2024-08-12 16:15:15 发布

阅读量8.7k

点赞数 9

分类专栏：第三方框架

本文链接：https://blog.csdn.net/KaiSarH/article/details/106242572

版权

第三方框架专栏收录该内容

148 篇文章 23 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Cesium-1.66/Build/Cesium/Widgets/widgets.css">
    <style>
        #map3d {
            height: 600px;
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
<div id="map3d">
</div>
</body>
<script src="Cesium-1.66/Build/Cesium/Cesium.js"></script>
<script src="jQuery.js"></script>
<script src="baidu.js"></script>
<script>
    viewer = new Cesium.Viewer('map3d', {
        selectionIndicator: false,
        animation: false,
        baseLayerPicker: false,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        useDefaultRenderLoop: true,
        showRenderLoopErrors: true,
        fullscreenButton: false,
        infoBox: false,
        imageryProvider: new BaiduImageryProvider({
            url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
        })
    });
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000.0),
    }); //  设置初始位置
    // 分辨率调整函数
    let adjustmentPixel = function () {
        // 判断是否支持图像渲染像素化处理
        var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
        if (supportsImageRenderingPixelated) {
            // 直接拿到设备的像素比例因子 - 如我设置的1.25
            var vtxf_dpr = window.devicePixelRatio;
            // 这个while我们在后面会做一个说明，但不是解决问题的说明
            while (vtxf_dpr >= 2.0) {
                vtxf_dpr /= 2.0;
            }
            // 设置渲染分辨率的比例因子
            viewer.resolutionScale = vtxf_dpr;
        }
    };
    adjustmentPixel();
    viewer.scene.postProcessStages.fxaa.enabled = false;
    //viewer.scene.globe.depthTestAgainstTerrain = true;
    viewer.scene.fxaa = false;
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (event) {
        let earthPosition  = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
        if (Cesium.defined(earthPosition)) {
            let ellipsoid = viewer.scene.globe.ellipsoid;
            let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
            let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let lon = Cesium.Math.toDegrees(cartographic.longitude);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

</script>
</html>

function BaiduImageryProvider(options) {
    this._errorEvent = new Cesium.Event();
    this._tileWidth = 256;
    this._tileHeight = 256;
    this._maximumLevel = 18;
    this._minimumLevel = 1;
    var southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
    var northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
    this._tilingScheme = new Cesium.WebMercatorTilingScheme({
        rectangleSouthwestInMeters: southwestInMeters,
        rectangleNortheastInMeters: northeastInMeters
    });
    this._rectangle = this._tilingScheme.rectangle;
    var resource = Cesium.Resource.createIfNeeded(options.url);
    this._resource = resource;
    this._tileDiscardPolicy = undefined;
    this._credit = undefined;
    this._readyPromise = undefined;
}

Cesium.defineProperties(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;
        }
    },
});

BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
    var r = this._tilingScheme.getNumberOfXTilesAtLevel(level);
    var c = this._tilingScheme.getNumberOfYTilesAtLevel(level);
    var s = this.url.replace("{x}", x - r / 2).replace("{y}", c / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
    return Cesium.ImageryProvider.loadImage(this, s);
};