OpenGlobus é uma biblioteca projetada para dispor um mapa 3D para planetas por meio de "tiles maps" (mapa ou imagens em ladrilho), imagens e dados em vetores, marcadores e objeto 3D. Usando tecnologia WebGL , de código aberto e completamente livre.
O principal objetivo do OpenGlobus é proporcionar um mapa 3D leve e rápido, com boa aparencia, de interface amigável e fácil implementação para qualquer projeto.
npm install @openglobus/og
# or
yarn add @openglobus/og
<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: [5.56707, 45.15679, 5.88834, 45.22260]
})
</script>
<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: [5.56707, 45.15679, 5.88834, 45.22260]
})
</script>
OpenGlobus se integra bem com frameworks como React, Angular ou Vuejs Read more here.
De uma olhada em: hosted examples, or the API documentation.
- Clone repository.
- Run in the repo folder:
npm install
# if you use yarn, you can run `yarn`
yarn
Run
npm run build
Then, it will generate 5 files at dist/@openglobus/
:
- og.umd.js
- og.umd.js.map
- og.esm.js
- og.esm.js.map
- og.css
All JavaScript files are compressed by terser
plugin.
npm run core
- build og.core (rendering engine) stand-alone
npm run webgl
- build og.webgl (webgl wrap) stand-alone
npm run api
- build api documentation into /api folder
npm run serve
- run local web server for develop and watch examples
npm run font
- generate custom font atlas
Há varias maneiras de contribuir com o projeto:
- Ajudando a testar e reportando problemas bugs
- Ajudando a fazer perguntas forum e chat
- ⭐️ Estamos no Github
- Espalhe coisas sobre o OpenGlobus no social media
- Se torne um contribuidor