Cesium|xt3d底图参数调整

最新推荐文章于 2023-11-13 09:45:00 发布

xt3d

最新推荐文章于 2023-11-13 09:45:00 发布

阅读量736

点赞数

文章标签： cesium webgl webgis xt3d javascript

本文链接：https://blog.csdn.net/xietao20/article/details/119858326

版权

cesium|xt3d 专栏收录该内容

89 篇文章 51 订阅

订阅专栏

该博客演示了如何使用Cesium和XT3D库调整地图底图的参数，包括透明度、夜景亮度、日间亮度、亮度、对比度、色调、饱和度和伽马值。通过Vue.js和Element UI组件实现滑块控制，实时预览调整效果。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>cesium|xt3d</title>
    <!-- 引入Cesium -->
    <script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

    <!-- 使用vue绑定控件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--  引入xt3d -->
    <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
    <style>
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        
        .form-container {
            position: absolute;
            left: 10px;
            top: 90px;
            padding: 10px 15px;
            border-radius: 4px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <div class="form-container" id="formContainer">
        <span>alpha：{{alpha}}</span>
        <el-slider v-model="alpha" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>

        <span>nightAlpha：{{nightAlpha}}</span>
        <el-slider v-model="nightAlpha" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>
        <span>dayAlpha：{{dayAlpha}}</span>
        <el-slider v-model="dayAlpha" :show-tooltip="true" @input="valueChange" :min="0" :max="1" :step="0.02"></el-slider>
        <span>brightness：{{brightness}}</span>
        <el-slider v-model="brightness" :show-tooltip="true" @input="valueChange" :min="0" :max="1" :step="0.02"></el-slider>
        <span>contrast：{{contrast}}</span>
        <el-slider v-model="contrast" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>

        <span>hue：{{hue}}</span>
        <el-slider v-model="hue" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>

        <span>saturation：{{saturation}}</span>
        <el-slider v-model="saturation" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>

        <span>gamma：{{gamma}}</span>
        <el-slider v-model="gamma" :step="0.02" :show-tooltip="true" @input="valueChange" :min="0" :max="1"></el-slider>
    </div>

    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.setView();
            },

            //初始化viewer
            initViewer(el) {
                let imageryProvider = new Cesium.UrlTemplateImageryProvider({
                    url: 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                });
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: true,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    shouldAnimate: true,
                    imageryProvider: imageryProvider
                });
                this.viewer.animation.container.style.visibility = 'hidden'; // 不显示动画控件 
                this.baseLayer = this.viewer.imageryLayers.get(0);
            },

            setView() {
                let flyToOpts = {
                    destination: {
                        x: -1234238.2731085536,
                        y: 5017976.951284946,
                        z: 3736561.3310439447
                    },
                    orientation: {
                        heading: 0.03750236711900712,
                        pitch: -1.3903850542685938,
                        roll: 0.0012991953125274236
                    },
                    duration: 1
                };
                this.viewer.scene.camera.flyTo(flyToOpts);
            },

            destroy() {
                this.viewer.entities.removeAll();
                this.viewer.imageryLayers.removeAll(true);
                this.viewer.destroy();
            }
        }

        xt3dInit.init("map3d");

        //界面控制
        let vm = new Vue({
            el: "#formContainer",
            data() {
                return {
                    alpha: 1,
                    nightAlpha: 1,
                    dayAlpha: 1,
                    brightness: 1,
                    contrast: 1,
                    hue: 0.1,
                    saturation: 1,
                    gamma: 0.24
                }
            },
            methods: {
                //绑定的值改变 
                valueChange() {
                    xt3dInit.baseLayer.alpha = this.alpha;
                    xt3dInit.baseLayer.nightAlpha = this.nightAlpha;
                    xt3dInit.baseLayer.dayAlpha = this.dayAlpha;
                    xt3dInit.baseLayer.brightness = this.brightness;
                    xt3dInit.baseLayer.contrast = this.contrast;
                    xt3dInit.baseLayer.hue = this.hue;
                    xt3dInit.baseLayer.saturation = this.saturation;
                    xt3dInit.baseLayer.gamma = this.gamma;
                }
            }
        })
    </script>
</body>

</html>

预览地址

xt3d 在线预览地址

xt3d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium|xt3d底图参数调整

Cesium|xt3d底图参数调整效果代码预览地址效果代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cesium|xt3d</title>
复制链接

扫一扫