This is the 18th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021″

preface

Previous articles in this series:

  1. 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 1)
  2. 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 2)
  3. 【 VUe-cesium 】 3d map development using Cesium on VUE (ii) Continued
  4. 【 VUe-Cesium 】 3d map development using Cesium on VUE (3)
  5. 【 VUe-cesium 】 using CESium on VUE to develop 3d map (four) map loading
  6. 【 VUe-cesium 】 Using CESium on VUE to develop 3d map (five) point loading
  7. [VUe-cesium] using CESium on VUE to develop 3d map (six) point frame
  8. [Vue-cesium] 3d map development using CESium on VUE (7) positioning and optimization
  9. [Vue-cesium] Develop 3d maps with Cesium on VUE (8) Click ripple effects
  10. [VUe-cesium] 3d map development using CESium on VUE (9) Ripple effect offset problem
  11. [VUe-cesium] Develop 3d map using Cesium on VUE (10) show hidden point names

Before, we had points that were loaded on the map, and frankly, points were pasted on the map.

But our map is three-dimensional, and the points are solid, so it should be reasonable to have a height in addition to latitude and longitude, right, XDM?

So can the points be displayed on the map in three dimensions, let’s check, the answer is yes

Point dangling

Point dangling

We find the method to Cesium. Cartesian3. FromDegrees

So the point is floating

Increase the lead

But, you know, just floating, it still doesn’t look that good,

Let’s keep adding special effects

Cesium’s entities add method can not only add point, label, billboard, but also add polyline.

Let’s add lines this time

First look at the results:

Implementation:

In the method of adding points,

addMarker() {
      this.pointEntitiesLine = []; . pointsInfo.forEach((pointObj) = >{...// Add point lead method in loop
        const labelEntityLine = this.loadFloatPoint(pointObj, pointObj.longitude * 1, pointObj.latitude * 1.100); .this.pointEntitiesLine.push(labelEntityLine);
      });
}
Copy the code

The loadFloatPoint() method code is as follows:

    // Load the height line
    loadFloatPoint(pointObj, long, lat, height) {
      const Cesium = this.cesium;
      const lineColor = "#108de7";
      const entityLine = this.viewer.entities.add({
        name: 'line_' + pointObj.pointName,
        code: 'line_' + pointObj.pointCode,
        id: 'line_' + pointObj.pointCode,
        // The longitude dimension must be a number
        / / position: Cesium. Cartesian3. FromDegrees (120.42602, 31.92423),
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            long, lat, 0,
            long, lat, height,
          ]),
          width: 1.// Material Settings
          // material: Cesium.Color.DODGERBLUE,
          material: Cesium.Color.fromCssColorString(lineColor),
          / / material: new Cesium PolylineGlowMaterialProperty ({/ / light
          / / glowPower: 0.1.
          // color : Cesium.Color.DODGERBLUE
          // })}});return entityLine;
    },
Copy the code

Thus, the point leads are added

Give it a lift

Is it over? Has not yet been

Although the dots now have a 3D feel, the dots popbox is still below,

Point before clicking:

After point clicking:

Let’s give it a top view, a little bit more 3D

In the latest

The flyToFun() method is as follows:

    // Fly into the point method
    flyToFun(long, lat, height) {
      const Cesium = this.cesium;
      const destination = Cesium.Cartesian3.fromDegrees(long, lat, height);
      this.viewer.scene.camera.flyTo({
        destination: destination,
      });
    },
Copy the code

Here it is:

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me