1. 概述

将路线加载到三维地图中，能直观显示道路的坡度变化，协同DEM和遥感影像，能极大丰富道路的可视化效果

本文此处基于Cesium，加载地形数据，叠加遥感影像，再叠加路网数据，形成三维地图，效果如下：

2. 代码实现

2.1 CDN引入

笔者这里使用 CDN 引入 Cesium，另外后续加载路网数据需要使用Ajax，这里引入jQuery

<!-- Include the CesiumJS JavaScript and CSS files -->

<script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

<link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2.2 加载地形

笔者这里使用Cesium的地形数据

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.

var viewer = new Cesium.Viewer('cesiumContainer', {

    terrainProvider: Cesium.createWorldTerrain()

});

2.3 加载遥感影像

笔者这里使用Bing的遥感影像

var bingStyle = [

    Cesium.BingMapsStyle.AERIAL_WITH_LABELS,

    Cesium.BingMapsStyle.COLLINS_BART,

    Cesium.BingMapsStyle.CANVAS_GRAY,

    Cesium.BingMapsStyle.CANVAS_LIGHT,

    Cesium.BingMapsStyle.CANVAS_DARK,

    Cesium.BingMapsStyle.ORDNANCE_SURVEY,

    Cesium.BingMapsStyle.ROAD,

    Cesium.BingMapsStyle.AERIAL,

];

var bingMapProvider = new Cesium.BingMapsImageryProvider({

    url: "https://dev.virtualearth.net",

    key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",

    mapStyle: bingStyle[7],

});

viewer.imageryLayers.addImageryProvider(bingMapProvider);

2.4 设置视点

笔者这里将视点即观察点设置为长沙岳麓山附近

// Fly the camera to Changsha at the given longitude, latitude, and height.

viewer.camera.flyTo({

    destination: Cesium.Cartesian3.fromDegrees(112.9448, 28.1708, 1200),

    orientation: {

        heading: Cesium.Math.toRadians(0.0),

        pitch: Cesium.Math.toRadians(-15.0),

    }

});

2.5 小结测试

到目前为止，整体代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Include the CesiumJS JavaScript and CSS files -->

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

    <link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>

<body>

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

    <script>

        // Your access token can be found at: https://cesium.com/ion/tokens.

        // Replace `your_access_token` with your Cesium ion access token.

        // Cesium.Ion.defaultAccessToken = 'your_access_token';

        // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.

        var viewer = new Cesium.Viewer('cesiumContainer', {

            terrainProvider: Cesium.createWorldTerrain()

        });

        var bingStyle = [

            Cesium.BingMapsStyle.AERIAL_WITH_LABELS,

            Cesium.BingMapsStyle.COLLINS_BART,

            Cesium.BingMapsStyle.CANVAS_GRAY,

            Cesium.BingMapsStyle.CANVAS_LIGHT,

            Cesium.BingMapsStyle.CANVAS_DARK,

            Cesium.BingMapsStyle.ORDNANCE_SURVEY,

            Cesium.BingMapsStyle.ROAD,

            Cesium.BingMapsStyle.AERIAL,

        ];

        var bingMapProvider = new Cesium.BingMapsImageryProvider({

            url: "https://dev.virtualearth.net",

            key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",

            mapStyle: bingStyle[7],

        });

        viewer.imageryLayers.addImageryProvider(bingMapProvider);

        // Fly the camera to Changsha at the given longitude, latitude, and height.

        viewer.camera.flyTo({

            destination: Cesium.Cartesian3.fromDegrees(112.9448, 28.1708, 1200),

            orientation: {

                heading: Cesium.Math.toRadians(0.0),

                pitch: Cesium.Math.toRadians(-15.0),

            }

        });

    </script>

    </div>

</body>

</html>

我们测试其效果，笔者这里使用的是VS Code的Live Server插件打开：

2.6 路网加载

路网（Ployline）的加载方式主要有两种：

  • 使用Viewer.entities
  • 使用Cesium.GroundPolylinePrimitive

此处笔者的示例数据如下：

112.91725386767241,28.18088394284931,47.28909519744873

112.91765398304703,28.18080062181755,52.27461015478515

112.94271541045252,28.18907071666184,34.729803589843755

112.94263996370492,28.18929672498712,44.796474171875005

112.94263996370492,28.18929672498712,44.796474171875005

112.94271541045252,28.18907071666184,34.729803589843755

112.94264628370074,28.190083096717974,36.39323925

112.94259227750655,28.18977721403619,24.70917075

112.94259227750655,28.18977721403619,24.70917075

112.94264628370074,28.190083096717974,36.39323925

112.94264628370074,28.190083096717974,36.39323925

112.94255004568583,28.19039785102342,46.969459281249996

112.94255004568583,28.19039785102342,46.969459281249996

112.94264628370074,28.190083096717974,36.39323925

112.94263996370492,28.18929672498712,44.796474171875005

112.942639007202,28.18939392688125,41.37971635546875

112.942639007202,28.18939392688125,41.37971635546875

112.94263996370492,28.18929672498712,44.796474171875005

112.942639007202,28.18939392688125,41.37971635546875

112.94259227750655,28.18977721403619,24.70917075

112.94259227750655,28.18977721403619,24.70917075

112.942639007202,28.18939392688125,41.37971635546875

112.94255707716033,28.19747999678687,78.00138119911344

112.94251096347146,28.197641540468794,62.308529711560176

112.94251096347146,28.197641540468794,62.308529711560176

112.94251086130572,28.19765191789022,62.308529711560176

112.94251086130572,28.19765191789022,62.308529711560176

112.94216077246415,28.19774676732831,88.14892901957208

112.94251096347146,28.197641540468794,62.308529711560176

112.94255707716033,28.19747999678687,78.00138119911344

112.94251086130572,28.19765191789022,62.308529711560176

112.94251096347146,28.197641540468794,62.308529711560176

数据文件的名字为trans_final_map_with_dem.csv，笔者使用Ajax加载并解析

前者Viewer.entities的代码如下：

$.ajax({

    url: 'trans_final_map_with_dem.csv',

    dataType: 'text',

}).done(successFunction);

var groundPolylineGeometryInstances = [];

function successFunction(data) {

    var allRows = data.split(/\r?\n|\r/);

    for (let i = 0; i < allRows.length - 1; i = i + 2) {

        var rowCell1 = allRows[i].split(',');

        var rowCell2 = allRows[i + 1].split(',');

        viewer.entities.add({

            polyline: {

                positions: Cesium.Cartesian3.fromDegreesArrayHeights([

                    rowCell1[0], rowCell1[1],rowCell1[2],

                    rowCell2[0], rowCell2[1],rowCell2[2]

                ]),

                width: 4.0,

                material: Cesium.Color.ORANGE,

                clampToGround: true

            }

        })

    }

}

后者Cesium.GroundPolylinePrimitive的代码如下：

$.ajax({

    url: 'trans_final_map_with_dem.csv',

    dataType: 'text',

}).done(successFunction);

var groundPolylineGeometryInstances = [];

function successFunction(data) {

    var allRows = data.split(/\r?\n|\r/);

    for (let i = 0; i < allRows.length - 1; i = i + 2) {

        var rowCell1 = allRows[i].split(',');

        var rowCell2 = allRows[i + 1].split(',');

        groundPolylineGeometryInstances.push(new Cesium.GeometryInstance({

            geometry: new Cesium.GroundPolylineGeometry({

                positions: Cesium.Cartesian3.fromDegreesArrayHeights([

                    rowCell1[0], rowCell1[1], rowCell1[2],

                    rowCell2[0], rowCell2[1], rowCell2[2]

                ]),

                width: 4.0,

            }),

            attributes: {

                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE.withAlpha(1.0))

            }

        }));

    }

    var groundPolylinePrimitive = new Cesium.GroundPolylinePrimitive({

        geometryInstances: groundPolylineGeometryInstances,

        show: true,

        appearance: new Cesium.PolylineColorAppearance()

    });

    viewer.scene.groundPrimitives.add(groundPolylinePrimitive)

}

注意：

  • 笔者这里的数据是每两个点构成一个Polyline，每一行最后是换行符'\n'
  • 数据量大时尽可能使用Cesium.GroundPolylinePrimitive

2.7 最终测试

整体代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Include the CesiumJS JavaScript and CSS files -->

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

    <link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>

<body>

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

    <script>

        // Your access token can be found at: https://cesium.com/ion/tokens.

        // Replace `your_access_token` with your Cesium ion access token.

        // Cesium.Ion.defaultAccessToken = 'your_access_token';

        // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.

        var viewer = new Cesium.Viewer('cesiumContainer', {

            terrainProvider: Cesium.createWorldTerrain()

        });

        var bingStyle = [

            Cesium.BingMapsStyle.AERIAL_WITH_LABELS,

            Cesium.BingMapsStyle.COLLINS_BART,

            Cesium.BingMapsStyle.CANVAS_GRAY,

            Cesium.BingMapsStyle.CANVAS_LIGHT,

            Cesium.BingMapsStyle.CANVAS_DARK,

            Cesium.BingMapsStyle.ORDNANCE_SURVEY,

            Cesium.BingMapsStyle.ROAD,

            Cesium.BingMapsStyle.AERIAL,

        ];

        var bingMapProvider = new Cesium.BingMapsImageryProvider({

            url: "https://dev.virtualearth.net",

            key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",

            mapStyle: bingStyle[7],

        });

        viewer.imageryLayers.addImageryProvider(bingMapProvider);

        $.ajax({

            url: 'trans_final_map_with_dem.csv',

            dataType: 'text',

        }).done(successFunction);

        // const polylines = new Cesium.PolylineCollection();

        var groundPolylineGeometryInstances = [];

        function successFunction(data) {

            var allRows = data.split(/\r?\n|\r/);

            for (let i = 0; i < allRows.length - 1; i = i + 2) {

                var rowCell1 = allRows[i].split(',');

                var rowCell2 = allRows[i + 1].split(',');

                //     viewer.entities.add({

                //         polyline: {

                //             positions: Cesium.Cartesian3.fromDegreesArrayHeights([

                //                 rowCell1[0], rowCell1[1],rowCell1[2],

                //                 rowCell2[0], rowCell2[1],rowCell2[2]

                //             ]),

                //             width: 4.0,

                //             material: Cesium.Color.ORANGE,

                //             clampToGround: true

                //         }

                //     })

                // }

                groundPolylineGeometryInstances.push(new Cesium.GeometryInstance({

                    geometry: new Cesium.GroundPolylineGeometry({

                        positions: Cesium.Cartesian3.fromDegreesArrayHeights([

                            rowCell1[0], rowCell1[1], rowCell1[2],

                            rowCell2[0], rowCell2[1], rowCell2[2]

                        ]),

                        width: 4.0,

                    }),

                    attributes: {

                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE.withAlpha(1.0))

                    }

                }));

                // }

            }

            var groundPolylinePrimitive = new Cesium.GroundPolylinePrimitive({

                geometryInstances: groundPolylineGeometryInstances,

                show: true,

                appearance: new Cesium.PolylineColorAppearance()

            });

            viewer.scene.groundPrimitives.add(groundPolylinePrimitive)

        }

        // Fly the camera to Changsha at the given longitude, latitude, and height.

        viewer.camera.flyTo({

            destination: Cesium.Cartesian3.fromDegrees(112.9448, 28.1708, 1200),

            orientation: {

                heading: Cesium.Math.toRadians(0.0),

                pitch: Cesium.Math.toRadians(-15.0),

            }

        });

    </script>

    </div>

</body>

</html>

最后效果如下：

参考资料

[1]Sandcastle

[2]Polylines on Terrain

[3]cesiumjs/ref-doc/Viewer

[4]遥感影像和DEM数据获取处理、GeoServer切片发布并使用Cesium加载

Cesium加载三维路线的更多相关文章

  1. Cesium加载三维倾斜摄影数据

    具体技术来源自论文 基于Cesium的倾斜摄影三维模型Web加载与应用研究. 技术架构图 应用实例 利用一个实际实例来详细说明如何利用Cesium加载倾斜摄影数据,并进行可视化和交互操作. 首先,利用 ...

  2. cesium加载倾斜摄影，添加billboard并注册点击事件

    完整示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  4. cesium加载gltf模型

    cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...

  5. Cesium加载地形数据只显示半个地球

    Cesium第0级地形包括两个瓦片:0/0/0.terrain,0/1/0.terrain,分别为左半球和右半球(具体参考:https://blog.csdn.net/u013929284/artic ...

  6. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  7. geotrellis使用（三十五）Cesium加载geotrellis TMS瓦片

    前言 做任何事情都不是想象中的那么简单.好久没有更新技术博客了,跟最近瞎忙有很大关系,虽说是瞎忙也抽空研究了些技术. 主要是前端渲染,像原生的WebGL和Cesium.WebGL写了几篇博客,自我感觉 ...

  8. cesium 加载倾斜摄影模型（这里有一坑）

    代码如下: // Construct the default list of terrain sources. var terrainModels = Cesium.createDefaultTerr ...

  9. cesium 加载TMS影像（已经切片）

    TMS影像数据格式 加载影像的代码: var layers = viewer.scene.imageryLayers; var blackMarble = layers.addImageryProvi ...

  10. cesium 加载shp格式的白模建筑

    ceisum加载shp格式的建筑.有两种思路,目前推荐第二种. 方法一:将shp格式转换为geojson格式,然后采用cesium提供的接口加载到ceisum中. 严重缺陷:在面对大场景问题,即数据量 ...

随机推荐

  1. day33-JSON&Ajax01

    JSON&Ajax01 JSON 在线文档 AJAX 在线文档 1.JSON介绍 JSON指的是JavaScript对象表示法( JavaScript Object Notation),JSO ...

  2. 微软宣布 S2C2F 已被 OpenSSF 采用

    开源供应链安全对大多数 IT 领导者来说是个日益严峻的挑战,围绕确保开发人员在构建软件时如何使用和管理开源软件 (OSS) 依赖项的稳健策略至关重要.Microsoft 发布安全供应链消费框架 (S2 ...

  3. 线程、GIL全局解释器锁、进程池与线程池

    目录 多进程实现TCP服务端并发 互斥锁代码实操 线程理论 创建线程的两种方式 多线程实现TCP服务端并发 线程的诸多特性 GIL全局解释器锁 验证GIL的存在 GIL与普通互斥锁 python多线程 ...

  4. JavaScript：操作符：逻辑运算符及其隐式转换数据类型

    逻辑非! 用来对布尔值进行取反,即!true = false: 当取反的变量不是布尔值,会进行隐式转换为布尔值: 非0的数字,都转换为true 非空字符串,转换为true 非空对象,转换为true I ...

  5. AWVS漏洞扫描器的使用

    前言 AWVS是一款强大的web漏洞扫描工具,扫描速度快,可针对特定的漏洞进行扫描测试,用于在按全人员对指定企业进行安全扫描以及测试人员对web应用检测漏洞. AWVS使用以及功能介绍 这里介绍的是使 ...

  6. 10、比较Bigdecimal类型是否相等的方法

    一.Bigdecimal.equals()详解: Bigdecimal的equals方法不仅仅比较值的大小是否相等,首先比较的是scale(scale是bigdecimal的保留小数点位数),也就是说 ...

  7. 安装pytorch-gpu的经验与教训

    首先说明 本文并不是安装教程,网上有很多,这里只是自己遇到的一些问题 我是以前安装的tensorflow-gpu的,但是发现现在的学术论文大部分都是用pytorch复现的,因此才去安装的pytorch ...

  8. 新下载了一个框架，然后npm install时候报错npm ERR! Maximum call stack size exceeded

    今天遇到这个npm ERR! Maximum call stack size exceeded报错 解决方案如下: 1.更新npm版本 //查看版本 npm -v //更新 npm install - ...

  9. 踩坑纪实----tomcat部署前端服务器不能访问中文文件夹或中文文件名问题

    修改tomcat的server.xml文件(解决含有中文的文件.图片的不能下载.显示的问题): 找到下列配置信息在xml文件中的位置,添加黑体字部分的参数即可(disableUploadTimeout ...

  10. Typora 最后一个免费版本

    介绍 Typora 是一款轻量级的 Markdown 编辑器,其最为出众的特点是: 所见即所得. Typora 于2021年11月23日推出了第一个正式版,并转为收费.不过价格也算合理,89元/3台设 ...