antv-l7/packages/site/docs/tutorial/demo.zh.md

---
title: 本地运行
order: 1
---
<embed src="@/docs/common/style.md"></embed>

### 一、打开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源码

1. 在 `codesandbox` 的文件目录工具有下载按钮，参照图中红色部分。

2. 点击下载你可以把这个 `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` 打开，你可以下载代码。