@terra.gl/core 0.0.1-alpha.24 → 0.0.1-alpha.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,9 +24,7 @@ Terra-GL Core is a modern WebGL 3D map engine built on Three.js. It provides com
24
24
  - 📐 **Rich Feature Types** - Supports points, lines, polygons, labels, models, and other geographic features
25
25
  - 🎨 **Flexible Style System** - Dynamic style configuration and theme switching
26
26
  - 🎯 **Complete Event System** - Rich event mechanisms for map interaction and feature events
27
- - 🛠️ **Powerful Drawing Tools** - Built-in drawing tools for interactive creation of points, lines, polygons, etc.
28
27
  - 🌈 **3D Effect Enhancement** - Supports skybox, shadows, HDR, clouds, and other visual effects
29
- - 📱 **UI Component System** - Provides info windows, tooltips, and other common UI components
30
28
  - 🔧 **Collision Detection** - Smart label avoidance for optimized dense feature display
31
29
  - 📦 **Modular Design** - Clear code structure, easy to extend and maintain
32
30
 
@@ -96,8 +94,6 @@ Terra-GL Core is a modern WebGL 3D map engine built on Three.js. It provides com
96
94
 
97
95
  ### 🔑 Key Features
98
96
  - **⚡ Event System** - Complete map/feature-level event mechanism
99
- - **✏️ Drawing Tools** - Built-in interactive drawing (points, lines, polygons, circles, etc.)
100
- - **🎨 UI Components** - InfoWindow, ToolTip, and other common components
101
97
  - **🎯 Collision Detection** - Smart label avoidance, optimized dense scene display
102
98
  - **🎭 Style System** - Unified vector/model style configuration
103
99
 
@@ -190,11 +186,6 @@ See the `example/` directory for more complete examples:
190
186
  - **2.地图事件.html** - Map interaction events
191
187
  - **3.要素事件.html** - Feature event handling
192
188
  - **4.相机飞行.html** - Camera animation flight
193
- - **5.绘制工具.html** - Interactive drawing tools
194
- - **6.地图信息框.html** - Map info window
195
- - **7.要素信息框.html** - Feature info display
196
- - **8.自定义的信息框.html** - Custom UI components
197
-
198
189
  ---
199
190
 
200
191
  ## 🤝 Contributing
package/dist/README.md ADDED
@@ -0,0 +1,209 @@
1
+ # Terra-GL Core
2
+
3
+ <div align="center">
4
+
5
+ **High-Performance WebGL 3D Map Engine Based on Three.js 🌍**
6
+
7
+ [![npm version](https://img.shields.io/npm/v/@terra.gl/core.svg)](https://www.npmjs.com/package/@terra.gl/core)
8
+ [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
9
+
10
+ English | [简体中文](./README_CN.md)
11
+
12
+ </div>
13
+
14
+ ---
15
+
16
+ ## 📖 Introduction
17
+
18
+ Terra-GL Core is a modern WebGL 3D map engine built on Three.js. It provides complete GIS visualization capabilities, supporting tile map loading, vector feature rendering, 3D model display, and more. Perfect for building smart cities, digital twins, geographic information systems, and other applications.
19
+
20
+ ### ✨ Core Features
21
+
22
+ - 🚀 **High-Performance Rendering** - Built on Three.js WebGL engine, supports large-scale data visualization
23
+ - 🗺️ **Multi-Source Tile Support** - Compatible with WMTS, ArcGIS, MapBox, Tianditu, and other mainstream tile services
24
+ - 📐 **Rich Feature Types** - Supports points, lines, polygons, labels, models, and other geographic features
25
+ - 🎨 **Flexible Style System** - Dynamic style configuration and theme switching
26
+ - 🎯 **Complete Event System** - Rich event mechanisms for map interaction and feature events
27
+ - 🌈 **3D Effect Enhancement** - Supports skybox, shadows, HDR, clouds, and other visual effects
28
+ - 🔧 **Collision Detection** - Smart label avoidance for optimized dense feature display
29
+ - 📦 **Modular Design** - Clear code structure, easy to extend and maintain
30
+
31
+ ---
32
+
33
+ ## 🌟 Why Choose Terra-GL
34
+
35
+ ### 💪 Technical Advantages
36
+
37
+ **1. Native Three.js Architecture**
38
+ - Fully built on Three.js with no additional rendering layer abstraction
39
+ - Direct access to Three.js scene objects for free extension
40
+ - Full utilization of WebGL performance advantages
41
+ - Seamless integration with Three.js ecosystem
42
+
43
+ **2. Professional GIS Capabilities**
44
+ - Support for multiple coordinate systems and projection transformations (Web Mercator, WGS84, etc.)
45
+ - Complete tile map system supporting massive data loading
46
+ - Compatible with mainstream map services (WMTS, ArcGIS, MapBox, Tianditu)
47
+ - Vector tile (MVT) rendering support
48
+
49
+ **3. Rich Visualization Capabilities**
50
+ - Unified management of 2D vector features (points, lines, polygons) and 3D models
51
+ - GLTF/GLB model loading with Draco compression
52
+ - Real-time shadows, HDR environment lighting, post-processing effects
53
+ - Particle clouds, water ripples, and other special effects support
54
+
55
+ **4. Flexible Interactive Experience**
56
+ - Complete event system (map events, feature events)
57
+ - Built-in drawing tools supporting points, lines, polygons, circles, etc.
58
+ - Smart collision detection and label avoidance
59
+ - Info windows, tooltips, and other UI components
60
+
61
+ **5. Developer Friendly**
62
+ - Written in TypeScript with complete type definitions
63
+ - Clear modular design, easy to understand and extend
64
+ - Rich examples and documentation
65
+ - Supports both ES Module and UMD module formats
66
+
67
+ ### 💡 Use Cases
68
+
69
+ | Category | Typical Applications | Core Capabilities |
70
+ |---------|---------|----------|
71
+ | **🏙️ Smart City** | Urban 3D modeling, BIM display, planning comparison | Large-scale model rendering, LOD control, layer management |
72
+ | **🔮 Digital Twin** | Industrial parks, smart buildings, equipment monitoring | Real-time data binding, dynamic updates, state visualization |
73
+ | **🗺️ GIS** | Terrain analysis, resource distribution, pipeline management | Coordinate conversion, spatial query, buffer analysis |
74
+ | **🚨 Emergency Command** | Situation display, resource scheduling, route planning | Real-time tracking, heatmaps, dynamic plotting |
75
+
76
+ ### ⚡ Performance Features
77
+
78
+ - **On-Demand Tile Loading** - Dynamically loads tiles based on viewport, supports tens of thousands of square kilometers of data
79
+ - **LOD Level Control** - Automatically switches model detail based on distance, optimizing rendering performance
80
+ - **Quadtree Spatial Indexing** - Fast query of visible features, improving interaction response speed
81
+ - **WebGL Instanced Rendering** - Batch drawing of identical geometries, reducing draw calls
82
+ - **Collision Avoidance Optimization** - Intelligently hides overlapping labels, keeping interface clean
83
+
84
+ ---
85
+
86
+ ## 📚 Core Module Overview
87
+
88
+ ### 🏗️ Core Architecture
89
+ - **🗺️ Map** - Map container, unified management of layers, views, events
90
+ - **👁️ Viewer** - Three.js-based rendering engine, manages scenes, cameras, lighting
91
+ - **📚 Layer System** - Layered management of tiles, vectors, models, and other data
92
+ - **📍 Feature** - Abstraction of geographic elements such as points, lines, polygons, models
93
+ - **🔲 TileSystem** - Dynamic loading system supporting multi-source tiles like WMTS, ArcGIS
94
+
95
+ ### 🔑 Key Features
96
+ - **⚡ Event System** - Complete map/feature-level event mechanism
97
+ - **🎯 Collision Detection** - Smart label avoidance, optimized dense scene display
98
+ - **🎭 Style System** - Unified vector/model style configuration
99
+
100
+ [View Detailed API Documentation →](link-to-detailed-docs)
101
+
102
+ ---
103
+ ## 🚀 Quick Start
104
+
105
+ ### 📦 Installation
106
+
107
+ ```bash
108
+ npm install @terra.gl/core three@^0.171.0
109
+ ```
110
+
111
+ ### ⚡ 5-Minute Guide
112
+
113
+ ```javascript
114
+ import * as terra from '@terra.gl/core';
115
+
116
+ // Create map
117
+ const map = new terra.Map('#map', {
118
+ center: [116.397428, 39.90923, 1000], // [longitude, latitude, camera height]
119
+ basemap: {
120
+ Baselayers: [
121
+ new terra.WMTSTileLayer('base', {
122
+ source: new terra.WMTSSource({
123
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
124
+ }),
125
+ projection: terra.ProjectFactory.createFromID('3857', 0)
126
+ })
127
+ ],
128
+ minLevel: 1,
129
+ maxLevel: 18
130
+ }
131
+ });
132
+
133
+ // Add label
134
+ const label = new terra.Label({
135
+ geometry: { type: 'Point', coordinates: [116.397428, 39.90923, 0] },
136
+ style: { text: 'Tiananmen Square', fontSize: 16, fontColor: '#ffffff' }
137
+ });
138
+
139
+ const pointLayer = new terra.PointLayer('points');
140
+ map.addLayer(pointLayer);
141
+ label.addTo(pointLayer);
142
+ ```
143
+
144
+ See the `example/` directory for more examples.
145
+
146
+
147
+
148
+ ---
149
+
150
+ ## 🔧 Development
151
+
152
+ ### 🔨 Build
153
+
154
+ ```bash
155
+ # Development mode (watch file changes)
156
+ npm run dev
157
+
158
+ # Production build
159
+ npm run build
160
+
161
+ # Generate API documentation
162
+ npm run doc
163
+ ```
164
+
165
+ ### 📂 Project Structure
166
+
167
+ ```
168
+ packages/core/
169
+ ├── src/ # Source code
170
+ ├── dist/ # Compiled output
171
+ ├── docs/ # API documentation
172
+ ├── assets/ # Asset files
173
+ ├── package.json # Package configuration
174
+ ├── tsconfig.json # TypeScript configuration
175
+ ├── vite.config.ts # Vite build configuration
176
+ └── typedoc.json # Documentation generation configuration
177
+ ```
178
+
179
+ ---
180
+
181
+ ## 📝 Examples
182
+
183
+ See the `example/` directory for more complete examples:
184
+
185
+ - **1.郑州夜景.html** - City night scene effects
186
+ - **2.地图事件.html** - Map interaction events
187
+ - **3.要素事件.html** - Feature event handling
188
+ - **4.相机飞行.html** - Camera animation flight
189
+ ---
190
+
191
+ ## 🤝 Contributing
192
+
193
+ Issues and Pull Requests are welcome!
194
+
195
+ ---
196
+
197
+ ## 🔗 Related Links
198
+
199
+ - [Three.js Official Website](https://threejs.org/)\
200
+ - [GeoJSON Specification](https://geojson.org/)
201
+ - [WMTS Standard](https://www.ogc.org/standards/wmts)
202
+ <!-- - [three-tile Website](https://sxguojf.github.io/three-tile-doc/1.introduce/01.whatIs/) -->
203
+ ---
204
+
205
+ <div align="center">
206
+
207
+ **If this project helps you, please give it a ⭐️ Star!**
208
+
209
+ </div>
@@ -0,0 +1,206 @@
1
+ # Terra-GL Core
2
+
3
+ <div align="center">
4
+
5
+ **基于 Three.js 的高性能 WebGL 三维地图引擎 🌍**
6
+
7
+ [![npm version](https://img.shields.io/npm/v/@terra.gl/core.svg)](https://www.npmjs.com/package/@terra.gl/core)
8
+ [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
9
+
10
+ [English](./README.md) | 简体中文
11
+
12
+ </div>
13
+
14
+ ---
15
+
16
+ ## 📖 简介
17
+
18
+ Terra-GL Core 是一个基于 Three.js 构建的现代化 WebGL 三维地图引擎核心库。它提供了完整的 GIS 可视化能力,支持瓦片地图加载、矢量要素渲染、三维模型展示等丰富功能,适用于构建智慧城市、数字孪生、地理信息系统等应用场景。
19
+
20
+ ### ✨ 核心特性
21
+
22
+ - 🚀 **高性能渲染** - 基于 Three.js WebGL 引擎,支持大规模数据可视化
23
+ - 🗺️ **多源瓦片支持** - 兼容 WMTS、ArcGIS、MapBox、天地图等主流瓦片服务
24
+ - 📐 **丰富的要素类型** - 支持点、线、面、标注、模型等多种地理要素
25
+ - 🎨 **灵活的样式系统** - 支持动态样式配置与主题切换
26
+ - 🎯 **完善的事件系统** - 提供地图交互、要素事件等丰富的事件机制
27
+ - 🌈 **三维效果增强** - 支持天空盒、阴影、HDR、云层等视觉效果
28
+ - 🔧 **碰撞检测避让** - 智能标注避让,优化密集要素显示效果
29
+ - 📦 **模块化设计** - 清晰的代码结构,易于扩展和维护
30
+
31
+ ---
32
+
33
+ ## 🌟 为什么选择 Terra-GL
34
+
35
+ ### 💪 技术优势
36
+
37
+ **1. 原生 Three.js 架构**
38
+ - 完全基于 Three.js 构建,无额外渲染层抽象
39
+ - 直接访问 Three.js 场景对象,可自由扩展
40
+ - 充分利用 WebGL 的性能优势
41
+ - 与 Three.js 生态无缝集成
42
+
43
+ **2. 专业的 GIS 能力**
44
+ - 支持多种坐标系统和投影变换(Web Mercator、WGS84 等)
45
+ - 完整的瓦片地图系统,支持海量数据加载
46
+ - 兼容主流地图服务(WMTS、ArcGIS、MapBox、天地图)
47
+ - 矢量瓦片(MVT)渲染支持
48
+
49
+ **3. 丰富的可视化能力**
50
+ - 二维矢量要素(点、线、面)与三维模型统一管理
51
+ - 支持 GLTF/GLB 模型加载,带 Draco 压缩
52
+ - 实时阴影、HDR 环境光、后期处理效果
53
+ - 粒子云层、水面波纹等特效支持
54
+
55
+ **4. 灵活的交互体验**
56
+ - 完善的事件系统(地图事件、要素事件)
57
+ - 智能碰撞检测与标注避让
58
+
59
+ **5. 开发友好**
60
+ - TypeScript 编写,完整类型定义
61
+ - 清晰的模块化设计,易于理解和扩展
62
+ - 丰富的示例和文档
63
+ - 支持 ES Module 和 UMD 两种模块格式
64
+
65
+ ### 💡 适用场景
66
+
67
+ | 场景类型 | 典型应用 | 核心能力 |
68
+ |---------|---------|----------|
69
+ | **🏙️ 智慧城市** | 城市三维建模、BIM 展示、规划方案对比 | 大规模模型渲染、LOD 控制、图层管理 |
70
+ | **🔮 数字孪生** | 工业园区、智慧楼宇、设备监控 | 实时数据绑定、动态更新、状态可视化 |
71
+ | **🗺️ 地理信息** | 地形分析、资源分布、管线管理 | 坐标转换、空间查询、缓冲区分析 |
72
+ | **🚨 应急指挥** | 态势展示、资源调度、路径规划 | 实时轨迹、热力图、动态标绘 |
73
+
74
+ ### ⚡ 性能特点
75
+
76
+ - **瓦片按需加载** - 根据视野范围动态加载瓦片,支持数万平方公里数据
77
+ - **LOD 层级控制** - 自动根据距离切换模型细节,优化渲染性能
78
+ - **四叉树空间索引** - 快速查询可见要素,提升交互响应速度
79
+ - **WebGL 实例化渲染** - 批量绘制相同几何体,降低 Draw Call
80
+ - **碰撞避让优化** - 智能隐藏重叠标注,保持界面整洁
81
+
82
+ ---
83
+ ## 📚 核心模块概述
84
+
85
+ ### 🏗️ 核心架构
86
+ - **🗺️ Map** - 地图容器,统一管理图层、视图、事件
87
+ - **👁️ Viewer** - 基于Three.js的渲染引擎,管理场景、相机、光照
88
+ - **📚 Layer System** - 分层管理瓦片、矢量、模型等数据
89
+ - **📍 Feature** - 点、线、面、模型等地理要素的抽象
90
+ - **🔲 TileSystem** - 支持WMTS、ArcGIS等多源瓦片的动态加载系统
91
+
92
+ ### 🔑 关键特性
93
+ - **⚡ 事件系统** - 完整的地图/要素级事件机制
94
+ - **🎯 碰撞检测** - 智能标注避让,优化密集场景显示
95
+ - **🎭 样式系统** - 统一的矢量/模型样式配置
96
+
97
+ [查看详细API文档 →](链接到详细文档)
98
+
99
+ ---
100
+
101
+ ## 🚀 快速开始
102
+
103
+ ### 📦 安装
104
+
105
+ ```bash
106
+ npm install @terra.gl/core three@^0.171.0
107
+ ```
108
+
109
+ ### ⚡ 5 分钟上手
110
+
111
+ ```javascript
112
+ import * as terra from '@terra.gl/core';
113
+
114
+ // 创建地图
115
+ const map = new terra.Map('#map', {
116
+ center: [116.397428, 39.90923, 1000], // [经度, 纬度, 相机高度]
117
+ basemap: {
118
+ Baselayers: [
119
+ new terra.WMTSTileLayer('base', {
120
+ source: new terra.WMTSSource({
121
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
122
+ }),
123
+ projection: terra.ProjectFactory.createFromID('3857', 0)
124
+ })
125
+ ],
126
+ minLevel: 1,
127
+ maxLevel: 18
128
+ }
129
+ });
130
+
131
+ // 添加标注
132
+ const label = new terra.Label({
133
+ geometry: { type: 'Point', coordinates: [116.397428, 39.90923, 0] },
134
+ style: { text: '北京天安门', fontSize: 16, fontColor: '#ffffff' }
135
+ });
136
+
137
+ const pointLayer = new terra.PointLayer('points');
138
+ map.addLayer(pointLayer);
139
+ label.addTo(pointLayer);
140
+ ```
141
+
142
+ 查看 `example/` 目录获取更多示例。
143
+
144
+ ---
145
+
146
+ ## 🔧 开发
147
+
148
+ ### 🔨 构建
149
+
150
+ ```bash
151
+ # 开发模式(监听文件变化)
152
+ npm run dev
153
+
154
+ # 生产构建
155
+ npm run build
156
+
157
+ # 生成 API 文档
158
+ npm run doc
159
+ ```
160
+
161
+ ### 📂 项目结构
162
+
163
+ ```
164
+ packages/core/
165
+ ├── src/ # 源代码
166
+ ├── dist/ # 编译输出
167
+ ├── docs/ # API 文档
168
+ ├── assets/ # 资源文件
169
+ ├── package.json # 包配置
170
+ ├── tsconfig.json # TypeScript 配置
171
+ ├── vite.config.ts # Vite 构建配置
172
+ └── typedoc.json # 文档生成配置
173
+ ```
174
+
175
+ ---
176
+
177
+ ## 📝 示例
178
+
179
+ 查看 `example/` 目录获取更多完整示例:
180
+
181
+ - **1.郑州夜景.html** - 城市夜景效果展示
182
+ - **2.地图事件.html** - 地图交互事件演示
183
+ - **3.要素事件.html** - 要素事件处理示例
184
+ - **4.相机飞行.html** - 相机动画飞行效果
185
+ ---
186
+
187
+ ## 🤝 贡献
188
+
189
+ 欢迎提交 Issue 和 Pull Request!
190
+
191
+ ---
192
+
193
+ ## 🔗 相关链接
194
+
195
+ - [Three.js 官网](https://threejs.org/)
196
+ - [GeoJSON 规范](https://geojson.org/)
197
+ - [WMTS 标准](https://www.ogc.org/standards/wmts)
198
+ <!-- - [three-tile 官网](https://sxguojf.github.io/three-tile-doc/1.introduce/01.whatIs/) -->
199
+
200
+ ---
201
+
202
+ <div align="center">
203
+
204
+ **如果这个项目对你有帮助,请给一个 ⭐️ Star 支持一下!**
205
+
206
+ </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terra.gl/core",
3
- "version": "0.0.1-alpha.24",
3
+ "version": "0.0.1-alpha.26",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"