main

分支 (1)

管理

管理

main

cesium_pdf
/
3.11数据加载篇_单张图片加载.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影像加载_单张图片底图加载</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
    </div>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
        var worldTerrain = Cesium.createWorldTerrain({
            requestWaterMask: true, //水遮罩
            requestVertexNormals: true //顶点法线
        });
        var viewer = new Cesium.Viewer("cesiumContainer", {
            terrainProvider: worldTerrain,
            baseLayerPicker:false, //图层选择控件
            animation: false, //是否显示动画工具
            timeline: false,  //是否显示时间轴工具
            fullscreenButton: false,  //是否显示全屏按钮工具

        });
        //左下角坐标，右上角坐标 这个矩形将用于定义图片在地图上的显示范围
		var rectangle=Cesium.Rectangle.fromDegrees(114.38004,30.51667,114.40471,30.53045); //设置图片范围 矩形框
		viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
			url:"./RasterImage/图片/single.jpg",
			rectangle: rectangle //设置图片范围
		}))
		viewer.camera.setView({
			destination: Cesium.Rectangle.fromDegrees(114.38004,30.51667,114.40471,30.53045) // 指定为经度和纬度坐标的二维区域
		});
    </script>
</body>

</html>