This is the 17th 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

Sometimes, the point is very many, very dense, a lot of points are crowded together, at this time, the point name is more crowded, at this time, you look at the map, it will be very laborious, so the point name show hidden, this demand naturally appeared.

Function implementation

I want to show the bit name when I want to see it, and I want to hide the bit name when I don’t want to see it

There are two methods:

  1. Rough and complex method
  2. A simple method

Rough and complex method

This method was also what I thought of at the beginning, but it was too much trouble to implement. I immediately felt that there should be an easier way.

So let’s talk about the idea of this method

  • A. Obtain point – point data from the interface
  • B. Define two map layers. On layer A, place the dot name entities and on layer B, place the dot name entities
  • C. Add layer B to the map and remove layer B from the map while hiding the point name

Isn’t that a hassle? It bothers me, too

Because when I was in field this method, the point is to use a for loop, added, removed, also want to remove one by one, if removeAll () method, and then point to all loaded up again, then go, feel very trouble, and, if point to, very much to reload, time-consuming and not low, It also affects performance

A simple method

In line with the pursuit of more concise, through my unremitting efforts, as expected, found a simple method

And it’s actually pretty easy, because if you have an entity on the map, you can see it, you can hide it, you can go through the document

Entities are concrete properties under the Entites under the Viewer, so we go layer by layer through the document

And then the label, using the label property, and then look

Is it the

So let’s do it

    // cesium load point
    addMarker(){...this.pointEntities = [];
      pointsInfo.forEach((pointObj) = > {
        const pointEntity = this.viewer.entities.add({
          ...
        });
        // Store an array of dots
        this.pointEntities.push(pointEntity);
      });
    },
Copy the code

Start operation show/hide points

    // Show/hide point names
    showPointName(){... },Copy the code

Verify my guess with console.log(),

If you look at the documentation LabelGraphics and this is an object, you get an array of point entity objects

Let’s call this method, print it out

Find the label property,

Find the show property,

Before calling the hidden point name method:

After calling the hidden point name method:

Look at the console:

Sometimes, if you need to test frequently, it is more efficient to test the console by typing the debugger into the code and then testing the fields you need to test on the console, rather than writing the code and then viewing console.log()

// Show/hide point names

    showPointName() {

      / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the test code start -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
      // console.log(" Show/hide point names ");
      // console.log(this.pointEntities);
      // this.pointEntities[0].label.show = false;
      // console.log(this.pointEntities[0].label.show);
      // return
      / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the test code end -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
      if (this.pointEntities && this.pointEntities.length > 0) {
        // If the current point's label is hidden, show it
        if (this.pointEntities[0].label.show == false) {
          this.pointEntities.forEach((ele) = > {
            ele.label.show = true;
          });
          return;
        }
        // If the label of the current dot is displayed, otherwise the dot is hidden
        this.pointEntities.forEach((ele) = > {
          ele.label.show = false;
        });
      }
      return;
    },
Copy the code

The effect

I can extend this a little bit,

In general, different points have different types, you can filter the operation, only show a certain type of point, this I will not manual implementation, interested can try, the implementation method is similar

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