Skip to content

Latest commit

 

History

History
167 lines (116 loc) · 4.15 KB

README_pt-BR.md

File metadata and controls

167 lines (116 loc) · 4.15 KB

NPM PACKAGE BUILD

Openglobus

English | 简体中文 | Portuguese-BR

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.

Começando

Instalação

npm install @openglobus/og
# or
yarn add @openglobus/og

Código: usando umd lib

<link rel="stylesheet" href="../lib/@openglogus/og.css">
<script src="../lib/@openglogus/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],
        fontsSrc: "../lib/@openglobus/res/fonts", // Fonts folder
        resourcesSrc: "../lib/@openglobus/res",   // Night and water mask textures folder
        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
    });

</script>

Código: usando esm lib

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

    import {XYZ, Globe, GlobusTerrain} from '../lib/@openglobus/og.esm.js';

    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],
        fontsSrc: "../res/fonts",  // Fonts folder
        resourcesSrc: "../res",    // Night and water mask textures folder
        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
    });

</script>

Integrações de Frameworks

Openglobus se integra bem com frameworks como React, Angular ou Vuejs Read more here.

Documentação

UNDER CONSTRUCTION Here is a Wiki, also check out the hosted examples, and the API documentation.

Comece a contribuir

Desenvolvimento

  1. Clone repository.
  2. Run in the repo folder:
npm install
# if you use yarn, you can run `yarn`
yarn

Construindo Bibliotecas

Run

npm run build

Then, it will generate 5 files at lib/@openglobus/:

  • og.umd.js
  • og.umd.js.map
  • og.esm.js
  • og.esm.js.map
  • og.css
  • ./res/...

Run examples

First, it starts by watching sources and building into ./lib folder esm module:

npm run dev

Second, runs local server, then you can browse 127.0.0.1:8080:

npm run serve

Third, try an example from the sandbox:

 http://127.0.0.1:8080/sandbox/osm/osm.html

Outros scripts

npm run docs - build documentation into /api folder

npm run serve - run local web server for develop and watch examples

npm run lint - run code linter

npm run test - run tests

tsc - run typescript parser

Ajude o projeto

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

Licença

MIT