mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
149 lines
3.8 KiB
Markdown
149 lines
3.8 KiB
Markdown
[](https://travis-ci.com/openglobus/openglobus)[](https://gitter.im/openglobus/og?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||
|
||
# OpenGlobus
|
||
|
||
[English](README.md) | 简体中文
|
||
|
||
[OpenGlobus](http://www.openglobus.org/) 是一个用于展示带有地图瓦片、影像、矢量数据、标注、三维物体的交互式三维地图（地球）的 JavaScript 库。它基于 WebGL 技术，开源且免费。
|
||
|
||
这个库的主要目标是令三维地图的功能迅速且美观地展示，并且对用户友好，易于在相关的项目中实施。
|
||
|
||
## 起步
|
||
|
||
### 安装
|
||
|
||
```sh
|
||
npm install @openglobus/og
|
||
# 或者
|
||
yarn add @openglobus/og
|
||
```
|
||
|
||
### 代码：使用 umd 引用
|
||
|
||
``` html
|
||
<link rel="stylesheet" href="./libs/og-0.8.10.css">
|
||
<script src="./libs/og-0.8.10-umd.js"></script>
|
||
<div id="globus"></div>
|
||
<script>
|
||
|
||
const osm = new og.layer.XYZ("OpenStreetMap", {
|
||
isBaseLayer: true,
|
||
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||
visibility: true,
|
||
})
|
||
|
||
const globus = new og.Globe({
|
||
target: "globus", // a HTMLDivElement which its id is `globus`
|
||
name: "Earth",
|
||
terrain: new og.terrain.GlobusTerrain(),
|
||
layers: [osm],
|
||
autoActivated: true,
|
||
viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空
|
||
})
|
||
|
||
</script>
|
||
```
|
||
|
||
### 代码：使用 esm 引用
|
||
|
||
```html
|
||
<link rel="stylesheet" href="./libs/og-0.8.10.css">
|
||
<div id="globus"></div>
|
||
<script type="module">
|
||
|
||
import { layer, Globe, terrain } from './libs/og-0.8.10-esm.js'
|
||
const { XYZ } = layer
|
||
const { GlobusTerrain } = terrain
|
||
|
||
const osm = new XYZ("OpenStreetMap", {
|
||
isBaseLayer: true,
|
||
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||
visibility: true,
|
||
})
|
||
|
||
const globus = new Globe({
|
||
target: "globus", // a HTMLDivElement which its id is `globus`
|
||
name: "Earth",
|
||
terrain: new GlobusTerrain(),
|
||
layers: [osm],
|
||
autoActivated: true,
|
||
viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空
|
||
})
|
||
|
||
</script>
|
||
```
|
||
|
||
|
||
|
||
## 文档
|
||
|
||
查看[在线示例](http://www.openglobus.org/examples.html)，或者查看 [API 帮助文档](http://www.openglobus.org/api/)。
|
||
|
||
|
||
|
||
## 如何贡献你的代码
|
||
|
||
### 开发
|
||
|
||
1. 将官方仓库 Clone 到本机
|
||
2. 使用 `npm` 或 `yarn` 安装依赖
|
||
|
||
``` sh
|
||
npm install
|
||
# 或
|
||
yarn
|
||
```
|
||
|
||
### 打包代码
|
||
|
||
运行命令
|
||
|
||
``` sh
|
||
npm run build
|
||
```
|
||
|
||
随后会在 `dist/@openglobus/` 目录下生成下列 5 个文件：
|
||
|
||
- og-<当前版本\>-umd.js
|
||
- og-<当前版本\>-umd.js.map
|
||
- og-<当前版本\>-esm.js
|
||
- og-<当前版本\>-esm.js.map
|
||
- og-<当前版本>.css
|
||
|
||
其中，js 文件均使用 `terser` 插件进行了代码压缩。
|
||
|
||
### 其他命令
|
||
|
||
`npm run core` - 仅构建 og.core （渲染引擎）
|
||
|
||
`npm run webgl` - 仅构建 og.webgl （WebGL 的封装部分）
|
||
|
||
`npm run api` - 本地构建 API 帮助文档至 `/api` 目录
|
||
|
||
`npm run serve` - 运行本地 Web 服务器以便开发以及查看示例代码
|
||
|
||
`npm run font` - 生成自定义的字体集
|
||
|
||
|
||
|
||
## 支持此项目
|
||
|
||
有多种方式来贡献此项目：
|
||
|
||
- 帮助我们测试新的或现有的功能，并[提交 bug](https://github.com/openglobus/openglobus/issues)
|
||
- 帮助我们在[谷歌 OpenGlobus 社区](https://groups.google.com/d/forum/openglobus)回答问题以及在 Gitter 上[交流](https://gitter.im/openglobus/og)
|
||
- 为 GitHub 上的仓库打个 ⭐
|
||
- 在社交媒体上传播 OpenGlobus，推特：[点我](https://twitter.com/openglobus)
|
||
- [捐助](https://donorbox.org/openglobus)
|
||
- 成为一名贡献者
|
||
|
||
|
||
|
||
## 开源许可
|
||
|
||
MIT
|
||
=======
|
||
|
||
[](https://travis-ci.com/openglobus/openglobus) 
|
||
|