注册

argis api for javascript 三维球体背景更改

请问argis api for javascript 4.18 三维地球的背景如何隐藏

微信截图_20220512170305.png

 
2022-05-12 添加评论
分享

没有找到相关结果

    已邀请:

    张佳期

    赞同来自: ListeningLTG 、许丹石

     
    效果图：

    图4.png

     
    <html>
    

    
<head>
    
    <meta charset="utf-8" />
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    
    <title>
    
        Custom background for SceneView | Sample | ArcGIS API for JavaScript 4.21
    
    </title>
    
    <style>
    
        html,       
    
        #viewDiv {
    
            padding: 0;
    
            margin: 0;
    
            height: 100%;
    
            width: 100%;
    
        }
    

    

    
        body {
    
            background-image: url(https://sc.68design.net/photof ... 6g.jpg);
    
        }
    

    
        header {
    
            position: absolute;
    
            top: 0;
    
            right: 0;
    
            text-align: right;
    
            max-width: 400px;
    
            padding-right: 20px;
    
            color: #61399b;
    
            line-height: 1.5em;
    
        }
    

    

    
        #backgroundSetting {
    
            padding: 10px;
    
        }
    
    </style>
    

    
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esr ... ot%3B />
    
    <script src="https://js.arcgis.com/4.21/%26 ... gt%3B
    

    
    <script>
    
        require(["esri/views/SceneView", "esri/layers/TileLayer", "esri/Map", "esri/Ground"], (
    

    
            SceneView,
    
           
    
            TileLayer,
    
            Map,
    
            Ground
    
        ) => {
    
          
    
            // Create Point Cloud Layer
    
            const layer = new TileLayer({
    
               url:"https://ncportal.geoscene.cn/s ... ot%3B,
    
            });
    

    
            const map = new Map({
    
                ground: new Ground({
    
                    layers: ,
    
                    surfaceColor: "transparent",
    
                    opacity: 0,//给地面设置透明度
    
                }),
    
                layers: [layer]
    
            });
    

    
            const view = new SceneView({
    
                viewingMode: "local",
    
                container: "viewDiv",
    
                map: map,
    
                alphaCompositingEnabled: true,
    
                environment: {
    
                    // set a transparent background
    
                    background: {
    
                        type: "color",
    
                        color: [255, 252, 244, 0]
    
                    },
    
                    lighting: {
    
                        date: "Sun Jul 15 2018 08:00:00 GMT+0200 (W. Europe Daylight Time)"
    
                    },
    
                    // disable stars
    
                    starsEnabled: false,
    
                    // disable atmosphere
    
                    atmosphereEnabled: false
    
                },
    

    
                // limit zooming in and out
    
               // constraints: {
    
                 //   altitude: {
    
                   //     min: 20000000,
    
                     //   max: 25000000
    
                    //}
    
                //},
    

    
                //不要放大缩小等按钮
    
                //ui: {
    
                //components: ["attribution"]
    
                //},
    

    
                padding: {
    
                    top: 100
    
                }
    
            });
    

    
            const backgroundCheckbox = document.getElementById("background");
    
            backgroundCheckbox.addEventListener("change", (event) => {
    
                const backgroundColor = view.environment.background.color.clone();
    
                backgroundColor.a = event.target.checked ? 0 : 1;
    
                view.environment.background.color = backgroundColor;
    
            });
    

    
            view.ui.add("backgroundSetting", "bottom-left");
    
        });
    
    </script>
    
</head>
    

    
<body>
    

    
    <div id="viewDiv"></div>
    
    <div id="backgroundSetting" class="esri-widget">
    
        <input type="checkbox" id="background" checked /><label for="background">Transparent background</label
    
      >
    
    </div>
    
  </body>
    
</html>
    
    </script>
    
</head>
    

    
<body></body>
    

    
</html>
    回复时间：2022-05-13 09:42:53 2 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册


    Copyright © 2024