---
title: "本地运行"
description: "本地运行"
language: "zh"
canonical: "https://l7.antv.antgroup.com/zh/tutorial/demo/"
---

[资料索引](/llms.txt)

### 一、打开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%">

现在你可以尽情的本地修改代码，添加自己的图层了。<br />
`L7` 所有 `demo` 都可以在 `codesandbox` 打开，你可以下载代码。