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

---
title: Local 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。

![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 打开，你可以下载代码。