-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b4e9a8b
commit 334f0ad
Showing
4 changed files
with
220 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| <p align="center"><img width="100" src="https://hijiangtao.github.io/glmaps/assets/glmaps.png" alt="glmaps logo"></p> | ||
|
|
||
| <h1 align="center">glmaps</h1> | ||
|
|
||
| <center> | ||
|
|
||
| 时空可视化示例代码集与学习教程。 | ||
|
|
||
| [](https://www.codacy.com/app/hijiangtao/glmaps?utm_source=github.com&utm_medium=referral&utm_content=hijiangtao/glmaps&utm_campaign=badger) | ||
| [](https://www.npmjs.com/package/glmaps) | ||
| [](https://github.com/hijiangtao/glmaps/releases) | ||
| [](https://www.npmjs.com/package/glmaps) | ||
| []() | ||
| [](https://github.com/hijiangtao/glmaps/issues) | ||
| [](https://github.com/hijiangtao/glmaps/pulls) | ||
| [](https://github.com/hijiangtao/glmaps/blob/master/LICENSE) | ||
|
|
||
| [](https://nodei.co/npm/glmaps/) | ||
|
|
||
| </center> | ||
|
|
||
| ## README | ||
|
|
||
| [英文](./README.md) | [中文](./CN.md) | ||
|
|
||
| ## glmaps 是什么？ | ||
|
|
||
| glmaps 是一个包含多个时空可视化示例的代码集与学习教程，这是一个采用 MIT 协议的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。 | ||
|
|
||
| ## 概览 | ||
|
|
||
| |类型|描述|效果|支持动画|支持聚类| | ||
| |---|---|---|---|---| | ||
| |2.5D / Icon|与 deck 示例一致，无更改| [](./src/layers/IconLayer/index.js) | No | Yes | | ||
| |2.5D / Brush|支持弧线动画| [](./src/layers/ArcLayer/animate.js) | Yes | No | | ||
| |2.5D / Scatter|支持淡出动画| [](./src/layers/ScatterplotLayer/index.js) | Yes | No | | ||
| |2.5D / Hexagon|支持排序筛选| [](./src/layers/HexagonLayer/index.js) | Yes | Yes | | ||
| |2.5D / Grid|支持排序筛选| [](./src/layers/ScreenGridLayer/index.js) | No | Yes | | ||
| |2.5D / Trip|与 deck 示例一致，无更改| [](./src/layers/TripLayer/index.js) | Yes | No | | ||
| |3D / Curve|THREE.BufferGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |3D / Mover|THREE.SphereGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |3D / Cube|THREE.BoxGeometry()| [](./src/globe/index.js) | No | No | | ||
| |Other / Segment|与飞线动画效果一致| [](./src/globe/index.js) | No | No | | ||
| |Other / Moon|地月系统| [](./src/globe/index.js) | No | No | | ||
|
|
||
| ## 本地运行 Demo | ||
|
|
||
| ``` | ||
| git clone [email protected]:hijiangtao/glmaps.git | ||
| cd glmaps | ||
| npm install | ||
| npm run start | ||
| ``` | ||
|
|
||
| ## 从零开始学习时空可视化系列教程（待完善） | ||
|
|
||
| * 从零开始学习时空可视化（零） / 用 React 框架管理你的 three.js 项目 - TBD | ||
| * 从零开始学习时空可视化（一） / 用 three.js 画出你的第一个地球 - TBD | ||
| * 从零开始学习时空可视化（二） / 深入浅出 three.js 点、线、面、体的实现过程 - TBD | ||
| * 从零开始学习时空可视化（三） / 利用 props 与 transitions 让你的 deck.gl 图层动起来 - TBD | ||
| * 从零开始学习时空可视化（四） / 手写 shader 给你的 deck.gl 动画另辟蹊径 - TBD | ||
| * 从零开始学习时空可视化（五） / 使用 three.js 和 deck.gl 开发的踩坑记录 - TBD | ||
|
|
||
| ## 安装 | ||
|
|
||
| ``` | ||
| cd YOUR_REPO | ||
| npm install glmaps --save | ||
| ``` | ||
|
|
||
| ## 用法 | ||
|
|
||
| glmaps 的初衷是为了帮助那些在时空可视化领域缺乏基础但充满热情的初学者，利用 three.js 与 deck.gl 的能力帮助他们快速入门，因此 glmaps 不是一个为实际生产环境准备的可视化开源库。然而，glmaps 依然允许你像使用其他 package 一样在项目中正常引入，快写些 demo 试试效果吧。 | ||
|
|
||
| ```javascript | ||
| import React from 'react'; | ||
| import {Globe} from 'glmaps'; | ||
|
|
||
| /** | ||
| * Data format: | ||
| * [ | ||
| * [ | ||
| * source.lat, | ||
| * source.lng, | ||
| * target.lat, | ||
| * target.lng, | ||
| * ], | ||
| * ... | ||
| * ] | ||
| */ | ||
| const Demo = (props) => { | ||
| return ( | ||
| <Globe | ||
| data={props.data} | ||
| id={YOUR_MOUNT_DOM_ID} | ||
| animate={true} | ||
| moon={true} | ||
| visType={'curve'} | ||
| /> | ||
| ) | ||
| }; | ||
| ``` | ||
|
|
||
| 更多示例与详细使用说明请见文档。 | ||
|
|
||
| ## 文档（待完善） | ||
|
|
||
| 本部分仍处于完善阶段。然而，你现在就可以直接在 `src` 文件夹下查看所有示例代码集。 | ||
|
|
||
| * [Layers (on Maps)](./layers/README.md) | ||
| 1. ArcLayer | ||
| 2. HexagonLayer | ||
| 3. IconLayer | ||
| 4. ScatterplotLayer | ||
| 5. ScreenGridLayer | ||
| 6. TripLayer | ||
| * [Globe](./globe/README.md) | ||
| 1. Curve | ||
| 2. Mover | ||
| 3. Cube | ||
|
|
||
| ## 联系 | ||
|
|
||
| @hijiangtao | ||
|
|
||
| ## 协议 | ||
|
|
||
| MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,93 @@ | ||
| # glmaps | ||
| A node package full of bunch of earth and map visualization examples based on Three.js and Deck.gl, easy to learn and use. | ||
| <p align="center"><img width="100" src="https://hijiangtao.github.io/glmaps/assets/glmaps.png" alt="glmaps logo"></p> | ||
|
|
||
| <h1 align="center">glmaps</h1> | ||
|
|
||
| <center> | ||
|
|
||
| Earth and map visualization example codes and tutorials. | ||
|
|
||
| [](https://www.codacy.com/app/hijiangtao/glmaps?utm_source=github.com&utm_medium=referral&utm_content=hijiangtao/glmaps&utm_campaign=badger) | ||
| []() | ||
| []() | ||
| []() | ||
| [](https://www.npmjs.com/package/glmaps) | ||
| [](https://github.com/hijiangtao/glmaps/releases) | ||
| [](https://www.npmjs.com/package/glmaps) | ||
| []() | ||
| []() | ||
| []() | ||
| []() | ||
| [](https://github.com/hijiangtao/glmaps/issues) | ||
| [](https://github.com/hijiangtao/glmaps/pulls) | ||
| [](https://github.com/hijiangtao/glmaps/blob/master/LICENSE) | ||
|
|
||
| [](https://nodei.co/npm/glmaps/) | ||
|
|
||
| ## Description | ||
| </center> | ||
|
|
||
| ## README | ||
|
|
||
| [English](./README.md) | [Chinese](./CN.md) | ||
|
|
||
| ## What is glmaps? | ||
|
|
||
| A node package full of bunch of earth and map visualization examples based on Three.js and Deck.gl, easy to learn and use. | ||
|
|
||
| ## MENU | ||
|
|
||
| * [Overview](#Overview) - Check all visualization types that `glmaps` contains. | ||
| * [ZERO](#ZERO) - Some thoughts from me that you may pay attention before have future reading. | ||
| * [Demo](#Demo) - Open browser and enter <https://localhost:8080> to check the demo locally. | ||
| * [Tutorials](#) - A series of tutorials that guide you how to code these visualization examples step by step. TBD. | ||
| * [Install](#Install) - Installation guide for developers. Just have a try, `glmaps` has not get ready for industry applications. | ||
| * [Usage](#Usage) - Usage for how to include `glmaps` in your application. | ||
| * [Document](#) - API document for `glmaps`. TBD. | ||
| * [Stories](#Stories) - Stories behind this repositry. | ||
| * [Contact](#Contact) | ||
| * [LICENSE](#LICENSE) | ||
|
|
||
| ## Overview | ||
|
|
||
| |Type|Description|Demo|Animation|Cluster| | ||
| |---|---|---|---|---| | ||
| |2.5D / Icon|No modification from deck| [](./src/layers/IconLayer/index.js) | No | Yes | | ||
| |2.5D / Brush|Support OD Arc Animation| [](./src/layers/ArcLayer/animate.js) | Yes | No | | ||
| |2.5D / Scatter|Support Fade-out Animation| [](./src/layers/ScatterplotLayer/index.js) | Yes | No | | ||
| |2.5D / Hexagon|Support Coverage Filter Conditions| [](./src/layers/HexagonLayer/index.js) | Yes | Yes | | ||
| |2.5D / Grid|Support Coverage Filter Conditions| [](./src/layers/ScreenGridLayer/index.js) | No | Yes | | ||
| |2.5D / Trip|No modification from deck| [](./src/layers/TripLayer/index.js) | Yes | No | | ||
| |3D / Curve|THREE.BufferGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |3D / Mover|THREE.SphereGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |3D / Cube|THREE.BoxGeometry()| [](./src/globe/index.js) | No | No | | ||
| |Other / Segment|The same as curve animation| [](./src/globe/index.js) | No | No | | ||
| |Other / Moon|Earth-Moon System| [](./src/globe/index.js) | No | No | | ||
| |[2.5D / Icon](./src/layers/IconLayer/index.js)|No modification from deck| [](./src/layers/IconLayer/index.js) | No | Yes | | ||
| |[2.5D / Brush](./src/layers/ArcLayer/animate.js)|Support OD Arc Animation| [](./src/layers/ArcLayer/animate.js) | Yes | No | | ||
| |[2.5D / Scatter](./src/layers/ScatterplotLayer/index.js)|Support Fade-out Animation| [](./src/layers/ScatterplotLayer/index.js) | Yes | No | | ||
| |[2.5D / Hexagon](./src/layers/HexagonLayer/index.js)|Support Coverage Filter Conditions| [](./src/layers/HexagonLayer/index.js) | Yes | Yes | | ||
| |[2.5D / Grid](./src/layers/ScreenGridLayer/index.js)|Support Coverage Filter Conditions| [](./src/layers/ScreenGridLayer/index.js) | No | Yes | | ||
| |[2.5D / Trip](./src/layers/TripLayer/index.js)|No modification from deck| [](./src/layers/TripLayer/index.js) | Yes | No | | ||
| |[3D / Curve](./src/globe/index.js)|THREE.BufferGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |[3D / Mover](./src/globe/index.js)|THREE.SphereGeometry()| [](./src/globe/index.js) | Yes | No | | ||
| |[3D / Cube](./src/globe/index.js)|THREE.BoxGeometry()| [](./src/globe/index.js) | No | No | | ||
| |[Other / Segment](./src/globe/index.js)|The same as curve animation| [](./src/globe/index.js) | No | No | | ||
| |[Other / Moon](./src/globe/index.js)|Earth-Moon System| [](./src/globe/index.js) | No | No | | ||
|
|
||
| ## ZERO | ||
|
|
||
| ## Install | ||
| **Q: What frameworks are used in `glmaps`?** | ||
|
|
||
| React Hooks is ready in 16.8.0, and `glmaps` get benefits from it at once, if you are not familiar with it, please check [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html) first; On the other hand, deck.gl is WebGL2 powered geospatial visualization layers, so please make sure your browser support WebGL2. To find out if WebGL(2) is enabled in your browser, go to <http://get.webgl.org/> or <https://get.webgl.org/webgl2/>. Besides, if you meet any errors, you can put your problem in issues, because that's most likely a problem of `glmaps` rather than yourself, since `glmaps` organizes local development environment from scratch, such as webpack, babel, etc. | ||
|
|
||
| **Q: Guidance for visualization beginners?** | ||
|
|
||
| I highly recommend you follows these steps in using `glmaps`: | ||
| - Learn how to install three.js and deck.gl from scratch, and code your first "Hello World" with them; | ||
| - Run official demos and get familiar with their API; | ||
| - Follow the tutorials step by step to make your visualization examples more powerful, or check `glmaps` codes in `src` folder directly; | ||
| - (Optional) Use `glmaps` in your demo application; | ||
| - Rewrite `glmaps` example with your own codes; | ||
| - Congratulations on mastering basics of spatio-temporal visualization, you can use `three.js` and `deck.gl` to draw a more fantastic world with spatio-temporal data! | ||
|
|
||
| **Q: How to participate in `glmaps` project?** | ||
|
|
||
| `glmaps` is still at the very beginning period of my thoughts, you are welcome to oepn ISSUE, PR or email me, if you have any ideas on how to make `glmaps` better for visualization beginners: | ||
| - Participate in implementing tutorials together; | ||
| - Contribute codes to `glmaps` with PR (such as imporve `mover` animation in `Globe`); | ||
| - Speak out your doubts in learning data visualization with issues; | ||
| - Tell me your advice on how to make `glmaps` better with issues; | ||
| - Other aspects not included yet. | ||
|
|
||
| ## Demo | ||
|
|
||
| ``` | ||
| cd YOUR_REPO | ||
| npm install glmaps --save | ||
| git clone [email protected]:hijiangtao/glmaps.git | ||
| cd glmaps | ||
| npm install | ||
| npm run start | ||
| ``` | ||
|
|
||
| ## Tutorials (TBD) | ||
|
|
@@ -45,11 +99,19 @@ npm install glmaps --save | |
| * Animate your deck.gl with shaders | ||
| * Some tips in visualizing data with deck.gl | ||
|
|
||
| ## Install | ||
|
|
||
| ``` | ||
| cd YOUR_REPO | ||
| npm install glmaps --save | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| This is a package mainly designed for visualization lovers in learning Three.js and Deck.gl, however, you can use them as a normal package as other packages in npm. | ||
|
|
||
| ```javascript | ||
| import React from 'react'; | ||
| import {Globe} from 'glmaps'; | ||
|
|
||
| /** | ||
|
|
@@ -68,6 +130,7 @@ const Demo = (props) => { | |
| return ( | ||
| <Globe | ||
| data={props.data} | ||
| id={YOUR_MOUNT_DOM_ID} | ||
| animate={true} | ||
| moon={true} | ||
| visType={'curve'} | ||
|
|
@@ -80,7 +143,7 @@ More examples and detailed usage guidances can be found in documents. | |
|
|
||
| ## Document (TBD) | ||
|
|
||
| This part is still under constructing, however, you can access full codes in `src` folder. | ||
| This part is still under constructing, however, you can access full codes in `src` folder right now. | ||
|
|
||
| * [Layers (on Maps)](./layers/README.md) | ||
| 1. ArcLayer | ||
|
|
@@ -90,15 +153,13 @@ This part is still under constructing, however, you can access full codes in `sr | |
| 5. ScreenGridLayer | ||
| 6. TripLayer | ||
| * [Globe](./globe/README.md) | ||
| 1. Curve | ||
| 2. Mover | ||
| 3. Cube | ||
|
|
||
| ## Run the demo locally | ||
| ## Stories | ||
|
|
||
| ``` | ||
| git clone [email protected]:hijiangtao/glmaps.git | ||
| cd glmaps | ||
| npm install | ||
| npm run start | ||
| ``` | ||
| Why I create this repositry? | ||
|
|
||
| ## Contact | ||
|
|
||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.