GeoApp Map Application#

Version: 0.01 Copyright: Shenzhen InteGeo Innovation Technology Co., Ltd.

Last Updated: 2026-02-28

Copyright & Disclaimer#

1. All ownership and related intellectual property rights of this software are solely owned by Shenzhen InteGeo Innovation Technology Co., Ltd.
2. Users shall obtain the right to use the software through legitimate means and use it in accordance with the relevant agreements.
3. Any infringement or illegal activities arising from the use of this software that are not attributable to Shenzhen InteGeo Innovation Technology Co., Ltd. shall be borne solely by the user. Shenzhen InteGeo Innovation Technology Co., Ltd. assumes no joint liability.
4. Without written consent or authorization from Shenzhen InteGeo Innovation Technology Co., Ltd., no entity may adapt, translate, annotate, compile, sublicense, re-authorize, or otherwise modify or derive from this software in any form.
5. Updates or changes to this manual may be made without prior notice. Shenzhen InteGeo Innovation Technology Co., Ltd. assumes no obligation in this regard.

Trademark Notice#

"GeoTwin", "Shenzhen InteGeo Innovation Technology Co., Ltd." and related marks are registered trademarks of Shenzhen InteGeo Innovation Technology Co., Ltd., protected by law. Unauthorized use of these trademarks in any form constitutes infringement and will be prosecuted.

Table of Contents#

1. New Features / Optimizations
2. Usage Notes
3. Software Overview
4. Supported Formats
5. Software Guide
6. Glossary
7. Technical Support

1. New Features / Optimizations#

1.1 Version Update (V3.4.0)#

• Optimizations:

  • Improved drag-and-drop responsiveness in the dashboard editor
  • Enhanced 3D scene component performance with improved stability of the scene graph delta mechanism (triggerSceneGraphDelta)
  • Table component now supports sorting, filtering, and column width adjustment
  • Vector layer feature highlighting (vectorHighlight) now supports batch operations

• New Features:

  • Local History Records: Edit operation history stored via IndexedDB, supporting local multi-version rollback

• Other Changes:

  • Scene API documentation updated to v1.1.0, with new translateCoord coordinate conversion API
  • @gt-viewer/sdk upgraded to 1.1.26, @gt-viewer/engine upgraded to 1.1.34

1.2 Version History#

2. Usage Notes#

2.1 System Requirements#

2.1.1 Operating System#

• Supported: Windows 10/11 (x64), Windows Server 2016+, major Linux distributions (Ubuntu 20.04+)
• Configuration: 64-bit OS, latest browser recommended (Chrome 100+ / Edge 100+)

2.1.2 Hardware Requirements#

• GPU: NVIDIA discrete graphics card recommended, VRAM ≥ 4GB, driver supporting WebGL 2.0 (CUDA driver ≥ 11.x recommended for server-side rendering)
• CPU: Quad-core or higher, base frequency ≥ 2.5GHz
• RAM: ≥ 16GB recommended; ≥ 32GB for large-scale scenes
• Other: Modern browser supporting WebGL 2.0 and WebAssembly

2.1.3 Storage & Network Requirements#

• Storage: ≥ 20GB free disk space; 3D scene data (point clouds / 3D Tiles / GeoTiff) should be stored on high-speed SSDs or NAS
• Network: Gigabit Ethernet or higher for GeoTwin backend services; dedicated network channel recommended for MQTT IoT data access

2.1.4 Recommended Hardware Configuration#

2.2 Installation & Launch#

1. Visit the GeoTwin Data Visualization Platform website to obtain the installer;
2. Double-click the installer and follow the setup wizard to complete the installation (default path recommended, or a custom non-CJK path);
3. After installation, a desktop shortcut will be created — double-click to launch the software;
4. On first launch, access the platform via the local service URL in your browser.

2.3 Authorization#

1. Navigate to the software deployment URL and access the login page;
2. Enter your GeoTwin platform account credentials and click "Login";
3. Upon successful login, the system automatically completes authentication and redirects to the application homepage.

3. Software Overview#

3.1 Core Positioning#

GeoTwin App Builder is a low-code visual dashboard construction platform deeply integrated with the GeoTwin 3D GIS engine. It supports drag-and-drop arrangement of visualization components, multi-source real-time data binding, and seamless integration of 2D/3D geographic scenes with business dashboards on a single canvas. Applicable to smart city, digital twin, emergency command, industrial monitoring, land surveying, and other domains for dashboard visualization and interactive analysis.

3.2 Module Architecture#

The software consists of the following core modules:

• Application Management Module: Handles creation, search, import/export, and paginated display of dashboard applications. Supports name-based search and multi-resolution screen selection (1920×1080, etc.).

• App Editor Module: The core drag-and-drop editor with a three-panel layout — component library/layer panel on the left, visual canvas in the center, and property configuration panel on the right. Supports multi-component overlay layouts.

• 3D Map Scene Module: A 3D scene container based on the @gt-viewer/sdk ECS architecture. Supports overlay rendering of point clouds, 3D Tiles, vector data, GeoTiff, and more. Exposes the window.scene.api interface externally.

• GIS Feature Component Module: Includes layer management, feature identification (Identify), spatial measurement (11 types), 3D analysis (11 types), camera flight animation, bookmark management, 2D/3D toggle, compass, scale bar, screenshot/recording, weather effects, and other map feature components.

• Data Binding & Configuration Module: Supports static data, HTTP/HTTPS APIs, WebSocket, MQTT IoT, direct database connections, and other data sources. Provides data filters, global variables, event linking, and conditional logic for advanced configurations.

• Preview & Publishing Module: Offers real-time dashboard preview. Supports packaging as a standalone UMD library file (index.umd.js) or publishing via shareable links.

3.3 Core Advantages#

• Zero-Code Barrier: Drag-and-drop layout, configuration-based data binding — even non-technical users can get started quickly.
• Deep GIS Integration: Embedded enterprise-grade 3D GIS engine with seamless 2D/3D scene and business data fusion. Supports 11 types of spatial analysis and 11 types of spatial measurement.
• Multi-Source Data Access: Supports HTTP, WebSocket, MQTT, databases, and more, meeting IoT real-time monitoring requirements.
• Open Integration Capability: Exposes a complete scene control API via window.scene.api for deep integration with third-party platforms.
• Flexible Deployment: Supports both standalone deployment and library-based integration to adapt to various scenarios.

4. Supported Formats#

4.1 Input Data Formats#

4.2 Output Data Formats#

5. Software Guide#

5.1 Core Module Operations#

5.1.1 Application Management#

The application management page provides unified management of all dashboard applications, with support for filtering by application type (AppBuilder).

Key Features:

• Create Application: Select screen size (Desktop 1920×1080 / custom), set application name
• Search: Filter by application name keywords
• Application List: Paginated display, click to enter editor or preview
• Import Application: Upload JSON dashboard configuration file

Steps:

1. Log in and access the application homepage to view the application list;

2. Click the "Add" button, select screen size, and enter the application name;

3. Confirm to automatically redirect to the dashboard editor.

Figure 5-1-1: Application management homepage showing application card list and "+ Add" button

5.1.2 Dashboard Editor#

The dashboard editor is the core interface, featuring a three-panel layout: component/layer panel on the left, canvas area in the center, and property configuration panel on the right.

Key Features:

Steps:

1. Drag components (charts, 3D maps, text labels, etc.) from the left component library to the canvas;

2. Select a component and configure data source (static/HTTP/WebSocket/MQTT) in the right property panel;

3. Set component styles (colors, fonts, borders, backgrounds);

4. Configure component events (click to trigger flight/popup/data refresh);

5. Click "Preview" in the top toolbar to check the result;

6. Save and publish once confirmed.

Figure 5-1-2: Dashboard editor three-panel layout — left: GIS component library, center: map canvas, right: Config property panel

5.1.3 3D Map Scene Component#

The 3D map scene component (map) is the core GIS component of GeoTwin App Builder, embedding the GeoTwin 3D engine for multi-source geographic data overlay rendering.

Key Features:

• Scene Initialization: Automatically connects to the GeoTwin backend service and loads the scene configuration (sceneId)
• Layer Rendering: Supports point clouds, 3D Tiles, vector, GeoTiff, basemap services, and more
• Scene Graph Management: Based on ECS architecture, exposes full control interface via window.scene.api
• 2D/3D View Toggle: One-click switch between flat and 3D views

Configuration Parameters:

Steps:

1. Drag the "3D Map" component from the left component library to the canvas;

2. Configure server (backend service URL) and sceneId in the right property panel;

3. Once the map loads, the sceneReady event fires to indicate readiness;

4. Optionally add layer management, measurement, analysis, and other GIS auxiliary components.

Figure 5-1-4: 3D map component after loading — showing imagery basemap and layer tree panel

5.1.4 Layer Management Component#

The layer management component (layer) provides a visual layer tree for toggling visibility, locating, and filtering layers in the scene.

Key Features:

• Layer Tree Display: Tree-structured display of all layers (point cloud/3D Tiles/vector/basemap, etc.)
• Visibility Control: Toggle layer visibility via checkboxes
• Locate Layer: Double-click a layer name to fly the camera to the layer extent
• Keyword Search: Quick filter by layer name
• Display Modes: Button popup mode and inline mode

Steps:

1. Add a "Layer Management" component to the canvas and link it to the map component;

2. The layer tree automatically loads all layers from the current scene;

3. Click checkboxes to toggle layer visibility;

4. Double-click a layer name to quickly locate the view;

5. Enter keywords in the search box to filter the layer list.

Figure 5-1-5: Layer management component showing tree-structured layer list (YLS_Welfare_Sum, Zoom Andy, etc.) with visibility control and positioning

5.1.5 Spatial Measurement Component#

The spatial measurement component (measurement) provides 11 types of 3D measurement tools for precise spatial measurements.

Supported Measurement Types:

Steps:

1. Add a "Measurement" component to the canvas and link it to the map component;

2. Select the desired measurement type (e.g., "Distance") from the measurement toolbar;

3. Click measurement start and end points in the 3D scene;

4. The system displays measurement results as annotations in the scene in real time.

Figure 5-1-6: Spatial measurement toolbar featuring Coordinate, Distance, Projected Distance, Horizontal/Vertical Distance, Point-to-Line/Plane, Area, Projected Area, Angle, and Cut and Fill — 11 measurement tools in total

5.1.6 3D Spatial Analysis Component#

The 3D spatial analysis component (analysis) provides 11 types of spatial analysis tools for decision support and simulation.

Supported Analysis Types:

Steps:

1. Add a "Spatial Analysis" component to the canvas and link it to the map component;

2. Select the analysis type (e.g., "Flood Simulation") from the analysis toolbar;

3. Configure analysis parameters (e.g., water level elevation);

4. Click "Execute" — the analysis results render in the scene in real time.

Figure 5-1-7: 3D spatial analysis toolbar featuring Skyline, Height Restriction, Line of Sight, Profile, Flood Analysis, Viewshed 3D, Gradient, Sky View Factor, Landscape, Sunlight, and Float Analysis

5.2 Key Workflow Operations#

5.2.1 Create a New Dashboard Application#

1. Log in and access the application homepage;

2. Click the "Add" button in the upper right to open the creation dialog;

3. Select screen resolution (e.g., Desktop 1920×1080);

4. Enter the application name and click "Confirm";

5. The system automatically creates the application and redirects to the dashboard editor.

Figure 5-2-1: New application (Create APP) dialog supporting Desktop (default 1920×1080), MacBook Pro, iPad Pro, Phone Max, and custom screen sizes

5.2.2 Build a 3D GIS Dashboard#

1. Open the dashboard editor and locate the "3D Map" component in the left component library;

2. Drag the "3D Map" component to the canvas and adjust its position and size;

3. In the right property panel, enter server (GeoTwin backend service URL) and sceneId;

4. Wait for the scene to load — the sceneReady event fires when ready;

5. Optionally drag and add layer management, measurement, analysis, and other GIS auxiliary components;

6. Configure the association between GIS components and the map;

7. Add business data chart components (line charts, pie charts, gauges, etc.) and configure data sources;

8. Adjust component stacking order and display styles to finalize the dashboard layout.

Figure 5-2-2: Dashboard editor initial state — blank canvas (dark blue) after creating a new app, with GIS component library on the left (Map, Layer Tree, Back to North, Scene Screenshot, etc.) and property panel on the right

Figure 5-2-3: Right-side Config property panel for configuring map component parameters (sceneId, server) and global properties (Screen Size, Background, etc.)

5.2.3 App Preview & Publishing#

1. Click "Save" in the editor toolbar to save the current dashboard configuration;

2. Click "Preview" to open the dashboard preview in a new tab;

3. Verify display effects, data loading, and event linking;

4. Return to the editor to make adjustments if needed;

5. Once confirmed, click "Publish" or use the "Share" function to generate an access link;

6. For standalone deployment, export the JSON configuration file or run pnpm lib to build the UMD package.

Figure 5-2-7: Full-screen dashboard preview — 3D scene fully loaded with layer tree panel overlaid on the map

5.2.4 Scene Screenshot & Recording#

1. Add a "Screenshot" or "Recording" component to the canvas and link it to the map component;
2. Screenshot:
   • Click the screenshot button — the system captures the current 3D scene view;
   • The screenshot is automatically downloaded as a PNG file.
3. Screen Recording:

   • Click "Start Recording" — the system begins recording 3D scene operations;

   • Click "Stop Recording" when done — the recording is automatically saved and downloaded as an MP4 file.

Figure 5-2-8: Scene recording in progress — green notification bar at top reads "Recording started, click again to stop", with recording control button on the left

5.3 Scene API Integration#

window.scene.api is the JavaScript API exposed by GeoTwin App Builder, enabling external platforms or page scripts to control the 3D scene.

Prerequisites: Listen for the sceneReady event to ensure the API is available before making calls:

window.addEventListener('sceneReady', (event) => {
    console.log('Scene is ready');
    // window.scene.api is now safe to use
});

API Methods:

Scene Events:

5.4 FAQ / Troubleshooting#

• Issue 1: 3D map component shows blank after loading

  • Solution: Verify that server (backend service URL) is accessible; confirm sceneId is correct; check browser WebGL 2.0 support (visit about:gpu to confirm GPU acceleration is enabled).

• Issue 2: HTTP data source fails to load data

  • Solution: Verify the API URL is correct; confirm CORS configuration allows the current domain; check request method (GET/POST) and headers match the API specification; inspect the browser DevTools Network panel for details.

• Issue 3: Dashboard editor drag-and-drop is laggy

  • Solution: Reduce the number of complex components on the canvas; disable unnecessary 3D scene real-time rendering; clear browser cache and reload; check if IndexedDB local history storage has sufficient space.

• Issue 4: window.scene.api returns undefined

  • Solution: Ensure API calls are made within the sceneReady event callback, not during page initialization; verify that the map component's sceneId and server are fully configured.

• Issue 5: Cannot access dashboard after login

  • Solution: Check if the account has access permissions for the target dashboard; clear old tokens from browser localStorage and log in again; for shared links, confirm the Share Token has not expired.

6. Glossary#

7. Technical Support#

• Official Website: To be updated
• Manual Download: To be updated
• Contact Email: To be updated
• Support: For technical issues, please contact us through the channels listed above