本文主要介绍如何在三维场景中绘制贴地形模式的线实体。需要使用【include-cesium-local.js】开发库实现,关键接口为CesiumZondy.Manager.EntityController类提供的appendLine()方法,实现贴地形线的添加绘制;可通过removeEntity(entity)移除。
效果如下图所示:
实现步骤
1. 引用开发库:
引用开发库:本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能;
2. 创建布局:
创建三维视图 Div 容器,构造三维场景控件 WebSceneControl,构造并设置鼠标位置信息显示控件,加载 Google 地图作为底图显示;
3. 加载地形数据:
加载地形数据:通过TerrainLayer类加载地形数据;
//构造地形层管理对象(视图)
var terrainLayer = new CesiumZondy.Layer.TerrainLayer({
viewer: webGlobe.viewer,
})
//添加三维地图文档:地形数据
terrainLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {})
4. 绘制贴地形线:
绘制贴地形线:首先构造CesiumZondy.Manager.EntityController几何绘制控制对象,然后调用appendLine()方法,设置信息:线名称、坐标点数组、线宽、线颜色、是否识别带高度的坐标、是否贴地形等信息,注意绘制贴地形线需设置贴地形参数为 true,并只需传入二维坐标点,即可实现贴地形线的添加绘制。
//构造几何绘制控制对象
var entityController = new CesiumZondy.Manager.EntityController({
viewer: webGlobe.viewer,
})
//坐标位置
var pointArr = [120.7642, 23.1537, 120.7688, 23.144, 120.7729, 23.1356, 120.7776, 23.1259]
//绘制贴地形线
terrainLine = entityController.appendLine(
//名称
'贴地形线',
//点数组
pointArr,
//线宽
3,
//线颜色
new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1),
//是否识别带高度的坐标
false,
//是否贴地形
true,
//附加属性
{}
)
关键接口
1.【三维场景控件类】Cesium.WebSceneControl(elementId, options)
参数名 | 类 型 | 说 明 |
elementId | Element | String | 放置视图的div的id |
options | Object | (可选)附加属性 |
· options属性主要参数
参数名 | 类 型 | 默认值 | 说 明 |
viewerMode | String | ‘3D’ | (可选)初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图 |
showInfo | Boolean | false | (可选)是否显示默认的属性信息框 |
animation | Boolean | true | (可选)默认动画控制不显示 |
baseLayerPicker | Boolean | true | (可选)是否创建图层控制显示小组件 |
fullscreenButton | Boolean | true | (可选)是否创建全屏控制按钮 |
vrButton | Boolean | false | (可选)是否创建VR按钮 |
2.【几何绘制控制类】CesiumZondy.Manager.EntityController
【method】appendLine(name, pointsArray, width, color, isHeight, clampToGround, options) → {Entity}:绘制线,可绘制贴地形线
参数名 | 类 型 | 说 明 |
name | String | 名称 |
pointsArray | Array | 点数组 |
width | Number | 线的宽度 |
color | Color | 线颜色(默认为蓝色) |
isHeight | Boolean | 设置是否识别带高度的坐标 |
clampToGround | Boolean | 设置是否贴地形 |
options | Object | 包含的附加属性 |
代码块
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<title>贴地形线绘制</title>
<!--引用第三方的jQuery脚本库-->
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
<!--引用Cesium脚本库文件-->
<script src="./static/libs/include-cesium-local.js"></script>
<!--引用示例页面样式表-->
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
<script>
//在JS脚本开发中使用严格代码规范模式,及时捕获一些不规范的行为,从而避免编程错误
'use strict';
//定义三维场景控件对象
var webGlobe;
//定义地形线
var terrainLine;
//加载三维场景
function init() {
//构造三维视图对象(视图容器div的id,三维视图设置参数)
webGlobe = new Cesium.WebSceneControl('GlobeView', {});
//构造视图功能管理对象(视图)
var sceneManager = new CesiumZondy.Manager.SceneManager({
viewer: webGlobe.viewer
});
//设置鼠标位置信息展示控件:经纬度、高程、视角高度(容器div的id)
sceneManager.showPosition('coordinate_location');
//构造地形层管理对象(视图)
var terrainLayer = new CesiumZondy.Layer.TerrainLayer({
viewer: webGlobe.viewer
});
//添加三维地图文档:地形数据
var {
protocol,
ip,
port
} = window.webclient;
terrainLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/terrain`, {});
//构造第三方图层对象
var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
viewer: webGlobe.viewer
});
//加载天地图
var tdtLayer = thirdPartyLayer.appendTDTuMap({
//天地图经纬度数据
url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
//开发token (请到天地图官网申请自己的开发token,自带token仅做功能验证随时可能失效)
token: "9c157e9585486c02edf817d2ecbc7752",
//地图类型 'vec'矢量 'img'影像 'ter'地形
ptype: "img"
});
//视点跳转(经度,纬度,视角高度,方位角,俯仰角,翻滚角)
sceneManager.flyToEx(120.74423856540966, 23.111851888648294, {
height: 2546,
heading: 40,
pitch: -15,
roll: 0
});
//添加贴地形线
add();
}
//添加贴地形线
function add() {
//构造几何绘制控制对象
var entityController = new CesiumZondy.Manager.EntityController({
viewer: webGlobe.viewer
});
//坐标位置
var pointArr = [
120.7642, 23.1537,
120.7688, 23.1440,
120.7729, 23.1356,
120.7776, 23.1259
];
//绘制贴地形线
terrainLine = entityController.appendLine(
//名称
'贴地形线',
//点数组
pointArr,
//线宽
3,
//线颜色
new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1),
//是否识别带高度的坐标
false,
//是否贴地形
true,
//附加属性
{}
);
}
</script>
</head>
<body onload="init()">
<!--三维场景容器-->
<div id='GlobeView'> </div>
<!--位置信息容器-->
<div id="coordinateDiv" class="coordinateClass">
<label id="coordinate_location"></label>
</div>
</body>
</html>