噜噜的小窝

Appearance

Cesium-Geojson2Geometry

Geojson2Geometry ​

Geojson ​

GeoJSON是一种用于表示地理空间数据的开放标准格式。它使用JavaScript对象表示法（JSON）来编码地理要素，例如点、线、多边形和集合。GeoJSON格式支持在地图应用程序和地理信息系统（GIS）中交换和存储地理数据。

GeoJSON的设计目标是提供一种简单且易于理解的数据格式，以便于数据的传输和解析。它在Web地图应用程序和其他地理空间应用程序中广泛使用。

GeoJSON数据结构由两个主要部分组成：

  1. 几何对象（Geometry Objects）：表示地理要素的几何形状，包括点（Point）、线（LineString）、多边形（Polygon）等。
  2. 地理要素集合（Feature Collections）：包含一个或多个几何对象以及它们的相关属性（如名称、描述等）。

GeoJSON还支持一些附加功能，例如坐标参考系统（CRS）定义、属性表等。这使得它成为一种灵活的格式，可用于描述各种地理数据。

通过使用GeoJSON，开发人员可以轻松地将地理数据集成到他们的应用程序中，从而实现地图可视化、地理分析和空间查询等功能。

Cesium中的Geometry ​

在Cesium中，Geometry（几何体）是指表示三维空间中几何形状的对象。它是Cesium中用于呈现和可视化地理数据的基本单元。Geometry通常与Primitive（基元）对象一起使用，用于在Cesium场景中绘制图形。

Geometry对象描述了一个或多个几何形状的顶点、索引和其他属性。它可以表示各种形状，如点、线、面、体和其他复杂的几何结构。每个Geometry对象都有一个与之关联的Primitive对象，Primitive对象负责在场景中绘制和渲染Geometry。

Cesium提供了多种类型的Geometry，例如：

  1. PointGeometry：表示一个点的几何体。
  2. PolylineGeometry：表示一条线或折线的几何体。
  3. PolygonGeometry：表示一个面或多边形的几何体。
  4. ModelGeometry：表示一个模型或实体的几何体。
  5. PrimitiveCollectionGeometry：表示多个Geometry对象的集合。

每种Geometry类型都有其特定的属性和参数，可以设置位置、颜色、纹理坐标等信息来自定义形状的外观和行为。

通过将Geometry与材质（Material）和其他可选属性（如边框、透明度等）结合使用，开发人员可以创建各种复杂的地理可视化效果，例如绘制地图标记、绘制地形、模拟建筑物等。

案例实现 ​

引用以下方法即可实现Geojson转换为Cesium中点、线、面对应的geometry。

如下图所示：

代码如下：

首先将geojson中的数据提取出来 ​

javascript
const geojson = {
  "geometry": {
    "coordinates": [
      [[108.16688094288112,22.60098464742415],[108.16681824624538,22.600930449712383],[108.16682998090982,22.600916203453203],[108.16686317324638,22.60094066985396],[108.1668869778514,22.60096482654918],[108.16689871251585,22.60097783399869],[108.16687021404506,22.600969472067007],[108.16685780882838,22.60096761385989],[108.16685043275358,22.60093973971211],[108.16686250269412,22.60094655313943],[108.16687725484373,22.60096482551107],[108.16688362509016,22.60097380684539],[108.16691882908344,22.60100384335747],[108.16690508276228,22.60099888813969],[108.16689770668744,22.600994242622868],[108.16688094288112,22.60098464742415]]
    ],
    "type": "Polygon"
  },
  "properties": {
    "area": 19.85353345517069,
    "dis_class": "DT_LACUNAS",
    "dis_level": "DL_MEDIUM",
    "box_depth": 0.5908203125,
    "project_id": 100362,
    "displayName": "PD-L-J-13",
    "dis_type": "inner",
    "comment": "",
    "dis_id": 33775,
    "centerPoint": {
      "id": 275032,
      "latitude": 22.60095243849859,
      "localX": -1798.7459176100308,
      "localY": -1692.1517444032888,
      "localZ": 0.0,
      "longitude": 108.16686300560832
    },
    "type": "Feature"
  }
};

const coordinates = geojson.geometry.coordinates[0]; // 获取坐标数组
const flattenedCoordinates = coordinates.flat(); // 将嵌套数组展平

console.log(flattenedCoordinates);

Geometry ​

javascript
const positions = Cesium.Cartesian3.fromDegreesArray(flattenedCoordinates ); // 将经纬度数组转换为Cesium的Cartesian3数组

const polygonGeometry = new Cesium.PolygonGeometry({
  polygonHierarchy: new Cesium.PolygonHierarchy(positions),
  // 可选的其他属性
  // height: 0, // 高度属性
  // extrudedHeight: 100, // 拉伸高度属性
  // vertexFormat: Cesium.VertexFormat.DEFAULT, // 顶点格式属性
});

const polygonInstance = new Cesium.GeometryInstance({
  geometry: polygonGeometry,
  attributes: {
    // 可选的其他属性
    // color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE), // 颜色属性
  },
  id: "polygon", // 可选的ID属性
});

viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: [polygonInstance],
    appearance: new Cesium.PerInstanceColorAppearance({
      // 可选的外观属性
      // flat: true, // 是否使用平面着色
    }),
  })
);

Updated at: