antv-l7/docs/tutorial/demo.en.md

63 lines
1.8 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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。
![L7 地理可视化](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*TrpMSJrrSDMAAAAAAAAAAABkARQnAQ)
<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 打开,你可以下载代码。