I. Overview
Applicable scenarios: Users who have installed the " FVS Large Screen Editing Mode " plugin can refer to this article to learn about the functions of the FVS template.
1. Version
| Report server version | JAR package | FVS large screen editing mode (beta version) version |
|---|---|---|
| 11.0 | 2021-11-15 | V1.0.0 |
2. Application scenarios
The 3D city component is a 3D engine based on WebGL technology, which allows us to easily build 3D scenes on the browser side.
After the user uploads the geojson file, 3D City will automatically identify and parse the geographic feature elements in the geojson file (currently supported feature elements are: buildings, grasslands, rivers and roads), and then start to build a grid model based on the latitude and longitude point information of the feature , and attach the default style material, and finally render it out to quickly build a 3D digital city.
3. Operation steps
This article will introduce the scene import, attribute editing, perspective conversion and other operations of the FVS 3D city component.
3D city schematic model, the recommended operation steps are shown in the following table:
| Serial number | Step | Introduction |
|---|---|---|
| 1 | Template preparation | Create a new large screen template, create a new page, add a "3D city" component, and edit the component |
| 2 | Create a scene | Generate new scene / import existing scene |
| 3 | Scene management | Configure the style, environmental special effects, perspective rotation, etc. of the 3D scene |
| 4 | Model management | Configure the name, hide, style, color, etc. of the model |
| 5 | Data management | Add datasets, configure data layers, and combine data and models |
| 6 | Viewing angle adjustment | Adjust the final preview perspective effect |
II. New component
Create a new FVS big screen dashboard:
Add a "3D city" component, click "Edit Component" to enter the 3D city editing page. As shown below:
After editing, click "Return to Editor" to automatically save the settings in the component and return to the canvas page.
III. Scene management
1. Create Scene
If you edit the 3D city component for the first time, you need to create a scene first, and it will prompt "There are no scenes, please create a scene first and then configure scenes". As shown below:
There are two ways to create a scene: generate a new scene and import an existing scene.
1) Generate a new scene
To generate a new scene, the user needs to prepare the geojson file of the 3D city locally.
Click "Select Data", select the prepared geojson file, and the scene can be generated after the upload is successful.
FVS offers two architectural styles: Sci-fi and Simple.
Note 1: The size of the uploaded geojson file is recommended not to exceed 10M. If the file is too large, it will take a long time to generate the scene.
2) Import an existing scene
If the user has obtained a 3D city scene of the .scene file type given by others, the user can directly import it in this step. As shown below:
2. Export the scene
In the 3D city editing interface, users can export the current scene.
When exporting a scene, it will include the scene geojson , the "scene" configuration on the right and the "model" configuration to generate a .scene file.
3D city components of other templates by referring to Section III.1.2) above .
3. Replacing scene data
In the 3D city editing interface, the user can replace the current scene data.
Click "Replace Scene Data" and select the geojson file prepared locally to replace the existing scene.
The replacement of scene data does not affect the configured scene properties or the uploaded custom model.
4. Set scene attributes
After adding a scene, you can configure the attributes of the scene, as shown in the following figure:
| Setting item | ||
|---|---|---|
| Global Settings | Overall Style | The overall style includes two styles: Sci-fi style and simple style Changing the overall style will override all configured style settings |
| Ground BG | Ground backgrounds fall into two categories: GIS base map and monochrome 1) GIS base map, you can see the city's road names, vegetation, hydrology and other effects, you can choose the built-in five sets of colors, or input CustomTileLayer URL 2) Monochrome, does not display the city's road names, vegetation, hydrology and other effects, you can choose any color as the background color | |
| BIdg Height | In order to highlight or downplay the visual effects of buildings, FVS 3D City supports modifying the height of buildings on the map. The original height of the building in geojson is 100%, and the height range that supports adjustment is 20%~200% 3D city component are adjusted here, including unnamed buildings. | |
| Environmental Effects | Particle | If "Turn on particle effects" is checked, an effect similar to snowflakes will appear in the air of the city. |
| Shock Wave | To highlight an area, set the shock wave to be the center point of the shock wave. Support for adding multiple shock waves. Support setting shock wave name, coordinates, radiation range, shock wave speed, shock wave color and other attributes Support to modify, delete and hide shock waves. | |
| Soaring Lines | If "Turn on soaring lines" is checked, beams of light will continuously fly from the ground to the air. | |
| Viewing Angle | Camera | If you select "Turn on viewing angle changes", you can automatically rotate the 360° effect of the 3D city model, and youcan adjust the speed of the viewing angle rotation. Enabling this function does not affect the user's mouse to adjust the city's perspective. |
IV. Model management
The configuration bar is switched to the model tab, and the named buildings, streets, grass/water systems in geojson are displayed in the model list, and the unnamed ones in geojson will be merged into other buildings, other streets, grass, and water systems.
Selected model:
1) Supports hiding, deleting, and renaming models.
2) Support to modify the style of the top and facade of the building, and support to apply to all buildings.
3) Support to modify the street style, support to apply to all streets.
4) Support to modify the style and color of grass and water system.
Note: The "3D City" component supports adding custom models.
V. Data Management
Four data layers are supported in the 3D city component: point, cylinder, line, and model. As shown below:
| Layer | Example |
|---|---|
| Point | |
| Cylinder | |
| Line | |
| Model | Model - Data Layer, the selected dataset model name must be the same as the model name in the configuration column in Chapter IV It can be displayed on the map normally. If it is inconsistent, the model will not be displayed. |
VI. Viewing angle adjustment
1. Predefined Perspectives
The 3D city has three predefined viewing angles, which can be adjusted with one click: top view, main view, and side view.
2. The method of manually adjust the viewing angle
There are two ways to manually adjust the scene perspective.
1) Adjust the viewing angle in the canvas interface
On the canvas page, select the component and click the "Adjust Viewing Angle" button in the upper right corner to adjust the 3D city view angle with the mouse in the component area.
After the adjustment is completed, the mouse clicks the area outside the component to save the final perspective.
2) Adjustment in the 3D city editing interface
On the 3D city editing page, the user can directly adjust the display angle of the map through the mouse, and click "Return to editor" to automatically save the final angle of view. As shown below:
3. Operation of Manually Adjusting the Viewing Angle
The left mouse button, right button, and scroll wheel can be used to adjust the viewing angle.
1) Left mouse button: hold down the left mouse button and drag to rotate the current view.
2) Right mouse button: hold down the right mouse button and drag to pan/pull/decrease the viewing angle.
3) Mouse Wheel: Scroll the mouse wheel to zoom in/out of the viewing angle.
VII. Completed template
For the completed template, see:
FVS 3D City Component Example.fvs
This article provides an example model scenario, which is only for user trial, and should not be used in actual production. Please download and decompress to use:
