archive-gh-me/openglobus
1
0
Fork 0
mirror of https://github.com/openglobus/openglobus.git synced 2025-12-08 19:25:27 +00:00
Code Issues Projects Releases Wiki Activity

#657 cleanup README and fonts

Browse Source
This commit is contained in:
Zemledelec 2023-09-16 12:45:58 +04:00
parent 156e7dec7f
commit 4ea688214a
15 changed files with 206 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
README.md
View File

@ -1,14 +1,17 @@
[![NPM PACKAGE](https://img.shields.io/npm/v/@openglobus/og.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/@openglobus/og) [![NPM PACKAGE](https://img.shields.io/npm/v/@openglobus/og.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/@openglobus/og)
![BUILD](https://github.com/openglobus/openglobus/actions/workflows/push.yml/badge.svg) ![BUILD](https://github.com/openglobus/openglobus/actions/workflows/push.yml/badge.svg)
# Openglobus # Openglobus
English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md) English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md)
[Openglobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets [Openglobus](http://www.openglobus.org/) is a typescript/javascript library designed to display interactive 3D maps at a
with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and scale from planet to bee.
It supports various high-resolution terrain providers, imagery layers, renders thousands of 3D objects, provides
geometry measurement tools, and more. It uses the WebGL technology, open-source and
completely free. completely free.
Openglobus main goal is to make 3d map features fast, good lookin, user friendly and easy to implement in any Openglobus main goal is to make 3D map features fast, good looking, user friendly and easy to implement in any
related project. related project.
## Getting Start ## Getting Start
@ -24,65 +27,72 @@ yarn add @openglobus/og
### Code: using umd lib ### Code: using umd lib
```html ```html
<link rel="stylesheet" href="./libs/og.css">
<script src="./libs/og.umd.js"></script> <link rel="stylesheet" href="../dist/@openglogus/og.css">
<script src="../dist/@openglogus/og.umd.js"></script>
<div id="globus"></div> <div id="globus"></div>
<script> <script>
const osm = new og.layer.XYZ("OpenStreetMap", { const osm = new og.layer.XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new og.Globe({ const globus = new og.Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new og.terrain.GlobusTerrain(), terrain: new og.terrain.GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260] fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
### Code: using esm lib ### Code: using esm lib
``` html ```html
<link rel="stylesheet" href="./libs/og.css">
<link rel="stylesheet" href="../dist/@openglobus/og.css">
<div id="globus"></div> <div id="globus"></div>
<script type="module"> <script type="module">
import { layer, Globe, terrain } from './libs/og.esm.js' import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
const { XYZ } = layer
const { GlobusTerrain } = terrain
const osm = new XYZ("OpenStreetMap", { const osm = new XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new Globe({ const globus = new Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new GlobusTerrain(), terrain: new GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260] fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
## Frameworks integrations ## Frameworks integrations
Openglobus integrates well with front-end frameworks like React, Angular or Vuejs [Read more here](./framework-intergration.md). Openglobus integrates well with front-end frameworks like React, Angular or
Vuejs [Read more here](./framework-intergration.md).
## Documentation ## Documentation
UNDER CONSTRUCTION UNDER CONSTRUCTION
Check out the [hosted examples](http://www.openglobus.org/examples.html), or Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
check out the [hosted examples](http://www.openglobus.org/examples.html), and
the [API documentation](http://www.openglobus.org/api/). the [API documentation](http://www.openglobus.org/api/).
## Get Started to contribute ## Get Started to contribute
@ -113,20 +123,39 @@ Then, it will generate 5 files at `dist/@openglobus/`:
- og.esm.js - og.esm.js
- og.esm.js.map - og.esm.js.map
- og.css - og.css
- ./res/...
All JavaScript files are compressed by `terser` plugin. ### Run examples
First, it starts by watching sources and building into dist folder esm module:
```sh
npm run dev
```
Second, runs local server, then you can browse 127.0.0.1:8080:
```sh
npm run serve
```
Third, try an example from the sandbox:
```sh
http://127.0.0.1:8080/sandbox/osm/osm.html
```
### Other scripts ### Other scripts
`npm run core` - build og.core (rendering engine) stand-alone
`npm run webgl` - build og.webgl (webgl wrap) stand-alone
`npm run docs` - build [api documentation](https://www.openglobus.org/api/) into /api folder `npm run docs` - build [api documentation](https://www.openglobus.org/api/) into /api folder
`npm run serve` - run local web server for develop and watch examples `npm run serve` - run local web server for develop and watch examples
`npm run font` - generate custom font atlas `npm run lint` - run code linter
`npm run test` - run tests
`tsc` - run typescript parser
## Support the Project ## Support the Project

109
README_CN.md
View File

@ -20,26 +20,29 @@ yarn add @openglobus/og
### 代码：使用 umd 引用 ### 代码：使用 umd 引用
``` html ```html
<link rel="stylesheet" href="./libs/og.css">
<script src="./libs/og.umd.js"></script> <link rel="stylesheet" href="../dist/@openglogus/og.css">
<script src="../dist/@openglogus/og.umd.js"></script>
<div id="globus"></div> <div id="globus"></div>
<script> <script>
const osm = new og.layer.XYZ("OpenStreetMap", { const osm = new og.layer.XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new og.Globe({ const globus = new og.Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new og.terrain.GlobusTerrain(), terrain: new og.terrain.GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空 fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
@ -47,39 +50,39 @@ yarn add @openglobus/og
### 代码：使用 esm 引用 ### 代码：使用 esm 引用
```html ```html
<link rel="stylesheet" href="./libs/og.css">
<link rel="stylesheet" href="../dist/@openglobus/og.css">
<div id="globus"></div> <div id="globus"></div>
<script type="module"> <script type="module">
import { layer, Globe, terrain } from './libs/og.esm.js' import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
const { XYZ } = layer
const { GlobusTerrain } = terrain
const osm = new XYZ("OpenStreetMap", { const osm = new XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new Globe({ const globus = new Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new GlobusTerrain(), terrain: new GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空 fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
## 文档 ## 文档
查看[在线示例](http://www.openglobus.org/examples.html)，或者查看 [API 帮助文档](http://www.openglobus.org/api/)。 UNDER CONSTRUCTION
Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
check out the [hosted examples](http://www.openglobus.org/examples.html), and
the [API documentation](http://www.openglobus.org/api/).
## 如何贡献你的代码 ## 如何贡献你的代码
@ -109,21 +112,39 @@ npm run build
- og.esm.js - og.esm.js
- og.esm.js.map - og.esm.js.map
- og.css - og.css
- ./res/...
其中，js 文件均使用 `terser` 插件进行了代码压缩。 ### 新情况
First, it starts by watching sources and building into dist folder esm module:
```sh
npm run dev
```
Second, runs local server, then you can browse 127.0.0.1:8080:
```sh
npm run serve
```
Third, try an example from the sandbox:
```sh
http://127.0.0.1:8080/sandbox/osm/osm.html
```
### 其他命令 ### 其他命令
`npm run core` - 仅构建 og.core （渲染引擎）
`npm run webgl` - 仅构建 og.webgl （WebGL 的封装部分）
`npm run docs` - 本地构建 API 帮助文档至 `/api` 目录 `npm run docs` - 本地构建 API 帮助文档至 `/api` 目录
`npm run serve` - 运行本地 Web 服务器以便开发以及查看示例代码 `npm run serve` - 运行本地 Web 服务器以便开发以及查看示例代码
`npm run font` - 生成自定义的字体集 `npm run lint` - run code linter
`npm run test` - run tests
`tsc` - run typescript parser
## 支持此项目 ## 支持此项目

106
README_pt-BR.md
View File

@ -22,54 +22,58 @@ yarn add @openglobus/og
### Código: usando umd lib ### Código: usando umd lib
```html ```html
<link rel="stylesheet" href="./libs/og.css">
<script src="./libs/og.umd.js"></script> <link rel="stylesheet" href="../dist/@openglogus/og.css">
<script src="../dist/@openglogus/og.umd.js"></script>
<div id="globus"></div> <div id="globus"></div>
<script> <script>
const osm = new og.layer.XYZ("OpenStreetMap", { const osm = new og.layer.XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new og.Globe({ const globus = new og.Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new og.terrain.GlobusTerrain(), terrain: new og.terrain.GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260] fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
### Código: usando esm lib ### Código: usando esm lib
``` html ```html
<link rel="stylesheet" href="./libs/og.css">
<link rel="stylesheet" href="../dist/@openglobus/og.css">
<div id="globus"></div> <div id="globus"></div>
<script type="module"> <script type="module">
import { layer, Globe, terrain } from './libs/og.esm.js' import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
const { XYZ } = layer
const { GlobusTerrain } = terrain
const osm = new XYZ("OpenStreetMap", { const osm = new XYZ("OpenStreetMap", {
isBaseLayer: true, isBaseLayer: true,
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true, visibility: true,
}) });
const globus = new Globe({ const globus = new Globe({
target: "globus", // a HTMLDivElement which its id is `globus` target: "globus", // a HTMLDivElement which its id is `globus`
name: "Earth", name: "Earth",
terrain: new GlobusTerrain(), terrain: new GlobusTerrain(),
layers: [osm], layers: [osm],
autoActivated: true, autoActivated: true,
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260] fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
}) resourcesSrc: "../dist/@openglobus/res", // Night and water mask terxtures folder
viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
});
</script> </script>
``` ```
@ -80,7 +84,9 @@ Openglobus se integra bem com frameworks como React, Angular ou Vuejs [Read more
## Documentação ## Documentação
De uma olhada em: [hosted examples](http://www.openglobus.org/examples.html), or UNDER CONSTRUCTION
Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
check out the [hosted examples](http://www.openglobus.org/examples.html), and
the [API documentation](http://www.openglobus.org/api/). the [API documentation](http://www.openglobus.org/api/).
## Comece a contribuir ## Comece a contribuir
@ -111,20 +117,40 @@ Then, it will generate 5 files at `dist/@openglobus/`:
- og.esm.js - og.esm.js
- og.esm.js.map - og.esm.js.map
- og.css - og.css
- ./res/...
All JavaScript files are compressed by `terser` plugin. ### Run examples
First, it starts by watching sources and building into dist folder esm module:
```sh
npm run dev
```
Second, runs local server, then you can browse 127.0.0.1:8080:
```sh
npm run serve
```
Third, try an example from the sandbox:
```sh
http://127.0.0.1:8080/sandbox/osm/osm.html
```
### Outros scripts ### Outros scripts
`npm run core` - build og.core (rendering engine) stand-alone
`npm run webgl` - build og.webgl (webgl wrap) stand-alone
`npm run docs` - build [documentation](https://www.openglobus.org/api/) into /api folder `npm run docs` - build [documentation](https://www.openglobus.org/api/) into /api folder
`npm run serve` - run local web server for develop and watch examples `npm run serve` - run local web server for develop and watch examples
`npm run font` - generate custom font atlas `npm run lint` - run code linter
`npm run test` - run tests
`tsc` - run typescript parser
## Ajude o projeto ## Ajude o projeto

0
res/fonts/DancingScript-Regular.ttf → bmfont/DancingScript-Regular.ttf
View File

0
res/fonts/Karla-Bold.ttf → bmfont/Karla-Bold.ttf
View File

0
res/fonts/Karla-Light.ttf → bmfont/Karla-Light.ttf
View File

0
res/fonts/Karla-Medium.ttf → bmfont/Karla-Medium.ttf
View File

0
res/fonts/NotoSansArabic-Regular.ttf → bmfont/NotoSansArabic-Regular.ttf
View File

0
res/fonts/Roboto-Regular.ttf → bmfont/Roboto-Regular.ttf
View File

0
res/fonts/arial.ttf → bmfont/arial.ttf
View File

2
res/fonts/run.cmd → bmfont/bmfont.cmd
View File

@ -1 +1 @@
npx msdf-bmfont-xml --reuse -i .\charset.txt -m 1024,1024 -f json -o %1.png -s 32 -r 24 -p 1 -t msdf %1 npx msdf-bmfont-xml --reuse -i .\charset.txt -m 1024,1024 -f json -o %2/%1.png -s 32 -r 24 -p 1 -t msdf %1

2
res/fonts/run_rtl.cmd → bmfont/bmfont_rtl.cmd
View File

@ -1 +1 @@
msdf-bmfont.cmd --reuse -i .\charset-arabic.txt -m 1024,1024 -f json -o %1.png -s 42 -r 14 -p 1 -t msdf --rtl %1 msdf-bmfont.cmd --reuse -i .\charset-arabic.txt -m 1024,1024 -f json -o %2/%1.png -s 42 -r 14 -p 1 -t msdf --rtl %1

0
res/fonts/charset-arabic.txt → bmfont/charset-arabic.txt
View File

0
res/fonts/charset.txt → bmfont/charset.txt
View File

BIN
res/fonts/NotoSansTC-Regular.otf
View File

Binary file not shown.