This is the 16th 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:
- 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 1)
- 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 2)
- 【 VUe-cesium 】 3d map development using Cesium on VUE (ii) Continued
- 【 VUe-Cesium 】 3d map development using Cesium on VUE (3)
- 【 VUe-cesium 】 using CESium on VUE to develop 3d map (four) map loading
- 【 VUe-cesium 】 Using CESium on VUE to develop 3d map (five) point loading
- [VUe-cesium] using CESium on VUE to develop 3d map (six) point frame
- [Vue-cesium] 3d map development using CESium on VUE (7) positioning and optimization
- [Vue-cesium] Develop 3d maps with Cesium on VUE (8) Click ripple effects
In the above
We have realized the point of the pop-up box, click the point of the ripple effect
But, uh, I don’t know if you noticed a little problem
Here, let’s look at two pictures
Because the dot icon, it’s not very, very small, and when I mouse click, I click on the upper left of the dot, and the popbox and the effect are all from the upper left of the dot, where I mouse click, and the popbox and the ripple effect start to appear
I believe you are smart enough to have found the problem. This time, I clicked on the lower right side of the point, and the bullet frame and special effects began to appear from the lower right side of the point, where I clicked the mouse
doubt
Why is that? Let’s look at the code
See the problem?
The longitude and latitude we used in the following popup frame, special effects, were all the longitude and latitude of the mouse click position. The mouse click operation triggered the click event, captured the mouse click position, then processed the coordinates, and finally converted into the coordinates we used in the form of 120. XXX, 30. Is the coordinates of the mouse point position, so I click the mouse, upper left, lower right, above, below, as long as in the scope of the point entity, anywhere click, pop box and special effects appear in the click place, so is certainly not.
To solve
What are we going to do? In other words, the longitude and latitude of the bullet frame and the effect must be the longitude and latitude of the point, not the longitude and latitude of the mouse. Right
The solution
methods: {
init(){...// Listen for map click events
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
// Click events
handler.setInputAction((click) = >{...// Get the entity coordinates on the map
const pick = this.viewer.scene.pick(click.position);
// If pick is not undefined, then it is a point-to-point position
if (pick && pick.id) {
// Get the latitude and longitude of the point
const cartographic2 = Cesium.Cartographic.fromCartesian(pick.id.position._value);
const lon2 = Cesium.Math.toDegrees(cartographic2.longitude).toFixed(5);
const lat2 = Cesium.Math.toDegrees(cartographic2.latitude).toFixed(5);
// Locate to the center of the map
this.locationToCenter(lon2, lat2);
// Add a pop-up effect
this.addCircleRippleInit(this.viewer, lon2, lat2, 1);
console.log(pick.id);
const data = {
layerId: "layer1".// An internal entity can be used
lon: lon2,
lat: lat2,
element: "#one".// Unique ID of the subrack
boxHeightMax: 0.// Maximum height of the middle cube}; . }else {
// Remove the popbox
if (document.querySelector("#one")) {
this.removeDynamicLayer(this.viewer, { element: "#one" });
this$("#one").css("z-index", -1); } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); },... }Copy the codeSince the special effect is changed to the latitude and longitude of the point position by clicking on it, then the previous pop-up box also uses the latitude and longitude of the point position by clicking on it, which should also be changed to the latitude and longitude of the point position
I’m also going to tweak the offset on this side of the frame
methods: {
...
// Create an htmlElement and it will be automatically hidden behind Earth
creatHtmlElement(viewer, element, position, arr, flog){...if (Cesium.defined(canvasPosition)) {
// Set the popbox directly above the point
// ele.style.left 534 is the width of the popbox set in the CSS style.
// 30 of the 15 in ele.style.left is half the width of the dot icon
// ele.style.left the last 3 is the increment added after tweaking the page to make sure that the popbox is just above the popbox
// 30 in ele.style.top is the height of the dot icon, which is 30 by 30
// ele.style.top is 22 because there is a label above the point, the popbox can not cover the label, fine tune the result
ele.style.left = (canvasPosition.x + arr[0] - 534/2 - 15 + 15) + 'px';
ele.style.top = (canvasPosition.y + arr[1] - 30 - 22) + 'px'; . }}); },... }Copy the codeSo, no matter what the point is, the popbox and the effects are firmly in the center, no longer follow the mouse back and forth
At the end, add one morePoint effects removedThe method of
When we don’t need to show the bullet frame, we click on the map and the bullet frame disappears. Now, when we don’t need the bullet frame effect, we also want to make the bullet frame effect disappear when we click on the map.
How to get?
No more suspense
In fact, the vanishing method was implemented yesterday
methods: {
init(){...// Listen for map click events
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
// debugger;
// Click events
handler.setInputAction((click) = >{...if (pick && pick.id) {
...
} else {
// Remove the popbox
if (document.querySelector('#one')) {
this.removeDynamicLayer(this.viewer, { element: '#one' });
this$('#one').css('z-index', -1);
}
// Remove ripple effect
if (this.viewer.entities.getById("abcd-111")) {
this.viewer.entities.remove(this.viewer.entities.getById("abcd-111"))}if (this.viewer.entities.getById("abcd-222")) {
this.viewer.entities.remove(this.viewer.entities.getById("abcd-222")) } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); . },... }Copy the codeNow that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me