Arcgis 4.x版本之后。地图背景透明

最新推荐文章于 2024-01-20 18:39:16 发布

小木子。。。

最新推荐文章于 2024-01-20 18:39:16 发布

阅读量1k

点赞数 3

文章标签： arcgis js

本文链接：https://blog.csdn.net/Evil_0_0_0/article/details/122120780

版权

<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/photofiles/201312/4gYtkTv06g.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/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>

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

            SceneView,
            esriConfig,
            TileLayer,
            Map,
            Ground
        ) => {
            //访问内网下portal的门户地址
            esriConfig.portalUrl = "https://ncportal.geoscene.cn/portal";
            // Create Point Cloud Layer
            const layer = new TileLayer({
                portalItem: {
                    // autocasts as new PortalItem()
                    id: "3702922babfe4ffa9e08d959b38b423d"
                }
            });

            const map = new Map({
                ground: new Ground({
                    layers: [],
                    surfaceColor: "transparent",//,//设置地面背景色为绿色，alpha通道不起作用
                    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>

小木子。。。

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Arcgis 4.x版本之后。地图背景透明

<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
复制链接

扫一扫