当前位置：首页 > article >正文

Cesium中实现三维立体的行政区划贴图效果

article 2025/1/4 6:53:40

老规矩先看成果：

先说好，这个图片没有经过美化处理，这就是裁剪了一张最普通的天地图截图，如果实战项目中UI同事加以处理的话效果会更好。

好那么继续往下说思路，其实道理很简单，就是几个图层的叠加。但是怎么叠加如何处理？

可能对于新手小朋友来讲有点难度。

我们可以使用奥利奥夹心饼干的思想。最底层放置一个entity，中间放置一个影像贴图entity

最上层再盖上一个颜色蒙层，基本上就达到了我们当前的效果。

话不多说我们来看代码：

 //最底层的具有高度的entity
      //可有可无，影像贴图美化的好的话，就不用这个也行
      viewer.entities.add({
        name: "entity1",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(basePositions),
          material: Cesium.Color.fromCssColorString("#0283ff").withAlpha(0.9),
          extrudedHeight: 5000,
          height: 1000,
          perPositionHeight: true,
        },
      });
      //影像贴图，可以拉伸的，我这里图像处理的不好就不拉伸太高了
      viewer.entities.add({
        name: "entity2",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(newPositions),
          material: new Cesium.ImageMaterialProperty({
            image: "./hzback.png",
          }),
          //上表面距离地面高度
          extrudedHeight: 7000,
          //下表面距离地面高度
          height: 5200,
        },
      });
      //最顶层的颜色蒙层，这个根据自己喜好
      viewer.entities.add({
        name: "entity3",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(newPositions),
          material: Cesium.Color.fromCssColorString("#0283ff").withAlpha(0.3),
          extrudedHeight: 7200,
          height: 7100,
        },
      });

完整版的代码如下，你需要准备一个行政区划的图片一般是png格式jpeg格式都行。然后还得准备一个行政区划的轮廓geojson数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加GeoJSON</title>
    <script src="./hangzhou.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #cesiumContainer {
        width: 100%;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        background: url("./dp3.png");
        background-size: cover;
      }
      .cesium-viewer-bottom {
        display: none !important;
      }
    </style>
    <script src="./Cesium.js"></script>
    <link href="./widgets.css" rel="stylesheet" />
    <script src="./turf.min.js"></script>
  </head>
  <body>
    <div id="cesiumContainer"></div>
  </body>
  <script>
    const token =
      "你的cesiumtoken";
    Cesium.Ion.defaultAccessToken = token;
    window.CESIUM_BASE_URL = "./static/Cesium";
    const viewer = new Cesium.Viewer("cesiumContainer", {
      //terrainProvider: Cesium.createWorldTerrain(),
      navigationHelpButton: false,
      timeline: false,
      fullscreenButton: false,
      animation: false,
      shouldAnimate: false, //允许动画
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true,
        },
      },
    });
    //设置背景透明去除无关要素，这一步也是必须的
    viewer.scene.skyBox.show = false;
    viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
    viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
    viewer.scene.globe.enableLighting = false;
    viewer.scene.globe.translucency.backFaceAlpha = 0.0;
    viewer.scene.globe.showGroundAtmosphere = false;
    viewer.scene.imageryLayers.removeAll();
    viewer.shadows = false;
    viewer.scene.sun.show = false;
    viewer.scene.moon.show = false;
    viewer.scene.skyAtmosphere.show = false;
    viewer.scene.fog.enable = false;
    viewer.scene.globe.depthTestAgainstTerrain = true;
    //锁定初始视角
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
        119.465538,
        27.701737,
        290000.0
      ),
      orientation: {
        heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
        pitch: Cesium.Math.toRadians(-50), // default value (looking down)
        roll: 0.0, // default value
      },
    });
    addGeojson();
    //封装方法将geojson数据添加进来
    function addGeojson() {
      hangzhou.features[0].geometry.coordinates.forEach((c) => {
        c[2] = 1000;
      });
      let positions = hangzhou.features[0].geometry.coordinates;
      let basePositions = [];
      let newPositions = [];
      positions.forEach((p) => {
        newPositions.push(p[0]);
        newPositions.push(p[1]);
        newPositions.push(p[2]);
        basePositions.push(p[0]);
        basePositions.push(p[1]);
        basePositions.push(10);
      });
      //最底层的具有高度的entity
      //可有可无，影像贴图美化的好的话，就不用这个也行
      viewer.entities.add({
        name: "entity1",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(basePositions),
          material: Cesium.Color.fromCssColorString("#0283ff").withAlpha(0.9),
          extrudedHeight: 5000,
          height: 1000,
          perPositionHeight: true,
        },
      });
      //影像贴图，可以拉伸的，我这里图像处理的不好就不拉伸太高了
      viewer.entities.add({
        name: "entity2",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(newPositions),
          material: new Cesium.ImageMaterialProperty({
            image: "./hzback.png",
          }),
          //上表面距离地面高度
          extrudedHeight: 7000,
          //下表面距离地面高度
          height: 5200,
        },
      });
      //最顶层的颜色蒙层，这个根据自己喜好
      viewer.entities.add({
        name: "entity3",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(newPositions),
          material: Cesium.Color.fromCssColorString("#0283ff").withAlpha(0.3),
          extrudedHeight: 7200,
          height: 7100,
        },
      });
    }
  </script>
</html>

查看全文

http://www.kler.cn/a/460458.html