skyversation
/
cesium_example_hx


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0 0;
            margin: 0 0;
        }

        html,
        body,
        #viewerContainer {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="../skyscenery_example/lib/Cesium/Widgets/widgets.css">
</head>

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

<script src="../skyscenery_example/lib/Cesium/Cesium.js"></script>

<script>
    var viewer;
    viewer = new Cesium.Viewer('viewerContainer', {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择器
        imageryProvider: new Cesium.SingleTileImageryProvider({
            url: (function createColorCanvas(color) {
                var width = 1,
                    height = 1;
                var canvas = document.createElement("canvas");
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = color;
                ctx.fillRect(0, 0, width, height);
                return canvas.toDataURL();
            })("#ffffff00"),
            rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        }),
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
        homeButton: false, //是否显示Home按钮
        infoBox: false, //是否显示信息框 
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        shouldAnimate: false, //是否自动播放
    });
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(121.50201851567044, 31.1343102783797, 193456.31991791818), // 设置位置
        orientation: {
            heading: Cesium.Math.toRadians(0.0), // 方向
            pitch: Cesium.Math.toRadians(-90.0), // 倾斜角度
            roll: 0
        }
    });

    var arcgisImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    });
    viewer.scene.imageryLayers.addImageryProvider(arcgisImageryProvider);

    // 创建KML数据源
    const kmlDataSource = new Cesium.KmlDataSource();

    // 加载KML文件
    // kmlDataSource.load("http://10.235.245.174:10096/geoserver/xml_server/wms/kml?layers=xml_server%3ASR_50M", {
    // kmlDataSource.load("/proxy_geoserver/geoserver/xml_server/wms/kml?layers=xml_server%3ASR_50M", {    
    // kmlDataSource.load("http://121.43.55.7:8889/geoserver/kml/wms?service=WMS&version=1.1.0&request=GetMap&layers=kml%3A%E5%AE%9D%E5%B1%B1%E5%8C%BA_%E7%99%BE%E5%BA%A6%E5%BB%BA%E7%AD%91&bbox=121.32005044%2C31.26720841%2C121.51945165312986%2C31.49164427&width=682&height=768&srs=EPSG%3A4326&styles=&format=application%2Fvnd.google-earth.kml", {
    kmlDataSource.load("http://121.43.55.7:8889/geoserver/kml/wms?service=WMS&version=1.1.0&request=GetMap&layers=kml%3Ash-16-3-2-4326&bbox=121.09680174095568%2C30.581181555630494%2C121.55822451689005%2C30.97761267252767&width=768&height=659&srs=EPSG%3A4326&styles=&format=application%2Fvnd.google-earth.kml", {
    // kmlDataSource.load("./kml-SR_50M.kml", {
    // kmlDataSource.load("./kml-________ (1).kml", {
    // kmlDataSource.load("./facilities.kml", {
        // kmlDataSource.load("./xml_server-SR_50M.kml", {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas,
        clampToGround: true // 根据需要设置是否贴地
    }).then(function (dataSources) {
        // 将KML数据源添加到Cesium Viewer
        viewer.dataSources.add(dataSources);

        // 可以设置KML的可见性
        kmlDataSource.show = true;

        // 可以设置KML样式
        // kmlDataSource.style = {
        //     // 自定义样式
        // };
    }).otherwise(function (error) {
        // 处理错误
        console.error(error);
    });

    // 宝山shp wms 服务
    let baseUrl = 'http://121.43.55.7:8889/geoserver/kml/wms';
    var provider1 = new Cesium.WebMapServiceImageryProvider({
        url: baseUrl,
        enablePickFeatures: true,
        rectangle: Cesium.Rectangle.fromDegrees(121.32005044,31.26720841,121.51945165312986,31.49164427),
        layers: 'kml:宝山区_百度建筑', 
        parameters: {
            TRANSPARENT: true,
            format: 'image/png',
            version: '1.1.1',
            service: 'WMS'
        }
    });

    // 栅格 wms 服务
    // http://121.43.55.7:8889/geoserver/kml/wms?service=wms&request=GetMap&version=1.1.1&format=image/png&layers=kml:sh-16-3-2-4326&styles=raster&height=659&width=768&transparent=true&bbox=121.09680174095568,30.581181555630494,121.55822451689005,30.97761267252767&srs=EPSG:4326
    var provider2 = new Cesium.WebMapServiceImageryProvider({
        url: baseUrl,
        enablePickFeatures: true, 
        rectangle: Cesium.Rectangle.fromDegrees(121.09680174095568, 30.581181555630494, 121.55822451689005, 30.97761267252767),
        layers: 'kml:sh-16-3-2-4326',
        parameters: {
            TRANSPARENT: true,
            format: 'image/jpeg',
            version: '1.1.1',
            service: 'WMS'
        }
    });

    // var provider3 = new Cesium.WebMapServiceImageryProvider({
    //     url: baseUrl,
    //     enablePickFeatures: true, 
    //     rectangle: Cesium.Rectangle.fromDegrees(-179.99999999999997,-89.99999999998201,179.99999999996405,90.0),
    //     layers: 'kml:SR_50M',
    //     parameters: {
    //         TRANSPARENT: true,
    //         format: 'image/jpeg',
    //         version: '1.1.1',
    //         service: 'WMS'
    //     }
    // });

    // viewer.scene.imageryLayers.addImageryProvider(provider3)

</script>

</html>