Cesium Primitive实现风险四色图

最新推荐文章于 2024-07-23 07:00:00 发布

攻城师不浪

最新推荐文章于 2024-07-23 07:00:00 发布

阅读量608

点赞数

分类专栏： Cesium 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_40580834/article/details/128686815

版权

Cesium 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章讲述了在数据量较大时，使用Cesium的底层APIPrimitive代替entity进行地图渲染可以显著提升页面性能。通过示例展示了如何创建风险四色图，提供了一段获取区域数据并渲染的代码，并提到了相关开源项目仓库。

摘要由CSDN通过智能技术生成

一般情况下，点线面用entity去实现显得更加容易，但是当数据量比较大的时候，其页面性能真的让人不敢恭维，被甲方大大看到，大概率会被拉出去阉割了。。。

所以今天我们使用Cesium底层api，Primitive去实现一个数据量比较大的风险四色图效果，其性能比entity不知强了多少倍，可以随时在甲方大大面前蹦迪了😄！

首先我们要拿到区域数据

const getJson = async () => {
  const { res } = await getGeojson("/json/qingdaoArea.geojson")
  addDataToGlobe(res.features)
}

然后直接渲染

const colorArrs = ["AQUAMARINE", "BEIGE", "CORNFLOWERBLUE", "DARKORANGE", "GOLD", "GREENYELLOW", "LIGHTPINK", "ORANGERED", "YELLOWGREEN", "TOMATO"]
const addDataToGlobe = (features) => {
  let instances = [];
  for (let i = 0; i < features.length; i++) {
    for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
      const polygonArray = features[i].geometry.coordinates[j].toString().split(',').map(Number);
      const polygon = new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray(polygonArray)
        ),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        // 设置面的拉伸高度
        extrudedHeight: 100,
        // height: 100, // 多边形和椭球表面之间的距离（以米为单位）。
      });
      const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
      instances.push(new Cesium.GeometryInstance({
        id: `polygon-${i}`,
        geometry: geometry,
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromAlpha(Cesium.Color[colorArrs[i]], 0.6)),
          show: new Cesium.ShowGeometryInstanceAttribute(true)
          // 颜色随机
          // color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({ alpha: 0.7 })),
        },
      }));
    }
  }


  // 合并单个geometry,提高渲染效率
  const primitive = new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.PerInstanceColorAppearance({
      translucent: true, // 当 true 时，几何体应该是半透明的，因此 PerInstanceColorAppearance#renderState 启用了 alpha 混合。
      closed: false // 当 true 时，几何体应该是关闭的，因此 PerInstanceColorAppearance#renderState 启用了背面剔除。
    }),
    asynchronous: false,
  });
  viewer.scene.primitives.add(primitive);
}

就这么简单，相关开源代码请访问：https://github.com/tingyuxuan2302/cesium-complete，该开源集合了Cesium常见的效果示例，并在持续的开发维护中，欢迎star！