Cesium解决方案 绘制网格 绘制经纬度栅格

遇到的客户需求

在Cesium的地图上绘制可随缩放变化的网格以及固定的经纬度栅格

需求1:绘制网格

附上代码
var GridImagery = new Cesium.GridImageryProvider();
var imageryLayers = viewer.imageryLayers;
var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 添加网格图层
imageryLayers.raiseToTop(GridImageryLayer); // 将网格图层置顶
代码解释

Cesium本身就具备网格绘制的函数,调用后将该图层置顶即可

需求2:绘制固定的经纬度栅格

附上代码
  • 绘制经线
	const viewer = new Cesium.Viewer('cesiumContainer');
	const entities = viewer.entities;
	// 每隔20°绘制一条经度线
    for (let lang = -180; lang <= 180; lang += 20) {
        let text = "";
        if (lang === 0) {
            text = "0";
        }
        text += lang === 0 ? "" : "" + lang + "°";
        if (lang === -180) {
            text = "";
        }
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(lang, 0),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    lang,
                    -90,
                    lang,
                    0,
                    lang,
                    90,
                ]),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
  • 绘制纬线
    let langS = [];
    for (let lang = -180; lang <= 180; lang += 5) {
        langS.push(lang);
    }
    //每隔10°绘制一条纬度线
    for (let lat = -80; lat <= 80; lat += 10) {
        let text = "";
        text += "" + lat + "°";
        if (lat === 0) {
            text = "";
        }
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(0, lat),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(
                    langS
                        .map((long) => {
                            return [long, lat].join(",");
                        })
                        .join(",")
                        .split(",")
                        .map((item) => Number(item))
                ),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
代码解释

将地图按照经纬度进行分割,随后将分割线给定样式即可

参考文献

网格 经纬度栅格

Cesium是一个广泛使用的WebGL开源框架,可将地理空间数据以三维形式展现在网页上。在Cesium绘制三维网格是一个常见的需求,通常用于建筑、地形、模拟等领域,因为这些领域需要非常精确的空间数据和三维场景的可视化呈现。 首先,我们需要了解Cesium网格的概念。在三维图形中,网格可以看作是一个由许多小面片组成的三角网格,这些小面片的共同作用形成了整个三维网格。在Cesium中,我们通过使用Primitive对象来创建一个网格。Primitive是一个抽象类,通常使用它的子类来创建不同类型的网格。 要绘制三维网格,我们需要明确三个核心要素:顶点、连接方式和纹理。顶点是网格中的一个节点,通常表示为一个二维或三维向量。连接方式指定了如何连接各个顶点以形成面。常见的连接方式有三角形连接和方块连接。纹理指的是将图像贴到网格上的过程,这样网格就能呈现出想要的颜色、图案或质感。 在Cesium中,我们可以使用Geometry对象来定义顶点和连接方式,使用Material对象来定义纹理。Geometry对象是Cesium中的一个抽象类,通过它的子类如RectangleGeometry、BoxGeometry等可以创建不同类型的几何体。Material对象用于定义如何渲染几何体,包括颜色、透明度、反射等。 可以通过以下步骤来绘制三维网格: 1. 创建一个Geometry对象,确定网格的顶点和连接方式 2. 创建一个Material对象,确定网格的纹理 3. 将Geometry和Material对象传入一个Primitive对象中,并添加到场景中 如果你希望通过模型导入的方式来绘制网格,可以使用Cesium中的glTF格式。glTF是一种用于三维模型的标准格式,它可以将三维模型数据以JSON格式存储并实现高效的数据压缩和传输。Cesium可以通过glTF格式来实现模型导入,并且提供了更为复杂的网格绘制功能与更具复杂的动画效果。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值