Cesium实现绘制贴地形线

最新推荐文章于 2024-05-28 14:37:08 发布

原创最新推荐文章于 2024-05-28 14:37:08 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #gis

GIS开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用CesiumZondy库在三维场景中绘制贴地形线实体。通过构造EntityController对象并调用appendLine()方法，设置线名称、坐标点、线宽、颜色等属性，实现贴地线绘制。示例代码展示了具体实现步骤。

本文主要介绍如何在三维场景中绘制贴地形模式的线实体。需要使用【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>