Cesium学习四：使用entity绘制polygon

最新推荐文章于 2024-03-06 16:15:08 发布
最新推荐文章于 2024-03-06 16:15:08 发布
阅读量8.5k 收藏 39
点赞数 11
分类专栏： gis 文章标签： cesium entity polygon 多边形 贴地
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014523388/article/details/127060164
版权

一、多边形绘制代码

上一篇介绍了线的绘制，本篇介绍多边形的绘制，具体代码如下（别忘了使用你自己的Token，基础环境不知道怎么布置的请参考开发环境搭建），绘制的结果如下图所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></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 = '你的Token; //替换成你的Token
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:true,//控制右上角第一个位置的查找工具
        homeButton:true,//控制右上角第二个位置的home图标
        sceneModePicker:true,//控制右上角第三个位置的选择视角模式，2d，3d
        baseLayerPicker:true,//控制右上角第四个位置的图层选择器
        navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮
        animation:false,//控制左下角的动画器件
        timeline:false,//控制下方时间线
        fullscreenButton:false,//右下角全屏按钮
        vrButton:false,//右下角vr按钮
        shouldAnimate: true,//允许动画同步
        infoBox : true, //不显示点击要素之后显示的信息
        terrainProvider: Cesium.createWorldTerrain()
    });

    viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息

    let polygon_height = viewer.entities.add({
        name: "polygon_height",
        polygon: {
            show: true,
            hierarchy: Cesium.Cartesian3.fromDegreesArray([
                110.0,
                30.0,
                120.0,
                30.0,
                115.0,
                40.0,
            ]),
            height: 100000,
            material: Cesium.Color.CYAN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK,
        }
    })

    // let polygon_clamp_to_ground = viewer.entities.add({
    //     name: "polygon_clamp_to_ground",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //     }
    // })

    // let polygon_height_and_extruded_height = viewer.entities.add({
    //     name: "polygon_height_and_extruded_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         height: 50000,
    //         extrudedHeight: 100000,
    //         // fill: false,
    //         fill: true,
    //         // material: Cesium.Color.CYAN.withAlpha(0.5),
    //         material: Cesium.Color.CYAN,

    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //         outlineWidth: 5.0,

    //         // closeTop: false,
    //         // closeBottom: false,
    //     }
    // })

    // let polygon_extruded_height = viewer.entities.add({
    //     name: "polygon_extruded_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
    //             110.0,
    //             30.0,
    //             100000,
    //             120.0,
    //             30.0,
    //             100000,
    //             115.0,
    //             40.0,
    //             300000,
    //         ]),
    //         // height: 50000,
    //         extrudedHeight: -50000,
    //         // fill: false,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         // material: Cesium.Color.CYAN,

    //         outline: true,
    //         outlineColor: Cesium.Color.RED,
    //         outlineWidth: 5.0,
    //         perPositionHeight: true,
    //     }
    // })

    // let polygon_per_position_height = viewer.entities.add({
    //     name: "polygon_per_position_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
    //             110.0,
    //             41.0,
    //             0.0,
    //             115.0,
    //             41.0,
    //             500000.0,
    //             120.0,
    //             41.0,
    //             0.0,
    //         ]),
    //         perPositionHeight: true,
    //         // perPositionHeight: false,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //         outlineWidth: 10.0
    //     }
    // })

    // let polygon_extruded_height_close_top = viewer.entities.add({
    //     name: "polygon_extruded_height_close_top",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         height: 50000,
    //         extrudedHeight: 100000,
    //         material: Cesium.Color.CYAN,

    //         outline: true,
    //         // outlineColor: Cesium.Color.RED,
    //         outlineWidth: 5.0,

    //         closeTop: false,
    //         closeBottom: false,
    //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0)
    //     }
    // })

    viewer.flyTo(viewer.entities);
    </script>
</body>
</html>

二、图解参数

2.1 name

polygon的名称，在鼠标点击点弹出的infoBox中会显示该名称。
name

2.2 polygon

多边形的绘制参数

2.2.1 show

是否显示，true为显示，false为不显示，默认为显示

2.2.2 hierarchy

多边形的坐标，为笛卡尔坐标系的地心坐标，可以有两种形式

一种是带高程值的，如Cesium.Cartesian3.fromDegreesArrayHeights([第1个点的经纬度高程, 第2个点的经纬度高程, ...]) ，如果想要高程值起作用，需设置perPositionHeight: true

另一种是不带高程的，只有经纬度，如Cesium.Cartesian3.fromDegreesArrayHeights([第1个点的经纬度, 第2个点的经纬度, ...])，此时的高程默认为0，可配合heightReference: Cesium.HeightReference.CLAMP_TO_GROUND参数让多边形贴地

2.2.3 height

多边形的高程，单位米，即便hierarchy设置了高程，只要perPositionHeight: false，多边形都会以height作为高程值，默认值为0，下图为设置了height: 100000的效果
height=100000

2.2.4 heightReference

多边形的高程参考面，默认值为Cesium.HeightReference.NONE，表示使用绝对高程，如果想要多边形贴在地表，可设置为Cesium.HeightReference.CLAMP_TO_GROUND，下图为贴地的效果
贴地

2.2.5 extrudedHeight

多边形的外扩高程，默认值为0，当值不为0时，可形成多边形棱柱，即polygon可用来绘制几何体
下图为height: 50000，extrudedHeight: 100000的效果，可以把height理解为棱柱的底面高程，extrudedHeight理解为顶面高程
extruded
配合hierarchy的高程和perPositionHeight，并取消height，可绘制顶面或底面倾斜的棱柱，如下图所示
倾斜

2.2.6 material

多边形的样式，颜色也是其中的一种，目前可以先把这个参数当作设置颜色用，默认为白色，如上图中的多边形的颜色为青色，对应的值为Cesium.Color.CYAN，也可以使用RGBA的格式（A表示透明度），如红色可用new Cesium.Color(1, 0, 0, 1)表示（rgb的取值为0-1，如果是0-255的可以除以255进行归一化）。
下图展示了半透明（A=0.5）颜色的显示效果，对应的值为new Cesium.Color(0, 0, 1, 0.5)
transparent

2.2.7 outline

是否显示多边形的边框，true为显示，false为不显示，默认为显示，下图为默认不显示边框的效果
outline-hide

2.2.8 outlineColor

多边形边框的颜色，默认为黑色，值的格式同material，下图为outlineColor: Cesium.Color.RED的显示效果
outline-red

2.2.9 outlineWidth

多边形边框的宽度，此参数我修改后不起作用，原因还未搞清楚

2.2.10 perPositionHeight

多边形高程是否使用hierarchy中每个点的高程，true为使用，false为不使用，默认为不使用。使用该参数，我们可以自定义由不同高程的点构成的多边形，如下图我们可构建垂直地表的多边形
polygon-perposition

2.2.11 closeTop

在使用extrudedHeight形成棱柱时，顶面是否显示，true为显示，false为不显示，默认为true，下图为false的效果，可见顶面未显示
hide-top

2.2.12 closeBottom

在使用extrudedHeight形成棱柱时，底面是否显示，true为显示，false为不显示，默认为true，下图为false的效果，可见底面未显示
hide-top-bot

2.2.13 distanceDisplayCondition

多边形在该视角距离内可见，其他距离不可见，默认为空，即一直可见。如new Cesium.DistanceDisplayCondition(100.0, 2000000.0)表示在视角离多边形的距离为100到2000000之间时可看到该多边形，其他距离不显示该多边形，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能

小何又沐风
关注
  • 11
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
Cesium-Entity：Polygon多边形绘制与编辑
席木木的博客
11-16 1155
基于Cesium.Entity的Polygon多边形绘制与顶点编辑操作，即：鼠标右键单击绘制Polygon；如果选中了Polygon对象，那么就会显示当前的顶点，并允许用户编辑顶点位置；最后单击鼠标右键可结束当前一次的编辑操作。
CesiumJS【Basic】- #058 绘制网格填充多边形（Entity方式）-使用shader
最新发布
AlanL的专栏
07-03 106
绘制网格填充多边形（Entity方式）-使用shader
Cesium 自定义Primitive - 绘制多边形
地理信息的专栏
03-06 1561
利用Cesium自定义Primitive渲染多边形，并实现实时绘制多边形
cesium--绘制多边形polygon
热门推荐
李卓书
06-13 3万+
前言 在线沙盒案例: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html api查询地址: https://cesiumjs.org/refdoc/ 查询结果截图: 区别: 名称 作用 CoplanarPolygonGeometry CoplanarPolygonOutlineGeo...
cesium动态绘制多边形(polygon)
qq_25519615的博客
07-27 2653
项目中需要通过三个坐标点位动态调整覆盖范围，于是使用cesium实体对象中的多边形来实现(polygon),实现效果如下。第一步，先创建多边形，使用Cesium.CallbackProperty函数来实时更新位置。注意：此案例是在cesium1.95版本上开发的。这样就完成了动态的多边形绘制了，完整代码如下。第二步，使用定时器定时调用模拟位置变化。
Cesium 点击绘制多边形（动态绘制多边形）
qq_17627195的博客
06-16 7844
点击绘制多边形，动态绘制多边形
cesium绘制实时绘制多边形并编辑多边形
weixin_57538359的博客
12-28 1934
2.理清需要那些功能,在这里我们用到了cesium得画点,画线,画面,以及对鼠标得左键,右键,和移动得监听。3.接下来就开始创作了,其中还有一些细节,大家自行体会,完整代码如下,当然还有一些缺陷或者bug,请大家指正,我会改进。1.创建cesium (省略.....)前言:基于cesium实现画多边形以及对其编辑。也作为在工作当中的积累,展示在这里.如有不好的地方,欢迎指正.
cesium_demos:cesium样例库
05-02
ceisum 使用demo、方法或components总结使用cesium+react+ts编写的cesium使用。启动项目 :alien_monster::alien_monster::alien_monster:yarn安装依赖yarn start启动项目样例内容资源加载加载3dtiles调整3dtiles高度...
Cesium-GeoserverTerrainProvider:插入以使用 geoserver 作为地形提供者
07-24
使用 Cesium 1.6 和 geoserver 2.6.2 进行测试。 许可证：Apache 2.0。 免费用于商业和非商业用途。 参见 LICENSE.md。 用法 可选：在 geoserver 中将 mySLD.xml 作为新样式导入，以在其他颜色范围内渲染您的图层...
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
cesium-apps:使用铯创建的应用程序
06-20
【cesium-apps: 使用铯创建的应用程序】 Cesium 是一个强大的开源JavaScript库，专用于构建3D地球和地理空间应用程序。它提供了丰富的交互式3D地球可视化功能，包括地形、建筑物、卫星图像以及各种数据的叠加显示。...
cesium-mapv:示例服务地址
05-27
在【cesium-mapv-master】这个压缩包中，包含了项目的源码和其他相关资源，供开发者研究和学习如何将Cesium和MapV结合使用。通过深入理解并实践这个项目，你将能掌握如何利用这些工具创建自己的3D地理可视化应用。
Cesium 创建多边形
清风专栏
07-08 2963
var viewer = new Cesium.Viewer("cesiumContainer"); var redPolygon = viewer.entities.add({ name: "Red polygon on surface", polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ -115.0, 37.0, -115.0, 32.0, -107.0,.
Cesium Vue（五）— 绘制多边形
qq_40120946的博客
10-20 981
【代码】Cesium Vue（五）— 绘制多边形。
cesium-绘制多边形
孙霸天的专栏
01-08 2067
cesium-绘制多边形 通过Entity添加形状 创建entity let redBox = viewer.entities.add({ name: 'Red box with black outline', position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0), box: { dimensions: new Cesium.Cartesian3(400000.0
cesium系列篇:Entity vs Primitive 基础使用（Polygon）
u010206379的博客
01-30 1402
以创建Polygon为例展示基础使用时，使用Entity和primitive的区别
vue+js+cesium绘制多边形及常用函数封装
weixin_46653941的博客
03-10 2278
vue+js+cesium绘制多边形及常用函数封装
Cesium实现文字、点、多段线、多边形的实时绘制
weixin_30849591的博客
11-24 3259
背景知识 点、线、面以及文字的实时绘制是GIS很重要的一个功能，是用户对感兴趣区域标注的业务需要。同时Cesium提供了点、线（多段线）、面及文字（label）绘制的接口，绘制方式总共有两种，一种是通过Entity实体的方式，一种是通过Primitives的方式。第一种使用较为简单，是在Primitives基础上进行了封装；第二种则更加贴近WebGL底层，语法更复杂但是绘制效率更高效率。鉴于实时...
cesium绘制几何体polygon,并直接标注label的小技巧
Dengzj_GISER
05-13 1万+
之前一直用openlayers,skyline,进行图形绘制图形,在绘制polygon的时候都是可以获取相应source的feature来获取几何体的中心坐标,但在cesium中却没有feature的说法,除了事件获取屏幕数据的时候才有才有feature,在cesium中的entity是很核心的对象,就找了半天才找到相应的属性方法,来获取entity的geometry的中心点坐标,直接上代码作为笔...
cesium绘制行政区域
04-03
Cesium可以使用GeoJSON格式的数据来绘制行政区域。以下是绘制行政区域的步骤： 1. 准备GeoJSON数据 准备包含行政区域边界的GeoJSON数据。GeoJSON是一种地理信息数据格式，可以描述点、线、面等地理要素。 2. 加载GeoJSON数据 使用Cesium的GeoJsonDataSource加载GeoJSON数据。代码示例： ```javascript var dataSource = new Cesium.GeoJsonDataSource(); dataSource.load('path/to/geojson/file.geojson').then(function() { viewer.dataSources.add(dataSource); }); ``` 3. 设置样式 设置行政区域的样式，例如边界颜色、填充颜色等。可以使用Cesium的Entity API来设置样式。代码示例： ```javascript dataSource.entities.values.forEach(function(entity) { entity.polygon.material = Cesium.Color.RED.withAlpha(0.5); entity.polygon.outline = true; entity.polygon.outlineColor = Cesium.Color.BLACK; entity.polygon.outlineWidth = 2; }); ``` 4. 显示行政区域 将行政区域添加到Cesium的场景中显示。代码示例： ```javascript viewer.zoomTo(dataSource); ``` 通过以上步骤，可以使用Cesium绘制行政区域。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小何又沐风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值