The FBI WARNING! May Day holiday is over, I don't know where XDM has gone to play? Give some suggestions to play, I will refer to the National Holiday aha ha...Copy the code

To review, in the last article, we first talked about several major elements on the map, including points, lines and planes. Then we learned about the major coordinate systems used in two-dimensional maps and three-dimensional maps and their transformation methods. Finally, we roughly talked about the Viewer entity and Camera entity in Cesium, which correspond to the window and Camera. Let’s go into action and see how we can add dot, line and plane elements to our planet. If there are any mistakes in the article, please feel free to ask and correct them in the comments section.

The Entity entities

In Cesium, there are several ways to add entities, such as Entity additions, and Primitive additions. The latter is closer to the bottom of the rendering engine so I won’t cover it today. The Cesium can use Entity to add many shapes: points, lines, planes, pipes, cylinders, etc. There are corresponding examples in the Sandcastle website of Cesium. If necessary, you can check them by yourself.

pointBillboard

In Cesium, the dots are presented in the form of a Billboard, which is what the name implies. The Billboard generates a specific image facing the screen at the specified coordinates. Without further ado, let’s look at it in code:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(121.54035.38.92146.100),
    billboard: {
      image: require("@/views/images/blueCamera.png"), // default: undefined
      show: true.// default
      pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
      eyeOffset: new Cesium.Cartesian3(0.0.0.0.0.0), // default
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
      scale: 2.0./ / default: 1.0
      color: Cesium.Color.LIME, // default: WHITE
      rotation: Cesium.Math.PI_OVER_FOUR, / / default: 0.0
      alignedAxis: Cesium.Cartesian3.ZERO, // default
      width: 100.// default: undefined
      height: 25.// default: undefined}});Copy the code

So you can see here that we’re using a method under the Viewer called entities add, and the entity is added to the Viewer through that method.

I gave it a little elevation value during the coordinate transformation to make it more complete. Results the following

linePolyline

Like the Billboard, lines are added via the viewer add() method. Let’s put the code in first:

viewer.entities.add({
        // name:entity.name,
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([121.534575.38.926131.121.537579.38.92543.121.541784.38.924578.121.543973.38.924144.121.545947.38.923944]),
      width: 2.material: Cesium.Color.DARKORANGE.withAlpha(0.7),
      // clampToGround: true,
      // show: true,}});Copy the code

Positions require a Cartesian table set to draw lines, width is the line width, Material is the material of the line (which is the key for us to generate dynamic lines), clamToGround is to select whether the line is rendered on the ground or not, and ground mode is to draw against the terrain on the base map. While the absolute height will cross the terrain, the final show is whether it is displayed or not.

Base effect (changed to a darker base for better display)

At this time you may say, this line is too ugly, I see somebody else’s line is that kind of luminous (you say is ultraman? Is there really an Ultraman in this world? . Don’t worry, next I offer a way to achieve luminous idea, of course the idea is not only this, interested partners can search online. The code!

// Let's add an action line on top of the line we added
viewer.entities.add({
        // name:entity.name,
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        121.534575.38.926131.121.537579.38.92543.121.541784.38.924578.121.543973.38.924144.121.545947.38.923944,]),width: 4.// The width of the line in pixels
      material: new Cesium.PolylineTrailMaterialProperty({
        // Wake material
        color: Cesium.Color.GOLD,
        trailLength: 0.4.period: 3.0,})}});Copy the code

Results the following

A line looks at the effect of feeling good, but if it is the following road network effect is actually good.

If you’re smart enough to know that you’re adding dots and lines, you’re using the add method and the structure of the argument is basically a position and a corresponding entity. Yes, in fact, we can encapsulate an Entity object based on such a structure, and then do the drawing class and editing class of the Entity twice, which will not be explained here.

surfacePolygon

The picture above actually shows us the surface elements, you must think I am talking about the green area, the pattern is small! In fact, the building is essentially a face, but we stretch it to a certain height to form what is called a face. It is added in the same way as dots and lines, so I won’t go into detail and just go to the code.

viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        121.539208.38.924962.121.539176.38.924737.121.540195.38.924486.121.540281.38.924737,]),extrudedHeight: 50.material: Cesium.Color.WHITE,
      // closeTop: false,
      // closeBottom: false,}});Copy the code

See the effect:

This is just one way to generate the building, and it is also one of the many uses of the face. I am only responsible for throwing bricks, and you are the jade.

Click to get face, billboard

In the project, it is impossible for us to just show these dots, lines and planes in front of our eyes. Our elements must carry corresponding data or attributes, and we need to obtain data, attributes or custom operations by clicking on corresponding elements.

We register a global handler with ScreenSpaceEventHandler, and then we register LEFT_CLICK with setInputAction. In its callback we can get the mouse click object. Then pass in the coordinates to get the entity of the clicked position through the viewer. Scene. pick method (scene pick, which returns the first meta object in the scene corresponding to the window position, or undefined if there is no object at that position).


handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) = > {
    var pick = viewer.scene.pick(e.position);
    console.log(e , pick);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Copy the code

Let’s see what we print out. Okay

E is the 2-d coordinate group of our mouse on the screen, pick is the returned primitive object, and id is the entity we picked up.

The complete code

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

<script>
var viewer, camera, handler;
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      viewer = new Cesium.Viewer("cesiumContainer"{});var layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:
            "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}));// Initialize the scene location
      viewer.scene.camera.flyTo({
        // Initialize the camera longitude and latitude
        destination: new Cesium.Cartesian3.fromDegrees(
          121.54035.38.92146.2000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-25.0), // From the top down, it is -90
          roll: 0,}}); handler =new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction((e) = > {
        var pick = viewer.scene.pick(e.position);
        console.log(e, pick);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      this.addBillboard();
      this.addPolyline();
      this.addPolygon();
    },
    addBillboard() {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(121.54035.38.92146.50),
        billboard: {
          image: require("./images/blueCamera.png"), // default: undefined
          // show: true, // default
          // pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
          // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
          // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
          // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
          // scale: 2.0, // default: 1.0
          // color: Cesium.Color.LIME, // default: WHITE
          // Rotation: Cesium. Math.pi_over_four, default: 0.0
          // alignedAxis: Cesium.Cartesian3.ZERO, // default
          // width: 100, // default: undefined
          // height: 25, // default: undefined}}); },addPolyline() {
      viewer.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            121.534575.38.926131.121.537579.38.92543.121.541784.38.924578.121.543973.38.924144.121.545947.38.923944,]),width: 4.material: Cesium.Color.DARKORANGE.withAlpha(0.3),
          // clampToGround: true,
          // show: true,}}); viewer.entities.add({// name:entity.name,
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            121.534575.38.926131.121.537579.38.92543.121.541784.38.924578.121.543973.38.924144.121.545947.38.923944,]),width: 4.// The width of the line in pixels
          material: new Cesium.PolylineTrailMaterialProperty({
            // Wake material
            color: Cesium.Color.GOLD,
            trailLength: 0.4.period: 3.0,}).// clampToGround: true,
          // show: true,}}); },addPolygon() {
      viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            121.539208.38.924962.121.539176.38.924737.121.540195.38.924486.121.540281.38.924737,]),extrudedHeight: 50.material: Cesium.Color.WHITESMOKE,
          // closeTop: false,
          // closeBottom: false,}}); ,}}};</script>

<style lang="scss" scoped>
</style>
Copy the code

The last

The most basic Cesium related operations through these several articles are probably introduced, my brick is also thrown out, the next need for you to carve jade. I’ll also be sorting out classes for points, surface clicks, and easy encapsulation of a few common functions. We can communicate more and progress together, after all, I am also a beginner of Cesium ^-^.

The appendix

【 3D GIS Visualization 】 Smart City Based on Vue+Cesium+Supermap

[3D GIS Visualization] Smart City Based on Vue+Cesium+Supermap (ii)

【 3D GIS Visualization 】 Smart City Based on Vue+Cesium+Supermap