map3d-package
v1.0.0
Published
A JavaScript library for encapsulating Cesium 3D map operations
Maintainers
blackcat757Readme
Map3D - Cesium三维操作封装库
一个用于封装Cesium三维地图操作的JavaScript库，提供了简洁易用的API来操作Cesium三维场景。
功能特性
- ✅ 核心初始化 - 封装Cesium Viewer的初始化和管理
- ✅ 3D Tiles - 支持加载和管理3D Tiles数据
- ✅ GeoJSON - 支持加载和显示GeoJSON数据
- ✅ KML/CZML - 支持KML和CZML格式数据
- ✅ 影像服务 - 封装多种影像数据源（OpenStreetMap、天地图、高德地图等）
- ✅ 地形服务 - 封装多种地形数据源
- ✅ 实体管理 - 便捷的实体创建和管理API
安装
通过 npm 安装（推荐）
npm install map3d-package从源码安装
git clone <repository-url>
cd map3d-packages
npm install快速开始
方式一：在浏览器中使用（通过 CDN）
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/[email protected]/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script type="importmap">
{
"imports": {
"map3d-package": "https://esm.sh/[email protected]",
"cesium": "https://esm.sh/[email protected]"
}
}
</script>
<script type="module">
import { Map3D, EntityManager } from "map3d-package";
import * as Cesium from "cesium";
const map3d = new Map3D("cesiumContainer", {
token: "YOUR_CESIUM_ION_TOKEN"
});
</script>
</body>
</html>方式二：在 Node.js 项目中使用
npm install map3d-package cesiumimport { Map3D, Tileset, GeoJSONSource, EntityManager } from 'map3d-package';
import * as Cesium from 'cesium';方式三：从源码引入
import { Map3D, Tileset, GeoJSONSource, EntityManager } from './src/index.js';
import * as Cesium from 'cesium';2. 初始化地图
const map3d = new Map3D('cesiumContainer', {
token: 'YOUR_CESIUM_ION_TOKEN', // 可选，Cesium Ion访问令牌
viewerOptions: {
terrainProvider: Cesium.createWorldTerrain()
}
});3. 加载数据源
// 加载3D Tiles
const tileset = new Tileset('https://your-tileset-url/tileset.json');
tileset.addToScene(map3d.getScene());
// 加载GeoJSON
const geoJSONSource = new GeoJSONSource('https://your-geojson-url.geojson');
await geoJSONSource.init();
map3d.addDataSource(geoJSONSource);4. 添加实体
const entityManager = new EntityManager(map3d.getViewer());
// 添加点
entityManager.addPoint('point1', 116.3974, 39.9093, 0, {
pixelSize: 20,
color: Cesium.Color.RED,
label: { text: '标记点' }
});API文档
Map3D (核心类)
构造函数
new Map3D(container, options)主要方法
getViewer()- 获取Cesium Viewer实例getScene()- 获取场景对象getCamera()- 获取相机对象setCameraPosition(longitude, latitude, height, options)- 设置相机位置flyTo(longitude, latitude, height, options)- 飞行到指定位置addDataSource(dataSource)- 添加数据源removeDataSource(dataSource)- 移除数据源clearDataSources()- 清除所有数据源destroy()- 销毁地图实例
Tileset (3D Tiles)
const tileset = new Tileset(url, options);
tileset.addToScene(scene);
await tileset.flyTo(viewer);GeoJSONSource (GeoJSON数据源)
const geoJSONSource = new GeoJSONSource(data, options);
await geoJSONSource.init();
map3d.addDataSource(geoJSONSource);EntityManager (实体管理器)
const entityManager = new EntityManager(viewer);
// 添加点
entityManager.addPoint(id, lon, lat, height, options);
// 添加线
entityManager.addPolyline(id, positions, options);
// 添加面
entityManager.addPolygon(id, positions, options);
// 添加3D模型
entityManager.addModel(id, lon, lat, height, modelUrl, options);ImageryProvider (影像服务)
// OpenStreetMap
const osm = ImageryProvider.createOpenStreetMap();
// 天地图
const tianditu = ImageryProvider.createTianditu('vec', { token: 'YOUR_TOKEN' });
// 高德地图
const gaode = ImageryProvider.createGaode('img');TerrainProvider (地形服务)
// Cesium World Terrain
const terrain = TerrainProvider.createWorldTerrain();
// 椭球体
const ellipsoid = TerrainProvider.createEllipsoid();项目结构
Map3D/
├── src/
│ ├── core/
│ │ └── Map3D.js # 核心地图类
│ ├── datasource/
│ │ ├── Tileset.js # 3D Tiles封装
│ │ ├── GeoJSONSource.js # GeoJSON封装
│ │ ├── KMLSource.js # KML封装
│ │ ├── CZMLSource.js # CZML封装
│ │ ├── ImageryProvider.js # 影像服务封装
│ │ ├── TerrainProvider.js # 地形服务封装
│ │ └── EntityManager.js # 实体管理
│ └── index.js # 主入口文件
├── examples/ # 使用示例
├── package.json
└── README.md示例
查看 examples/ 目录下的示例代码。
依赖
- Cesium ^1.136.0
许可证
ISC
作者
plr