Step 8. Security Management-Indoor Viewing
Prerequisites
You need to have an authorization code first. To obtain the authorization code, please refer to Authorization Application.
Resource acquisition
Steps
- The indoor viewing function in security management can plan functional partitions of floors and display the main uses of each area.
1. Add top-level animation
The method used here is the same as the method of horizontal animation of hierarchical household floors, and the tween.js interface is also used.
First, record the original position of the top model.
constructor(map, layer, group) {
// ...Existing code is omitted
//Record the original position of the top model
let topModel = this._group.children[0].children[2];
this.originalYPosition = topModel.position.y;
}Then, add the top model animation.
topAnimation(){
// Top-level model object
let model = this._group.children[0].children[2];
const tween = new TWEEN.Tween({ z: 0 }, false)
//Set the target value of the animation and the animation duration
.to({ z: 30 }, 1000)
//Set the easing function of the animation to quadratic easing. The speed changes slowly at the beginning and end of the animation and faster in the middle.
.easing(TWEEN.Easing.Quadratic.InOut)
// This function is called when the animation is updated. The val parameter is the interpolation of the current animation.
.onUpdate((val) => {
// Update the model’s position based on the animation’s current interpolation
model.translateY(val.z);
})
// Start animation
.start();
//Define an animation loop function
function animate(time) {
//Update animation, pass in the current time
tween.update(time);
// Implement animation loop
requestAnimationFrame(animate);
}
//Call animation loop function
animate();
}
2. Add regional division
The area division uses the interface for adding three-dimensional surfaces. Because we want to add multiple three-dimensional surfaces, we first define an array to store the three-dimensional surface objects.
constructor(map, layer, group) {
// ...Existing code is omitted
let topModel = this._group.children[0].children[2];
this.originalYPosition = topModel.position.y;
this.polygonData = []; // Store three-dimensional surface data
}Then, add a three-dimensional surface. In the code below, only the method of loading one three-dimensional surface is included. The rest can be copied directly from the source code.
addIndoorSplit() {
let polygon1 = this._layer.addPolygons({
color: 0xffff00, // 3D surface color
opacity: 0.3, // 3D surface opacity
data: [ // Three-dimensional surface data, custom attributes can be added
{
coordinate: [ // The coordinates of the points that make up the surface, in the form: [[Longitude, Latitude, Height], [Longitude, Latitude, Height]...].
[120.7291884210658, 31.288790144744535, 52.75],
[120.72919207680704, 31.288731808027176, 52.75],
[120.7293751929022, 31.288733544154884, 52.75],
[120.72937268467882, 31.288788973089208, 52.75],
[120.72937297284552, 31.288842926752352, 52.75],
[120.7293334065958, 31.288842926740394, 52.75],
[120.72933337222418, 31.28891112831203, 52.75],
[120.72919146324041, 31.28891167537868, 52.75],
[120.72919146119608, 31.288791172972523, 52.75],
[120.7291884210658, 31.288790144744535, 52.75],
],
},
],
});
//Save the three-dimensional surface object into the array
this.polygonData.push(polygon1);
//...The rest of the three-dimensional surface code is omitted and can be copied directly from the source code.
}notesFor more information about 3D polygons, visit addPolygons.
Finally, add the area function tag. We have encountered the method of adding three-dimensional labels many times, and everyone should be familiar with it.
addAreaMarker() {
//Define 3D label data
let iconPoints = [
{
// Create a DOM element as a markup
element: this.createDeviceDom( 'office', './assets/images/ui/poi_office_area.png', '90px', '126px' ),
position: [120.72905937776969, 31.288810592883955, 52.75000000007335], // Label position
},
{
// Create a DOM element as a markup
element: this.createDeviceDom( 'meeting', './assets/images/ui/poi_meeting_room.png', '90px', '126px' ),
position: [120.7292815460643, 31.288861737902234, 52.75000000001541], // Label position
},
// ...the remaining data is omitted and can be copied from the source code
];
//Add tags to the scene
let marker = this._layer.addMarker({
id: 'area_marker',
data: iconPoints,
});
this.markerData.push(marker);
}notesFor more information about 3D labels, visit addMarker.
3. Create a new indoor viewing method
Create a new indoor view method
viewIndoors, and then call the top-level animation and area division methods.viewIndoors() {
let self = this;
//Add top-level animation
this.topAnimation()
//Add flight positioning
let locations = [
{
center: [120.72930496741992, 31.288898256241268],
zoom: 18.932314122092432,
bearing: -31.19390788601129,
pitch: 9.936623006239369,
speed: 0.5,
curve: 1,
easing(t) {
// Call the area division method when the animation is completed
if (t === 1) {
setTimeout(() => {
self.addIndoorSplit(); // Add area surface
self.addAreaMarker(); // Add area label
}, 200);
}
return t;
},
},
];
setTimeout(() => {
self.changeViewers(locations);
}, 1000);
}
4. Restore the top position
Added method to restore floor position.
removeViewIndoors() {
let model = this._group.children[0].children[2];
//Set the model’s position to the originally recorded position
model.position.y = this.originalYPosition;
}
5. Clear area division
The method of clearing area faces is as follows.
removeIndoorSplit() {
// Traverse the array storing three-dimensional surface data
if (this.polygonData.length > 0) {
for (let i = 0; i < this.polygonData.length; i++) {
//Remove 3D faces
this._layer.removeModel(this.polygonData[i]);
}
}
}The method for clearing area labels
removeMarkerhas been written in the previous steps, just call it directly.
6. Call method
- Remove the comments about the
viewIndoors,removeIndoorSplitandremoveViewIndoorsmethods in LyBottom.vue.
7. Check the effect
Run and see the effect.
npm run dev