mirror of https://gitee.com/antv-l7/antv-l7
docs(docs): add tutorial how to start demo locally
This commit is contained in:
thinkinggis
parent
2932da9673
commit
937c331bdd
|
|
@ -1,11 +1,11 @@
|
|||
<!--
|
||||
Thank you for your pull request. Please review below requirements.
|
||||
Bug fixes and new features should include tests and possibly benchmarks.
|
||||
Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
|
||||
Contributors guide: https://github.com/antvis/L7/blob/master/.github/CONTRIBUTING.md
|
||||
|
||||
感谢您贡献代码。请确认下列 checklist 的完成情况。
|
||||
Bug 修复和新功能必须包含测试，必要时请附上性能测试。
|
||||
Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
|
||||
Contributors guide: https://github.com/antvis/L7/blob/master/.github/CONTRIBUTING.md
|
||||
-->
|
||||
|
||||
##### Checklist
|
||||
|
|
|
|||
|
|
@ -77,4 +77,5 @@ yarn.lock
|
|||
package-lock.json
|
||||
git_log.sh
|
||||
node_modules/
|
||||
packages/l7/package_bak.json
|
||||
packages/l7/package_bak.json
|
||||
|
||||
|
|
|
|||
|
|
@ -85,10 +85,7 @@ scene.addLayer(pointLayer);
|
|||
- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
|
||||
- [API documentation](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
|
||||
|
||||
## 🔨 Development
|
||||
|
||||
We wrote a [contribution guide](./.github/CONTRIBUTING.md) to help you get started.
|
||||
- [Contributor documentation](./.github/CONTRIBUTING.md)
|
||||
|
||||
## ✅ License
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Data
|
||||
order: 1
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 数据
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 数据
|
||||
order: 1
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 数据
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
title: How to start the demo locally
|
||||
order: 1
|
||||
---
|
||||
|
||||
### 一、打开L7demo页面
|
||||
|
||||
|
||||
选择一个任意一个你想看的demo
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
|
||||
|
||||
|
||||
### 二、打开 codesandbox。
|
||||
|
||||
点击左侧第三个按钮，你就进入了 codesandbox。
|
||||
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
|
||||
|
||||
你可能想说我就想本地跑起来，不想在线修改。
|
||||
|
||||
当然是是可以的
|
||||
|
||||
|
||||
### 三、下载demo源码
|
||||
在codesandbox的文件目录工具有下载按钮，参照图中红色部分
|
||||
|
||||
点击下载你可以把这个demo的源码下载到本地。
|
||||
|
||||
### 四、启动项目
|
||||
解压项目，进入项目目录
|
||||
|
||||
|
||||
#### 1.安装环境依赖
|
||||
|
||||
如果不知道yarn可能需要补充一下前端知识了，如果没有yarn环境你需要安装一下，
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
|
||||
#### 2. 启动项目
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
浏览器就会自动打开 [http://localhost:3000/](http://localhost:3000/)，这样demo 就跑起来了
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
现在你可以尽情的本地修改代码，添加自己的图层了。
|
||||
|
||||
L7 所有demo都可以在codesandbox 打开，你可以下载代码。
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: 如何在本地运行demo
|
||||
order: 1
|
||||
---
|
||||
|
||||
|
||||
### 一、打开L7demo页面
|
||||
|
||||
|
||||
选择一个任意一个你想看的demo
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
|
||||
|
||||
|
||||
### 二、打开 codesandbox。
|
||||
|
||||
点击左侧第三个按钮，你就进入了 codesandbox。
|
||||
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
|
||||
|
||||
你可能想说我就想本地跑起来，不想在线修改。
|
||||
|
||||
当然是是可以的
|
||||
|
||||
|
||||
### 三、下载demo源码
|
||||
在codesandbox的文件目录工具有下载按钮，参照图中红色部分
|
||||
|
||||
点击下载你可以把这个demo的源码下载到本地。
|
||||
|
||||
### 四、启动项目
|
||||
解压项目，进入项目目录
|
||||
|
||||
|
||||
#### 1.安装环境依赖
|
||||
|
||||
如果不知道yarn可能需要补充一下前端知识了，如果没有yarn环境你需要安装一下，
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
|
||||
#### 2. 启动项目
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
浏览器就会自动打开 [http://localhost:3000/](http://localhost:3000/)，这样demo 就跑起来了
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
|
||||
|
||||
|
||||
现在你可以尽情的本地修改代码，添加自己的图层了。
|
||||
|
||||
L7 所有demo都可以在codesandbox 打开，你可以下载代码。
|
||||
|
||||
|
||||
|
|
@ -5,6 +5,7 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
const path = require('path');
|
||||
exports.onCreateWebpackConfig = ({ getConfig }) => {
|
||||
const config = getConfig();
|
||||
config.module.rules.push({
|
||||
test: /\.glsl$/,
|
||||
use: {
|
||||
loader: 'glsl-shaders-loader'
|
||||
}
|
||||
});
|
||||
config.resolve.extensions.push('.glsl');
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
'@antv/l7': path.resolve(__dirname, 'packages/l7/src'),
|
||||
'@antv/l7-core': path.resolve(__dirname, 'packages/core/src'),
|
||||
'@antv/l7-component': path.resolve(__dirname, 'packages/component/src'),
|
||||
'@antv/l7-layers': path.resolve(__dirname, 'packages/layers/src'),
|
||||
'@antv/l7-maps': path.resolve(__dirname, 'packages/maps/src'),
|
||||
'@antv/l7-renderer': path.resolve(__dirname, 'packages/renderer/src'),
|
||||
'@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
|
||||
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
|
||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
|
||||
'@antv/l7-maps': path.resolve(__dirname, 'packages/maps/src')
|
||||
};
|
||||
};
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -613,15 +613,7 @@
|
|||
"@babel/helper-plugin-utils" "^7.0.0"
|
||||
"@babel/plugin-syntax-object-rest-spread" "^7.2.0"
|
||||
|
||||
"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.5.5":
|
||||
version "7.7.4"
|
||||
resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
|
||||
integrity sha512-rnpnZR3/iWKmiQyJ3LKJpSwLDcX/nSXhdLk4Aq/tXOApIvyu7qoabrige0ylsAJffaUC51WiBu209Q0U+86OWQ==
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.0.0"
|
||||
"@babel/plugin-syntax-object-rest-spread" "^7.7.4"
|
||||
|
||||
"@babel/plugin-proposal-object-rest-spread@^7.7.4":
|
||||
"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.5.5", "@babel/plugin-proposal-object-rest-spread@^7.7.4":
|
||||
version "7.7.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
|
||||
integrity sha512-rnpnZR3/iWKmiQyJ3LKJpSwLDcX/nSXhdLk4Aq/tXOApIvyu7qoabrige0ylsAJffaUC51WiBu209Q0U+86OWQ==
|
||||
|
|
|
|||
Loading…
Reference in New Issue