From ff79e31015ee0cc5ae48da6eb05f8eb885e773d1 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 25 Nov 2019 11:47:02 +0800 Subject: [PATCH] docs(tutorial): add map tutorial --- .gitignore | 1 + docs/manual/tutorial/data.en.md | 65 ---------- docs/manual/tutorial/data.zh.md | 74 ----------- docs/manual/tutorial/map/amap.md | 0 docs/manual/tutorial/quickstart.en.md | 166 ------------------------- docs/manual/tutorial/quickstart.zh.md | 167 ------------------------- docs/tutorial/data.en.md | 2 +- docs/tutorial/map/amap.en.md | 158 ++++++++++++++++++++++++ docs/tutorial/map/amap.zh.md | 158 ++++++++++++++++++++++++ docs/tutorial/map/mapbox.en.md | 169 ++++++++++++++++++++++++++ docs/tutorial/map/mapbox.zh.md | 167 +++++++++++++++++++++++++ docs/tutorial/quickstart.en.md | 10 +- docs/tutorial/quickstart.zh.md | 5 +- gatsby-config.js | 8 +- packages/l7/package.json | 10 +- packages/l7/package_bak.json | 32 +++++ packages/l7/src/index.ts | 15 +-- 17 files changed, 711 insertions(+), 496 deletions(-) delete mode 100644 docs/manual/tutorial/data.en.md delete mode 100644 docs/manual/tutorial/data.zh.md delete mode 100644 docs/manual/tutorial/map/amap.md delete mode 100644 docs/manual/tutorial/quickstart.en.md delete mode 100644 docs/manual/tutorial/quickstart.zh.md create mode 100644 docs/tutorial/map/amap.en.md create mode 100644 docs/tutorial/map/amap.zh.md create mode 100644 docs/tutorial/map/mapbox.en.md create mode 100644 docs/tutorial/map/mapbox.zh.md create mode 100644 packages/l7/package_bak.json diff --git a/.gitignore b/.gitignore index 3a9c1ec9e0..68d6ca3580 100644 --- a/.gitignore +++ b/.gitignore @@ -75,3 +75,4 @@ public yarn.lock package-lock.json git_log.sh +packages/l7/package copy.json \ No newline at end of file diff --git a/docs/manual/tutorial/data.en.md b/docs/manual/tutorial/data.en.md deleted file mode 100644 index f6ddefc5df..0000000000 --- a/docs/manual/tutorial/data.en.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: data -order: 1 ---- - -## 数据 - -目前L7支持的数据格式有GeoJson,CSV,JSon Image - -GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。 - - -## GeoJSON - -> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 - - - -```json -{ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [ - 110.478515625, - 32.76880048488168 - ], - [ - 117.68554687499999, - 32.76880048488168 - ], - [ - 117.68554687499999, - 37.64903402157866 - ], - [ - 110.478515625, - 37.64903402157866 - ], - [ - 110.478515625, - 32.76880048488168 - ] - ] - ] - } - } - ] -} -``` - -## 地理统计分析工具 -[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 - -## 在线工具 - -[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 - -[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据 diff --git a/docs/manual/tutorial/data.zh.md b/docs/manual/tutorial/data.zh.md deleted file mode 100644 index 781c763b24..0000000000 --- a/docs/manual/tutorial/data.zh.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 数据 -order: 1 ---- - -## 数据 - -目前L7支持的数据格式有GeoJson,CSV,JSon Image - -GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。 - - -## GeoJSON - -> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 - - - -```json -{ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [ - 110.478515625, - 32.76880048488168 - ], - [ - 117.68554687499999, - 32.76880048488168 - ], - [ - 117.68554687499999, - 37.64903402157866 - ], - [ - 110.478515625, - 37.64903402157866 - ], - [ - 110.478515625, - 32.76880048488168 - ] - ] - ] - } - } - ] -} -``` - -## 地理统计分析工具 -[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 - -## 在线工具 - -[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 - -[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据 - -## 数据资源 - -#### 全国行政区划边界  -[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) - -#### HighCharts 全球行政区划数据集 - -[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/) diff --git a/docs/manual/tutorial/map/amap.md b/docs/manual/tutorial/map/amap.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/manual/tutorial/quickstart.en.md b/docs/manual/tutorial/quickstart.en.md deleted file mode 100644 index 8c72bca67f..0000000000 --- a/docs/manual/tutorial/quickstart.en.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: QuickStart -order: 0 -redirect_from: - - /en/docs/manual ---- -# 使用方法 - -L7 提供三种使用方式：CDN、Submodule。 - -## 通过 CDN 使用 - -首先在 `` 中引入 L7 CDN 版本的 JS 和 CSS 文件： -```html - - - -``` - -如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)： -```html - - - - - -``` -⚠️高德采用异步加载，因此不需要引入任何额外静态文件。 - -然后在 `` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`： -⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下： -* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/) -* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) - -## 通过 Submodule 使用 - -首先通过 `npm/yarn` -```bash -npm install --save @antv/l7 - -yarn add npm install --save @antv/l7 - -``` - -然后就可以使用其中包含的场景和各类图层： -```typescript -import { Scene, PolygonLayer } from '@antv/l7'; - -(async function() { - // 获取数据 - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ); - const data = await response.json(); - - // 创建场景 - const scene = new Scene({ - center: [110.19382669582967, 50.258134], - id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token - }); - - // 创建图层 - const layer = new PolygonLayer({}); - layer - .source(data) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .style({ - opacity: 0.8, - }); - - // 添加图层到场景中 - scene.addLayer(layer); - - // 渲染场景 - scene.render(); -})(); -``` - - -L7 目前的文档都通过这种方式使用，可以参考项目中的 stories： -* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx) -* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx) - - -## [WIP] React - -React 组件待开发，目前可以暂时以 Submodule 方式使用： -```tsx -import { Scene, PolygonLayer} from '@antv/l7'; -import * as React from 'react'; - -export default class AMap extends React.Component { - private scene: Scene; - - public componentWillUnmount() { - this.scene.destroy(); - } - - public async componentDidMount() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ); - const scene = new Scene({ - center: [110.19382669582967, 50.258134], - id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token - }); - const layer = new PolygonLayer({}); - - layer - .source(await response.json()) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .style({ - opacity: 0.8, - }); - scene.addLayer(layer); - scene.render(); - this.scene = scene; - } - - public render() { - return ( -
- ); - } -} -``` - -⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。 - diff --git a/docs/manual/tutorial/quickstart.zh.md b/docs/manual/tutorial/quickstart.zh.md deleted file mode 100644 index 1694a677f8..0000000000 --- a/docs/manual/tutorial/quickstart.zh.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 快速上手 -order: 0 -redirect_from: - - /zh/docs/manual ---- - -# 使用方法 - -L7 提供三种使用方式：CDN、Submodule。 - -## 通过 CDN 使用 - -首先在 `` 中引入 L7 CDN 版本的 JS 和 CSS 文件： -```html - - - -``` - -如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)： -```html - - - - - -``` -⚠️高德采用异步加载，因此不需要引入任何额外静态文件。 - -然后在 `` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`： -⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下： -* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/) -* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) - -## 通过 Submodule 使用 - -首先通过 `npm/yarn` -```bash -npm install --save @antv/l7 - -yarn add npm install --save @antv/l7 - -``` - -然后就可以使用其中包含的场景和各类图层： -```typescript -import { Scene, PolygonLayer } from '@antv/l7'; - -(async function() { - // 获取数据 - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ); - const data = await response.json(); - - // 创建场景 - const scene = new Scene({ - center: [110.19382669582967, 50.258134], - id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token - }); - - // 创建图层 - const layer = new PolygonLayer({}); - layer - .source(data) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .style({ - opacity: 0.8, - }); - - // 添加图层到场景中 - scene.addLayer(layer); - - // 渲染场景 - scene.render(); -})(); -``` - - -L7 目前的文档都通过这种方式使用，可以参考项目中的 stories： -* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx) -* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx) - - -## [WIP] React - -React 组件待开发，目前可以暂时以 Submodule 方式使用： -```tsx -import { Scene, PolygonLayer} from '@antv/l7'; -import * as React from 'react'; - -export default class AMap extends React.Component { - private scene: Scene; - - public componentWillUnmount() { - this.scene.destroy(); - } - - public async componentDidMount() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ); - const scene = new Scene({ - center: [110.19382669582967, 50.258134], - id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token - }); - const layer = new PolygonLayer({}); - - layer - .source(await response.json()) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .style({ - opacity: 0.8, - }); - scene.addLayer(layer); - scene.render(); - this.scene = scene; - } - - public render() { - return ( -
- ); - } -} -``` - -⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。 - diff --git a/docs/tutorial/data.en.md b/docs/tutorial/data.en.md index f6ddefc5df..2660d4ba5d 100644 --- a/docs/tutorial/data.en.md +++ b/docs/tutorial/data.en.md @@ -1,5 +1,5 @@ --- -title: data +title: Data order: 1 --- diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md new file mode 100644 index 0000000000..c4b5a3b738 --- /dev/null +++ b/docs/tutorial/map/amap.en.md @@ -0,0 +1,158 @@ +--- +title: AMap BaseMap +order: 0 +--- + +## 使用高德地图 + +### 注册账号并申请Key + +1. 首先，[注册开发者账号](https://lbs.amap.com/dev/id/choose)，成为高德开放平台开发者 + +2. 登陆之后，在进入「应用管理」 页面「创建新应用」 + +3. 为应用[添加 Key](https://lbs.amap.com/dev/key/app)，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 + +### 引入 L7 + +2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token + +```html + +``` + +### 添加div 标签指定地图容器 + +同时需要为Div设置 高度和宽度 + +``` html +
+```` + +### 初始化 L7 Scene + + +``` javascript + const scene = new L7.Scene({ + id: 'map', + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + type:'amap', + token: '高德地图token' + + }); + +``` + +这样我们就完成了通过L7 实例化高德地图 + + +### 添加可视化图层 + +- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 +- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 + +``` javascript + +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new L7.PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('cylinder') + .size('t', function(level) { + return [ 1, 2, level * 2 + 20 ]; + }) + .color('t', [ + '#094D4A', + '#146968', + '#1D7F7E', + '#289899', + '#34B6B7', + '#4AC5AF', + '#5FD3A6', + '#7BE39E', + '#A1EDB8', + '#CEF8D6' + ]) + .style({ + opacity: 1.0 + }); + scene.addLayer(pointLayer); + }); + + ``` + + ### 完整demo代码 + +```html + + + + + 创建地图场景 + + + +
+ + + + +``` diff --git a/docs/tutorial/map/amap.zh.md b/docs/tutorial/map/amap.zh.md new file mode 100644 index 0000000000..b9272fa92e --- /dev/null +++ b/docs/tutorial/map/amap.zh.md @@ -0,0 +1,158 @@ +--- +title: 高德地图 +order: 0 +--- + +## 使用高德地图 + +### 注册账号并申请Key + +1. 首先，[注册开发者账号](https://lbs.amap.com/dev/id/choose)，成为高德开放平台开发者 + +2. 登陆之后，在进入「应用管理」 页面「创建新应用」 + +3. 为应用[添加 Key](https://lbs.amap.com/dev/key/app)，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 + +### 引入 L7 + +2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token + +```html + +``` + +### 添加div 标签指定地图容器 + +同时需要为Div设置 高度和宽度 + +``` html +
+```` + +### 初始化 L7 Scene + + +``` javascript + const scene = new L7.Scene({ + id: 'map', + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + type:'amap', + token: '高德地图token' + + }); + +``` + +这样我们就完成了通过L7 实例化高德地图 + + +### 添加可视化图层 + +- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 +- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 + +``` javascript + +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new L7.PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('cylinder') + .size('t', function(level) { + return [ 1, 2, level * 2 + 20 ]; + }) + .color('t', [ + '#094D4A', + '#146968', + '#1D7F7E', + '#289899', + '#34B6B7', + '#4AC5AF', + '#5FD3A6', + '#7BE39E', + '#A1EDB8', + '#CEF8D6' + ]) + .style({ + opacity: 1.0 + }); + scene.addLayer(pointLayer); + }); + + ``` + + ### 完整demo代码 + +```html + + + + + 创建地图场景 + + + +
+ + + + +``` diff --git a/docs/tutorial/map/mapbox.en.md b/docs/tutorial/map/mapbox.en.md new file mode 100644 index 0000000000..f3fcb92e00 --- /dev/null +++ b/docs/tutorial/map/mapbox.en.md @@ -0,0 +1,169 @@ +--- +title: MapBox BaseMap +order: 0 +--- + +## 使用Mapbox 地图 + +1、注册MapBox token + + 注册地址 [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) + +2、引入mapbox.gl JS 和 css + +使用mapbox 需要单独引入 mapbox + +```html + + + +``` + + +### 引入 L7 + + +```html + +``` + + +#### 添加div 标签指定地图容器 + +同时需要为Div设置 高度和宽度 + +``` html +
+```` + +### 初始化 L7 Scene + + +``` javascript + const scene = new L7.Scene({ + id: 'map', + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + type:'mapbox', + token: 'mapbox token' + + }); + +``` + +这样我们就完成了通过L7 实例化mapbox地图 + + +### 添加可视化图层 + + +- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 +- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 + +``` javascript + +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new L7.PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('cylinder') + .size('t', function(level) { + return [ 1, 2, level * 2 + 20 ]; + }) + .color('t', [ + '#094D4A', + '#146968', + '#1D7F7E', + '#289899', + '#34B6B7', + '#4AC5AF', + '#5FD3A6', + '#7BE39E', + '#A1EDB8', + '#CEF8D6' + ]) + .style({ + opacity: 1.0 + }); + scene.addLayer(pointLayer); + }); + + ``` + + +### 完整demo 代码 + +```html + + + + + 创建地图场景 + + + +
+ + + + + +``` + + + diff --git a/docs/tutorial/map/mapbox.zh.md b/docs/tutorial/map/mapbox.zh.md new file mode 100644 index 0000000000..1c9fb10f0c --- /dev/null +++ b/docs/tutorial/map/mapbox.zh.md @@ -0,0 +1,167 @@ +--- +title: MapBox地图 +order: 0 +--- + +## 使用Mapbox 地图 + +1、注册MapBox token + + 注册地址 [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) + +2、引入mapbox.gl JS 和 css + +使用mapbox 需要单独引入 mapbox + +```html + + + +``` + + +### 引入 L7 + + +```html + +``` + + +#### 添加div 标签指定地图容器 + +同时需要为Div设置 高度和宽度 + +``` html +
+```` + +### 初始化 L7 Scene + + +``` javascript + const scene = new L7.Scene({ + id: 'map', + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + type:'mapbox', + token: 'mapbox token' + + }); + +``` + +这样我们就完成了通过L7 实例化mapbox地图 + + +### 添加可视化图层 + + + +``` javascript + +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new L7.PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('cylinder') + .size('t', function(level) { + return [ 1, 2, level * 2 + 20 ]; + }) + .color('t', [ + '#094D4A', + '#146968', + '#1D7F7E', + '#289899', + '#34B6B7', + '#4AC5AF', + '#5FD3A6', + '#7BE39E', + '#A1EDB8', + '#CEF8D6' + ]) + .style({ + opacity: 1.0 + }); + scene.addLayer(pointLayer); + }); + + ``` + + +### 完整demo 代码 + +```html + + + + + 创建地图场景 + + + +
+ + + + + +``` + + + diff --git a/docs/tutorial/quickstart.en.md b/docs/tutorial/quickstart.en.md index 8d828ef727..7a054b2e52 100644 --- a/docs/tutorial/quickstart.en.md +++ b/docs/tutorial/quickstart.en.md @@ -1,9 +1,10 @@ --- -title: QuickStart +title: 快速上手 order: 0 redirect_from: - - /en/docs/tutorial + - /zh/docs/tutorial --- + # 使用方法 L7 提供三种使用方式：CDN、Submodule。 @@ -36,9 +37,10 @@ L7 提供三种使用方式：CDN、Submodule。 首先通过 `npm/yarn` ```bash -npm install --save @antv/l7 -yarn add npm install --save @antv/l7 +npm install --save @antv/l7@beta + +yarn add --save @antv/l7@beta ``` diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index 5aadbc295a..7a054b2e52 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -37,9 +37,10 @@ L7 提供三种使用方式：CDN、Submodule。 首先通过 `npm/yarn` ```bash -npm install --save @antv/l7 -yarn add npm install --save @antv/l7 +npm install --save @antv/l7@beta + +yarn add --save @antv/l7@beta ``` diff --git a/gatsby-config.js b/gatsby-config.js index 4119f91ac9..1ebbee1e5b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -48,7 +48,7 @@ module.exports = { order: 0 }, { - slug: '/tutorial', + slug: 'tutorial', title: { zh: '快速入门', en: 'QuickStart' @@ -56,12 +56,12 @@ module.exports = { order: 0 }, { - slug: '/tutorial/map', + slug: 'tutorial/map', title: { zh: '地图', - en: 'MAP' + en: 'Map' }, - order: 0 + order: 3 }, { slug: 'api/scene', diff --git a/packages/l7/package.json b/packages/l7/package.json index c038a214f8..452dc8ac78 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.0.0-beta.7", + "version": "2.0.0-beta.9", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "dist/l7.js", "sideEffects": true, @@ -23,10 +23,8 @@ "publishConfig": { "access": "public" }, - "dependencies": { - "@l7/core": "0.0.1", - "@l7/scene": "0.0.1", - "@l7/layers": "0.0.1", - "@l7/component": "0.0.1" + "peerDependencies": { + "mapbox-gl": "^1.5.0" + } } diff --git a/packages/l7/package_bak.json b/packages/l7/package_bak.json new file mode 100644 index 0000000000..7eb4d32924 --- /dev/null +++ b/packages/l7/package_bak.json @@ -0,0 +1,32 @@ +{ + "name": "@antv/l7", + "version": "2.0.0-beta.8", + "description": "A Large-scale WebGL-powered Geospatial Data Visualization", + "main": "dist/l7.js", + "sideEffects": true, + "files": [ + "dist", + "lib", + "es", + "README.md" + ], + "scripts": { + "tsc": "tsc --project tsconfig.build.json", + "clean": "rimraf dist; rimraf es; rimraf lib;", + "build": "run-p build:*", + "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", + "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", + "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments" + }, + "author": "antv", + "license": "MIT", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@l7/core": "0.0.1", + "@l7/scene": "0.0.1", + "@l7/layers": "0.0.1", + "@l7/component": "0.0.1" + } +} diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts index 6a21383594..2df2568a7e 100644 --- a/packages/l7/src/index.ts +++ b/packages/l7/src/index.ts @@ -1,7 +1,8 @@ -export * from '@l7/core'; -// @ts-ignore -export * from '@l7/scene'; -// @ts-ignore -export * from '@l7/layers'; -// @ts-ignore -export * from '@l7/component'; + +// export * from '@l7/core'; +// // @ts-ignore +// export * from '@l7/scene'; +// // @ts-ignore +// export * from '@l7/layers'; +// // @ts-ignore +// export * from '@l7/component';