① The developer creates a new project, which can be pure native HTML type, or based on front-end frameworks such as Vue and React.
②Slicing according to the design drawing of the large screen, using HTML and CSS to complete the layout of the page, and writing interactive components such as buttons and text boxes, and specifying which containers are loaded with chart components and which containers are loaded with 3D scenes.
③Integrate chart components (such as echarts or highcharts, etc.) into the HTML page
④Write JS code to make the chart component render chart results
⑤ Refer to the SuperAPI development manual, write JS code on HTML, and push the cloud rendering resources of the 3D scene to the front-end page
⑥ Write the logic code for the chart component to interact with the three-dimensional scene and call the standard functions of SuperAPI to achieve the interaction with the three-dimensional scene.
①Front end (show):
② Backend (data):
A. 51WORLD is not responsible for back-end construction services;
B. The developer needs to set up a service on the back end to obtain, clean, and perform all data (web panel + 3D scene);
The data obtained by the backend are all 3D scenes sent by the developer to 51WORLD through the standard JS method on the front end.
“Module” in SuperAPI generally refers to the option in the bottom navigation bar;
When switching “modules”, the 3D scene generally proceeds:
① Lens switching: such as looking at the north side of the building to the south side (because the parameters of the three-dimensional lens are complicated, it is temporarily unfriendly to open to third-party developers; Need both parties to agree on the lens position, 51WORLD will move the lens to the corresponding position)
② Model switching: such as switching from a solid model to a crystalline model
The pop-up window after clicking the POI often involves a specific business. We suggest that it should be done by the developer himself:
1. Popup content:
① After the user has a POI point in the three-dimensional scene, we will have a feedback function “onPOIClick” that returns an ID to inform the developer which POI point was clicked;
② According to the ID, the developer determines the content of the pop-up window;
2. Popup position:
A. The developer traces to the click event of the browser and obtains the clicked position
B. Call SuperAPI’s “GetPOIScreenRange”. This method also has a feedback to tell the developer that the POI point is based on the position of the monitor screen.
The maximum number of POI points displayed at the same time is less than 50, and we guarantee smooth operation. The project can also show a larger number of POI points, but at this time we do not guarantee smooth operation.
① We think it is sufficient to display 50 POI points at the same time:
A. The upper limit of 50 POI points has filled the screen, obscured the map, and became a pure display of information instead of displaying information based on geographical location;
B. 50 POI points have caused trouble for the user to perform the next operation. It takes thinking to know which POI point to choose for the next operation;
② When the number of POI points is tens of thousands, the operations that should be taken are:
Filter based on location, showing only POI points within the range shown by the user’s current screen:
A. When the user sees Zone 1 on the screen, only the POI points of Zone 1 should be displayed (Zone 2 should not be displayed: ① Zone 2 is not in the user’s current screen ② Showing Zone 2 will affect the user’s judgment on Zone 1)
B. When the user’s screen switches to Zone 2, we pass the parameters of the current screen lens (lens distance, center point) to the developer. Based on these lens parameters, the developer displays the POI points in Zone 2.
Filter POI points based on type:
Filter different types of POI points by area, time and other dimensions; then, display them
Summary: The project can have tens of thousands of devices, corresponding to tens of thousands of POI points, but should not be displayed at the same time tens of thousands of POI points
Answer: The project of SuperAPI must be B/S architecture.
① The suggestion is to deploy on the server, which can be the client’s server located on the intranet.
② Clients use a browser to access the project, and load a three-dimensional scene and two side panels.
③ Both sides of the panel use superAPI.js to complete the interaction with the three-dimensional scene.
Wechat Scan to follow 51VR