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. Spring学习笔记 - 第三章 - AOP与Spring事务

    原文地址:Spring学习笔记 - 第三章 - AOP与Spring事务 Spring 学习笔记全系列传送门: Spring学习笔记 - 第一章 - IoC(控制反转).IoC容器.Bean的实例化与 ...

  2. latex文档的中文字体设置

    Latex文档的中文字体设置 近日在用latex写论文时遇到了中文字体设置的问题.具体问题如下,正文字体为宋体,摘要和关键词字体为仿宋.作为latex云玩家,我马上百度了中文字体的设置方法.搜索到了如 ...

  3. c#5.0(.net 4.5之后)的 Async+await+Task的异步机制的调试笔记

    1.)无返回值的情况(异步也是基于线程). using System; using System.Collections.Generic; using System.Linq; using Syste ...

  4. [常用工具] OpenCV_contrib库在windows下编译使用指南

    本文主要讲述opencv及opencv_contrib库在windows下基于vs2017编译安装指南.所用OpenCV版本为OpenCV4.4,编译平台为vs2017. 文章目录 1 下载 2 编译 ...

  5. Note: further occurrences of HTTP request parsing errors will be logged at DEBUG level

    云服务器很久没管过了,今天去看了下云服务器日志,不看不知道,一看吓一跳. 日志里竟然是一排的报错,再翻下此前的日志,每天都报一个错误: [http-nio-80-exec-10] org.apache ...

  6. Java集合 - ConcurrentHashMap

    介绍 ConcurrentHashMap 技术是为了解决问题而生的,ConcurrentHashMap 解决了多个线程同时操作一个 HashMap 时,可能出现的内部问题.当多个线程同时操作一个 Ha ...

  7. Ubuntu 安装 dlib 库时的疑难杂症

    解决方法 安装 C/C++环境 sudo apt install gcc sudo apt install g++ 激活 conda 环境 source activate OpenCV pip ins ...

  8. 多行文字自动换行居中--实测好用的很OK

    实测好用的很~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. angular打包部署设置publicPath文件目录及访问地址，解决打包完成后，运行打包文件，报错404，js，css未找到

    方案1.改变文件目录 不改变访问地址:XXXPRO 是部署的服务器上面的 文件夹名称 ng build --prod --base-href /XXXPRO 方案2.改变访问地址录同时改变文件目录-- ...

  10. 半个前端新手入门Electron的过程

    前言 先说几句废话,本人是一名 web 后端开发,主语言是 java,在学 Electron 之前,只会一点点 HTML和 JavaScript.本文讲的也是我学习 Electron 的过程,而非教程 ...