mirror of https://gitee.com/antv-l7/antv-l7
63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
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 打开，你可以下载代码。
|