⭐️Cesium是为3D地图而打造的开源软件

🔨安装

虽然作为一名前端开发人员，但并非gis专业人士，所以推荐这个微信公众号，专门讲解cesium如何使用的 (opens new window)

注意

🐛Cesium并非cnpm i cesium直接就结束了，它需要在webpack中添加额外的参数配置并引入相关资源文件

当前使用的版本号为 "vue": "^2.6.12","cesium": "^1.73.0","@vue/cli-service": "~4.5.0",

module.exports = {
  lintOnSave: false,
  publicPath:
    process.env.NODE_ENV === "production" ? "/\n" + "vue-cesium-example/" : "/",
  configureWebpack: {
    plugins: [
      // Copy Cesium Assets, Widgets, and Workers to a static directory
      new CopyWebpackPlugin({
        patterns: [
          { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
          {
            from: "node_modules/cesium/Build/Cesium/ThirdParty",
            to: "ThirdParty"
          },
          { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
          { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }
        ]
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify("")
      })
    ],
    module: {
      // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
      // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }
  }
};

推荐一套为 GISer 准备的基于 Vue 2.x & Vue 3.x 的 CesiumJS 组件库 VueCesium (opens new window),减少开发工作量.

使用

使用vue中的template语法按照官方文档提供的例子即可实现一个如下所示的地图

注意

启动项目后可能会有cesium文件找不到的错误，此时需要将cesium的build包放入public中static文件夹下面，并引用public下面的cesium中js和css， 注意路径的正确性 以保证正常引入

点击查看

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";
import AmapImageryProvider from "@/transform/AmapImageryProvider";
import "./Sandcastle-header";
function startup(Cesium) {
  'use strict';
//Sandcastle_Begin
  const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: Cesium.createWorldTerrain(),
  });

  const tileset = new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(40866),
  });
  viewer.scene.primitives.add(tileset);

  tileset.readyPromise.then(function () {
    const boundingSphere = tileset.boundingSphere;
    viewer.camera.viewBoundingSphere(
        boundingSphere,
        new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            boundingSphere.radius + 500.0
        )
    );
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  });

  const polygon = viewer.entities.add({
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromRadiansArray([
            -1.3194369277314022,
            0.6988062530900625,
            -1.3193955980204217,
            0.6988091578771254,
            -1.3193931220959367,
            0.698743632490865,
            -1.3194358224045408,
            0.6987471965556998,
          ])
      ),
      material: Cesium.Color.RED.withAlpha(0.5),
      classificationType: Cesium.ClassificationType.BOTH,
    },
  });

  const polyline = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -75.60217330403601,
        40.04102882709425,
        -75.59968252414251,
        40.04093615560871,
        -75.598020153828,
        40.04079437042357,
        -75.59674934074435,
        40.040816173283304,
        -75.59630042791713,
        40.03986900370842,
        -75.59563636849978,
        40.03930996506271,
        -75.59492397899098,
        40.03873932846581,
        -75.59457991226778,
        40.038392701955786,
        -75.59424838652453,
        40.03775403572295,
        -75.59387104290336,
        40.03677022167725,
        -75.59355000490342,
        40.03588760913535,
      ]),
      width: 8,
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
      }),
      clampToGround: true,
    },
  });

  const classificationOptions = [
    {
      text: "Classify Both",
      onselect: function () {
        polygon.polygon.classificationType =
            Cesium.ClassificationType.BOTH;
        polyline.polyline.classificationType =
            Cesium.ClassificationType.BOTH;
      },
    },
    {
      text: "Classify Terrain",
      onselect: function () {
        polygon.polygon.classificationType =
            Cesium.ClassificationType.TERRAIN;
        polyline.polyline.classificationType =
            Cesium.ClassificationType.TERRAIN;
      },
    },
    {
      text: "Classify 3D Tiles",
      onselect: function () {
        polygon.polygon.classificationType =
            Cesium.ClassificationType.CESIUM_3D_TILE;
        polyline.polyline.classificationType =
            Cesium.ClassificationType.CESIUM_3D_TILE;
      },
    },
  ];

  const materialOptions = [
    {
      text: "Red Material",
      onselect: function () {
        polygon.polygon.material = Cesium.Color.RED.withAlpha(0.5);
      },
    },
    {
      text: "Textured Material",
      onselect: function () {
        if (
            !Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(
                viewer.scene
            )
        ) {
          window.alert(
              "Terrain Entity materials are not supported on this platform"
          );
        }
        polygon.polygon.material = "../images/Cesium_Logo_Color.jpg";
      },
    },
  ];

  Sandcastle.addToolbarMenu(classificationOptions);
  Sandcastle.addToolbarMenu(materialOptions);
//Sandcastle_End
  Sandcastle.finishedLoading();
}

export default {
  name: "Map",
  mounted() {
    startup(Cesium)
  },
  methods: {
    init() {
      const viewer = new Cesium.Viewer("cesiumContainer", {
        shouldAnimate: true
      });
      const planePosition = Cesium.Cartesian3.fromDegrees(
        -75.59777,
        40.03883,
        800.0
      );
      const particlesOffset = new Cesium.Cartesian3(
        -8.950115473940969,
        34.852766731753945,
        -30.235411095432937
      );
      const cameraLocation = Cesium.Cartesian3.add(
        planePosition,
        particlesOffset,
        new Cesium.Cartesian3()
      );
      const resetCamera = function() {
        viewer.camera.lookAt(
          cameraLocation,
          new Cesium.Cartesian3(-450, -300, 200)
        );
      };
      resetCamera();

      // Draw particle image to a canvas
      let particleCanvas;
      function getImage() {
        if (!Cesium.defined(particleCanvas)) {
          particleCanvas = document.createElement("canvas");
          particleCanvas.width = 20;
          particleCanvas.height = 20;
          const context2D = particleCanvas.getContext("2d");
          context2D.beginPath();
          context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
          context2D.closePath();
          context2D.fillStyle = "rgb(255, 255, 255)";
          context2D.fill();
        }
        return particleCanvas;
      }

      // Add plane to scene
      const hpr = new Cesium.HeadingPitchRoll(
        0.0,
        Cesium.Math.PI_OVER_TWO,
        0.0
      );
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        planePosition,
        hpr
      );
      const entity = viewer.entities.add({
        model: {
          uri: "../SampleData/models/CesiumAir/Cesium_Air.glb",
          scale: 3.5
        },
        position: planePosition,
        orientation: orientation
      });

      // creating particles model matrix
      const translationOffset = Cesium.Matrix4.fromTranslation(
        particlesOffset,
        new Cesium.Matrix4()
      );
      const translationOfPlane = Cesium.Matrix4.fromTranslation(
        planePosition,
        new Cesium.Matrix4()
      );
      const particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new Cesium.Matrix4()
      );

      // creating the particle systems
      const rocketOptions = {
        numberOfSystems: 50.0,
        iterationOffset: 0.1,
        cartographicStep: 0.000001,
        baseRadius: 0.0005,

        colorOptions: [
          {
            minimumRed: 1.0,
            green: 0.5,
            minimumBlue: 0.05,
            alpha: 1.0
          },
          {
            red: 0.9,
            minimumGreen: 0.6,
            minimumBlue: 0.01,
            alpha: 1.0
          },
          {
            red: 0.8,
            green: 0.05,
            minimumBlue: 0.09,
            alpha: 1.0
          },
          {
            minimumRed: 1,
            minimumGreen: 0.05,
            blue: 0.09,
            alpha: 1.0
          }
        ]
      };

      const cometOptions = {
        numberOfSystems: 100.0,
        iterationOffset: 0.003,
        cartographicStep: 0.0000001,
        baseRadius: 0.0005,

        colorOptions: [
          {
            red: 0.6,
            green: 0.6,
            blue: 0.6,
            alpha: 1.0
          },
          {
            red: 0.6,
            green: 0.6,
            blue: 0.9,
            alpha: 0.9
          },
          {
            red: 0.5,
            green: 0.5,
            blue: 0.7,
            alpha: 0.5
          }
        ]
      };

      let scratchCartesian3 = new Cesium.Cartesian3();
      let scratchCartographic = new Cesium.Cartographic();
      const forceFunction = function(options, iteration) {
        return function(particle, dt) {
          dt = Cesium.Math.clamp(dt, 0.0, 0.05);

          scratchCartesian3 = Cesium.Cartesian3.normalize(
            particle.position,
            new Cesium.Cartesian3()
          );
          scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(
            scratchCartesian3,
            -40.0 * dt,
            scratchCartesian3
          );

          scratchCartesian3 = Cesium.Cartesian3.add(
            particle.position,
            scratchCartesian3,
            scratchCartesian3
          );

          scratchCartographic = Cesium.Cartographic.fromCartesian(
            scratchCartesian3,
            Cesium.Ellipsoid.WGS84,
            scratchCartographic
          );

          const angle =
            (Cesium.Math.PI * 2.0 * iteration) / options.numberOfSystems;
          iteration += options.iterationOffset;
          scratchCartographic.longitude +=
            Math.cos(angle) * options.cartographicStep * 30.0 * dt;
          scratchCartographic.latitude +=
            Math.sin(angle) * options.cartographicStep * 30.0 * dt;

          particle.position = Cesium.Cartographic.toCartesian(
            scratchCartographic
          );
        };
      };

      const matrix4Scratch = new Cesium.Matrix4();
      let scratchAngleForOffset = 0.0;
      const scratchOffset = new Cesium.Cartesian3();
      const imageSize = new Cesium.Cartesian2(15.0, 15.0);
      function createParticleSystems(options, systemsArray) {
        const length = options.numberOfSystems;
        for (let i = 0; i < length; ++i) {
          scratchAngleForOffset = (Math.PI * 2.0 * i) / options.numberOfSystems;
          scratchOffset.x +=
            options.baseRadius * Math.cos(scratchAngleForOffset);
          scratchOffset.y +=
            options.baseRadius * Math.sin(scratchAngleForOffset);

          const emitterModelMatrix = Cesium.Matrix4.fromTranslation(
            scratchOffset,
            matrix4Scratch
          );
          const color = Cesium.Color.fromRandom(
            options.colorOptions[i % options.colorOptions.length]
          );
          const force = forceFunction(options, i);

          const item = viewer.scene.primitives.add(
            new Cesium.ParticleSystem({
              image: getImage(),
              startColor: color,
              endColor: color.withAlpha(0.0),
              particleLife: 3.5,
              speed: 0.00005,
              imageSize: imageSize,
              emissionRate: 30.0,
              emitter: new Cesium.CircleEmitter(0.1),
              lifetime: 0.1,
              updateCallback: force,
              modelMatrix: particlesModelMatrix,
              emitterModelMatrix: emitterModelMatrix
            })
          );
          systemsArray.push(item);
        }
      }

      const rocketSystems = [];
      const cometSystems = [];
      createParticleSystems(rocketOptions, rocketSystems);
      createParticleSystems(cometOptions, cometSystems);

      // toolbar elements
      function showAll(systemsArray, show) {
        const length = systemsArray.length;
        for (let i = 0; i < length; ++i) {
          systemsArray[i].show = show;
        }
      }

      const options = [
        {
          text: "Comet Tail",
          onselect: function() {
            showAll(rocketSystems, false);
            showAll(cometSystems, true);
            resetCamera();
          }
        },
        {
          text: "Rocket Thruster",
          onselect: function() {
            showAll(cometSystems, false);
            showAll(rocketSystems, true);
            resetCamera();
          }
        }
      ];
      Sandcastle.addToolbarMenu(options);
    }
  }
};
</script>

<style lang="scss">
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.cesium-viewer-bottom {
  display: none !important;
}
</style>