The Property System.html

最新推荐文章于 2024-09-06 23:08:38 发布

学无止境慢慢来

最新推荐文章于 2024-09-06 23:08:38 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏： cesium_demo

本文链接：https://blog.youkuaiyun.com/weixin_42193179/article/details/85990693

cesium_demo 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用Cesium在Web环境中创建并渲染地形多边形，通过具体的代码示例展示了如何定义和显示Wyoming州的地形轮廓，同时探讨了Cesium中属性系统的应用，包括常量属性的使用和时间相关的属性值获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>The Property System</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
        @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
    function startup(Cesium) {
        'use strict';
        //Sandcastle_Begin
        let viewer = new Cesium.Viewer('cesiumContainer');
        let wyoming = viewer.entities.add({
            name : 'Wyoming',
            polygon : {
                hierarchy : Cesium.Cartesian3.fromDegreesArray([
                    -109.080842,45.002073,
                    -105.91517,45.002073,
                    -104.058488,44.996596,
                    -104.053011,43.002989,
                    -104.053011,41.003906,
                    -105.728954,40.998429,
                    -107.919731,41.003906,
                    -109.04798,40.998429,
                    -111.047063,40.998429,
                    -111.047063,42.000709,
                    -111.047063,44.476286,
                    -111.05254,45.002073]),
                height : 0,
                material : Cesium.Color.RED.withAlpha(0.5),
                outline : true,
                outlineColor : Cesium.Color.BLACK
            }
        });

        viewer.zoomTo(wyoming);

        console.log(wyoming.polygon.outline);
        // ConstantProperty {_value: true, _hasClone: false, _hasEquals: false, _definitionChanged: Event}
        console.log(typeof wyoming.polygon.outline);
        // object
        // 从技术上讲，如果我们确定正在查询的属性是常量属性，则可以避免传递时间，但是始终指定它是一个很好的实践。
        // 为了从多边形中检索Outline属性，我们将调用下面的代码，其中时间是当前场景时间。
        console.log(wyoming.polygon.outline.getValue(viewer.clock.currentTime));  // true
        console.log(wyoming.polygon.outline.getValue());  // true

        // Sandcastle_End
        Sandcastle.finishedLoading();
    }

    if (typeof Cesium !== 'undefined') {
        startup(Cesium);
    }
    else if (typeof require === 'function') {
        require(['Cesium'], startup);
    }
    </script>
</body>
</html>