Cesium加载GeoJson数据并将平面拉伸为立体

最新推荐文章于 2024-06-04 14:48:53 发布
最新推荐文章于 2024-06-04 14:48:53 发布
阅读量603 收藏
点赞数
分类专栏： Cesium 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biabia579/article/details/132679768
版权

注意：我在使用Cesium会出现跨域问题，所以我使用nginx做的代理

1、准备工作

先去cesium ion申请token

2、cesium加载geojson数据

geojson数据可以通过此地址自己绘制生成geojson数据https://geojson.io

<div id="cesiumContainer"></div>

var cesiumAsset = '你的token';
        Cesium.Ion.defaultAccessToken = cesiumAsset;
        const viewer = new Cesium.Viewer('cesiumContainer', {
            homeButton: false,              //home按钮
            sceneModePicker: false,         //模式切换按钮
            baseLayerPicker: false,         //右上角的图层选择按钮
            navigationHelpButton: false,    //右上角的帮助按钮
            animation: false,               //左下角的动画仪表盘
            timeline: false,                //底部的时间轴
            fullscreenButton: false,        //右下角的全屏按钮
            vrButton: false,                //vr按钮
            infoBox: false,                 //点击实体的信息框
            selectionIndicator: false,      //点击实体的绿色小框
            geocoder: false,                //搜索框
        });
        viewer._cesiumWidget._creditContainer.style.display = "none";		//隐藏cesium ion

这样，你的地球就加载出来了
然后添加geojson数据到地球上

 Cesium.GeoJsonDataSource.load('http://localhost:3000/json/test1.json', {
            stroke: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 1)'),
            fill: Cesium.Color.PINK.withAlpha(0.5),
            strokeWidth: 3
        });

3 将加载的geojson数据立体拉伸

我这里是通过设置extrudedHeight设置实体的高度，在通过height设置离地面的高度来实现一层一层的效果，当然也可以只设置extrudedHeight实现拉伸效果

 Cesium.GeoJsonDataSource.load('http://localhost:3000/json/test1.json', {
            stroke: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 1)'),
            //fill: Cesium.Color.PINK.withAlpha(0.5),
            strokeWidth: 3
        }).then(function (dataSource) {
            viewer.dataSources.add(dataSource);
            var entities = dataSource.entities.values;
            var zrzHeight;
            var zrzLc;
            for (let i = 0; i < entities.length; i++) {
                let entity = entities[i];
                let name = entity.name;
                entity.polygon.outline = true;
                if (entity._properties._isDS._value == 1) {
                    for (var j = 0; j < entity._properties._lc._value; j++) {
                        var entityes = entity;
                        entityes._id = entity._properties._name._value + (j + 1);
                        var en = new Cesium.Entity(entityes);
                        en.polygon.material = Cesium.Color.fromCssColorString('rgba(255,255,255,1)');
                        en.polygon.extrudedHeight = (j + 1) * 5;
                        en.polygon.height = (j * 5);
                        viewer.entities.add(en);
                    }
                }
                else if (entity._properties._isDS._value == -1) {
                    for (var j = 0; j < entity._properties._lc._value; j++) {
                        var entityes = entity;
                        entityes._id = entity._properties._name._value + (j + 1);
                        var en = new Cesium.Entity(entityes);
                        en.polygon.material = Cesium.Color.fromCssColorString('rgba(255,255,255,1)');
                        en.polygon.extrudedHeight = - (j + 1) * 5;
                        en.polygon.height = - (j * 5);
                        viewer.entities.add(en);
                    }
                }
            }
        });

4、设置地球能看到地下

        viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;     //设置鼠标进入地下
        //设置地球透明度
        viewer.scene.globe.translucency.enabled = true;
        viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(400.0, 0.5, 2000, 0.9);

5、定位到指定位置

viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(30.015676845995472, 8.13054316835077, 1000),
            orientation: {
                heading: Cesium.Math.toRadians(348.4202942851978),
                pitch: Cesium.Math.toRadians(-89.74026687972041),
                roll: Cesium.Math.toRadians(0)
            },
            complete: function callback() {
                // 定位完成之后的回调函数
            }
        });

6、完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium加载GeoJson数据</title>
    <script src="http://localhost:3000/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="http://localhost:3000/Widgets/widgets.css" />
    <script src="http://localhost:3000/js/jquery.js"></script>
    <style type="text/css">
        html,
        body,
        #cesiumContainer{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        var cesiumAsset = '你的token';
        Cesium.Ion.defaultAccessToken = cesiumAsset;

        const viewer = new Cesium.Viewer('cesiumContainer', {
            homeButton: false,              //home按钮
            sceneModePicker: false,         //模式切换按钮
            baseLayerPicker: false,         //右上角的图层选择按钮
            navigationHelpButton: false,    //右上角的帮助按钮
            animation: false,               //左下角的动画仪表盘
            timeline: false,                //底部的时间轴
            fullscreenButton: false,        //右下角的全屏按钮
            vrButton: false,                //vr按钮
            infoBox: false,                 //点击实体的信息框
            selectionIndicator: false,      //点击实体的绿色小框
            geocoder: false,                //搜索框
        });
        viewer._cesiumWidget._creditContainer.style.display = "none";		//隐藏cesium ion
        viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;     //设置鼠标进入地下
        //设置地球透明度
        viewer.scene.globe.translucency.enabled = true;
        viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(400.0, 0.5, 2000, 0.9);

        // 将三维球定位到指定位置
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(30.015676845995472, 8.13054316835077, 1000),
            orientation: {
                heading: Cesium.Math.toRadians(348.4202942851978),
                pitch: Cesium.Math.toRadians(-89.74026687972041),
                roll: Cesium.Math.toRadians(0)
            },
            complete: function callback() {
                // 定位完成之后的回调函数
            }
        });
        
        //加载GeoJson数据
        Cesium.GeoJsonDataSource.load('http://localhost:3000/json/test1.json', {
            stroke: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 1)'),
            //fill: Cesium.Color.PINK.withAlpha(0.5),
            strokeWidth: 3
        }).then(function (dataSource) {
            viewer.dataSources.add(dataSource);
            var entities = dataSource.entities.values;
            var zrzHeight;
            var zrzLc;
            for (let i = 0; i < entities.length; i++) {
                let entity = entities[i];
                let name = entity.name;
                entity.polygon.outline = true;
                if (entity._properties._isDS._value == 1) {
                    for (var j = 0; j < entity._properties._lc._value; j++) {
                        var entityes = entity;
                        entityes._id = entity._properties._name._value + (j + 1);
                        var en = new Cesium.Entity(entityes);
                        en.polygon.material = Cesium.Color.fromCssColorString('rgba(255,255,255,1)');
                        en.polygon.extrudedHeight = (j + 1) * 5;
                        en.polygon.height = (j * 5);
                        viewer.entities.add(en);
                    }
                }
                else if (entity._properties._isDS._value == -1) {
                    for (var j = 0; j < entity._properties._lc._value; j++) {
                        var entityes = entity;
                        entityes._id = entity._properties._name._value + (j + 1);
                        var en = new Cesium.Entity(entityes);
                        en.polygon.material = Cesium.Color.fromCssColorString('rgba(255,255,255,1)');
                        en.polygon.extrudedHeight = - (j + 1) * 5;
                        en.polygon.height = - (j * 5);
                        viewer.entities.add(en);
                    }
                }
            }
        });
    </script>
</body>

</html>
biabia3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
49.（cesium篇）cesium接入geojson（地形透明）.zip
06-09
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049...“地图之家”专栏中的“49.（cesium篇）cesium接入geojson（地形透明）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium加载geojson矢量面+拉伸为建筑体+贴TIN地形
cky_123的博客
02-23 5213
.shp矢量面数据如何在cesium中拉伸为建筑体显示并贴地
cesium实战(1)、cesium 加载本地json、GeoJson数据
csl125的博客
07-19 8549
将本地文件，例如：3dtileset.json 上传到服务器上，通过绝对地址可以访问到，地址例如：https://www.mapdata.com/map-data/3dtileset.json，在vue中访问注意有可能存在跨域，可以使用代理。注意，每个图层都有自己的名称和透明度属性，我们可以根据需要为它们设置不同的值。方法来将第二个图层设置为顶层图层，将第一个图层设置为底层图层。：将数据源在集合中的位置降低一个位置，移动图层降低一个位置。: 将数据源在集合中的位置降低一个位置。将数据源降低到集合的底部。
cesium 模拟水流流动效果
最新发布
qq_37550440的博客
06-04 1478
模拟河流流动效果
Cesium基础知识-加载json数据
QQhelphelp的博客
01-20 3086
//加载json数据生成对应点，线，面，模型
Vue+Ts+Cesium：加载JSON数据
weixin_63499848的博客
04-17 1561
本文涉及Cesium加载JSON数据、异步操作、Promise对象的知识完成边界数据的加载，后续会以此为基础进行简单的拓展。诸如地图层次下钻以及信息弹窗。
cesium加载geoJson文件
Venchi的博客
07-03 861
中心思想：使用Cesium.GeoJsonDataSource.load()方法读取geoJson文件，解析后通过viewer.dataSources.add()方法添加到viewer中。
Cesium,加载面geojson, 鼠标点选高亮显示面边界
10-17
Cesium-1.35下测试通过，加载面geojson，点击选择面并高亮显示面边界，完成面积计算，欢迎下载使用
Cesium加载OSGB倾斜摄影数据Demo
06-01
Cesium加载OSGB倾斜摄影数据Demo，内附由OSGB倾斜摄影数据转换的Cesium3DTile数据，可直接运行。另：原始的OSGB倾斜摄影数据以及转换工具也可以由本人提供的资源进行下载。
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
Cesium加载超图S3M
01-11
超图的iClient三维Web服务可以将S3M数据转换为Cesium兼容的格式，如GEOJSON或CZML。以下是一般的步骤： 1. 部署超图的iClient三维Web服务，确保服务能够解析并发布S3M数据。 2. 在Cesium的JavaScript代码中，创建一...
Threejs项目实战之三：根据JSON格式数据创建三维地图
九仞山的专栏
12-18 4010
使用threejs根据json格式地图数据创建三维地图，并实现鼠标交互
Cesium学习——渲染、加载GeoJSON、调整位置
警警的博客
04-29 1670
上述几乎可以说是最简化的WebGL渲染流程，包含的基本要素有VBO，顶点缓冲对象 --------> 存顶点数据VAO，顶点数组对象（WebGL 2支持）--------> 存顶点属性Shader，着色器（包括顶点和片段着色器） --------> 运算和渲染Shader Program，着色器程序 --------> 连接着色器Texture，纹理（通常是一张图片）Framebuffer，帧缓冲对象（FBO）Renderbuffer，渲染缓冲对象（RBO）
Cesium 加载geojson数据类型点线面
taozi8957的博客
11-21 2042
Cesium 加载geojson数据类型点线面
WebGL，Cesium以及GeoJSON数据的简单介绍
水w的博客
03-08 2082
WebGL，Cesium以及GeoJSON数据的简单介绍
VUE3-Cesium（加载GeoJSON数据）
水w的博客
03-05 3524
VUE3-Cesium加载GeoJSON数据
QGIS 实现 3D 立体模型和地图
JData_Engineer的博客
04-08 5553
DEM 数据下载 还是说一下数据下载吧。 美国 DEM 数据下载（NOAA）： NOAA Data Access Viewer.https://coast.noaa.gov/dataviewer/#/lidar/search/ 全球30米 DEM 数据下载： http://viewfinderpanoramas.org/Coverage%20map%20viewfinderpanoramas_org3.htm 下载非常方便，想要哪里的数据直接点击对应的方框即可。 步骤1 加载和
cesium采用primitive方式加载geojson数据
weixin_47481630的博客
03-24 807
cesium加载geojson数据有自带的接口GeoJsonDataSource和演示 示例，使用的是entity方式来加载数据，而entity封装的是primitive，所以想用原生的primitive方式来加载geojson数据试试。使用的数据是全球国家区划的json，在这里分别给出两种方式的代码和效果。cesium采用primitive方式加载geojson数据。
cesium 加载geojson面数据 并修改样式
06-02
好的，我可以回答你关于Cesium加载GeoJSON面数据并且修改样式的问题。首先，你可以使用Cesium的GeoJsonDataSource来加载GeoJSON数据。以下是一个简单的示例代码： ```javascript // 创建GeoJSON数据源 var dataSource = new Cesium.GeoJsonDataSource(); // 加载GeoJSON数据 dataSource.load('your_geojson_file.geojson').then(function() { // 添加数据源到场景中 viewer.dataSources.add(dataSource); // 获取所有实体 var entities = dataSource.entities.values; // 遍历实体并修改样式 for (var i = 0; i < entities.length; i++) { var entity = entities[i]; entity.polygon.material = Cesium.Color.RED.withAlpha(0.5); entity.polygon.outline = true; entity.polygon.outlineColor = Cesium.Color.BLACK; } }); ``` 在这个示例代码中，我们首先创建了一个GeoJsonDataSource对象来加载数据。然后，我们使用load方法从GeoJSON文件中加载数据，并在加载完成后将数据源添加到场景中。接下来，我们使用entities属性获取所有实体并遍历它们，然后修改样式。在这个示例中，我们将面的材质设置为红色半透明，设置轮廓为黑色。你可以根据自己的需要修改实体的其他属性，例如高度、轮廓宽度等等。 希望这个示例能够帮助你加载和修改GeoJSON数据的样式。如果你还有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值