Limiting map browsing in cesium
There is a need to limit the user's map browsing range in the project. After research and searching relevant data, a feasible method is obtained: 1. Limit the height range of the user's browsing perspective, and then monitor the lens range in real time. Finally, compare the real-time lens range with the longitude and latitude of the limited range, and jump back to the initial perspective if it exceeds the limit, as follows:
*1. Limit lens height
Limiting the height of the lens can be achieved directly by using cesium's own api, as follows:
viewer.scene.screenSpaceCameraController.maximumZoomDistance =200000; viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
*2. Real time monitoring lens range
To monitor the lens range in real time, I learned two cesium methods by looking up relevant articles:
//Real time monitoring method, which will be called continuously, and the frequency is quite high viewer.scene.preRender.addEventListener(); //Method for calculating the lens range. This method will calculate the geographic coordinate (radian) range of the current lens and return four range parameters: West, East, North and south viewer.camera.computeViewRectangle();
By combining the two, the geographic coordinate (radian) range of the lens can be monitored in real time:
viewer.scene.preRender.addEventListener(function() {
let rectangle = viewer.camera.computeViewRectangle();
//rectangle is the real-time range of the current shot
}
*3. Convert the obtained rectangle from geographic coordinates (radians) to longitude and latitude coordinates
The method of converting geographic coordinates (radians) to longitude and latitude coordinates is found by searching relevant data, as follows:
// Convert radian to latitude and longitude, and west is the longitude of the left (west) side boundary, and so on let west =rectangle.west / Math.PI * 180; let north = rectangle.north / Math.PI * 180; let east = rectangle.east / Math.PI * 180; let south = rectangle.south / Math.PI * 180;
*4. Set the longitude and latitude range that can be browsed to judge whether the lens exceeds, and jump back if it exceeds
Set the latitude and longitude range that can be browsed:
//Set the browsable latitude and longitude boundary as required
let Range = {west:100.111111,north:25.11111,east:105.11111,south:28.111111};
Jump back after judgment:
//If the viewing angle exceeds the set latitude and longitude range, jump to the viewing angle
if(west < Range.west || north < Range.north || east > Range.east || south > Range.south){
console.log("Jump Perspective");
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(-1264160.070654434, 5665789.912013389, 2654915.919083717),
orientation: {
heading: 0.16290833989833153,
pitch: -0.43768116366765275,
roll: 6.283129299301802
}
});
}
//You can choose the flyto method to fly more smoothly
*5. Complete code
//Limit map browsing
//Limit lens height
viewer.scene.screenSpaceCameraController.maximumZoomDistance =200000;
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
//Real time monitoring lens range (this method will be called all the time)
viewer.scene.preRender.addEventListener(function() {
//Method for calculating the lens range. This method will calculate the geographic coordinate (radian) range of the current lens and return four range parameters: West, East, North and south
let rectangle = viewer.camera.computeViewRectangle();
// console.log(rectangle,'rectangle');
//Set the browsable latitude and longitude range
let Range = {west:100.111111,north:25.11111,east:105.11111,south:28.111111};
//Geographic coordinates (radians) to longitude and latitude coordinates
// Radian is converted to latitude and longitude, west is the longitude of the left (west) side boundary, and so on
let west =rectangle.west / Math.PI * 180;
let north = rectangle.north / Math.PI * 180;
let east = rectangle.east / Math.PI * 180;
let south = rectangle.south / Math.PI * 180;
//If the viewing angle exceeds the setting range, jump to the viewing angle
if(west < Range.west || north < Range.north || east > Range.east || south > Range.south){
//console.log("jump perspective");
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(-1264160.070654434, 5665789.912013389, 2654915.919083717),
orientation: {
heading: 0.16290833989833153,
pitch: -0.43768116366765275,
roll: 6.283129299301802
}
});
}
)};
//You can choose the flyto method to fly more smoothly
*6. Method defects and better implementation
This method limits the browsing range, which has two disadvantages:
1,preRender. The addeventlistener () method will be called all the time, with high frequency, which is not conducive to the front-end performance optimization. Especially after loading a large map, the interface that is already stuck may be more stuck. If the initial range is less than the set browsing range, the view jump will be triggered all the time, resulting in an endless loop and unable to operate.
2. Pull to the map boundary to jump to the perspective, which is not conducive to the user experience. After reaching the scope boundary, it is forbidden to drag and zoom out, which is a better method. However, the author has not found the relevant implementation method. Anyone who knows can leave a message in the comment area.
Better implementation
Due to the above two disadvantages, the author abandoned this method in the project and loaded the corresponding layers on demand, which can not only reduce the number of layers loaded, but also avoid the above two disadvantages, which is more conducive to the front-end performance optimization. It is suggested that you should also use this method to achieve scope limitation.
Refer to big man portal:
https://www.cnblogs.com/xt112233/p/14044460.html
https://blog.csdn.net/u011495292/article/details/81207144
https://blog.csdn.net/pyx6119822/article/details/81208151
https://blog.csdn.net/zhengshaofeng1/article/details/113613138
https://blog.csdn.net/qq_42036616/article/details/90140636