Skip to content

Latest commit

 

History

History
147 lines (96 loc) · 3.58 KB

README_CN.md

File metadata and controls

147 lines (96 loc) · 3.58 KB

Join the chat at https://gitter.im/openglobus/og

OpenGlobus

English | 简体中文

OpenGlobus 是一个用于展示带有地图瓦片、影像、矢量数据、标注、三维物体的交互式三维地图(地球)的 JavaScript 库。它基于 WebGL 技术,开源且免费。

这个库的主要目标是令三维地图的功能迅速且美观地展示,并且对用户友好,易于在相关的项目中实施。

起步

安装

npm install @openglobus/og
# 或者
yarn add @openglobus/og

代码:使用 umd 引用

<link rel="stylesheet" href="./libs/og.css">
<script src="./libs/og.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 引用

<link rel="stylesheet" href="./libs/og.css">
<div id="globus"></div>
<script type="module">

  import { layer, Globe, terrain } from './libs/og.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>

文档

查看在线示例,或者查看 API 帮助文档

如何贡献你的代码

开发

  1. 将官方仓库 Clone 到本机
  2. 使用 npmyarn 安装依赖
npm install
#
yarn

打包代码

运行命令

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
  • 帮助我们在谷歌 OpenGlobus 社区回答问题以及在 Gitter 上交流
  • 为 GitHub 上的仓库打个 ⭐
  • 在社交媒体上传播 OpenGlobus,推特:点我
  • 成为一名贡献者

开源许可

MIT

Build Status Join the chat at https://gitter.im/openglobus/og