mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
10a8af1cb1
|
|
@ -77,3 +77,4 @@ yarn.lock
|
||||||
package-lock.json
|
package-lock.json
|
||||||
git_log.sh
|
git_log.sh
|
||||||
node_modules/
|
node_modules/
|
||||||
|
packages/l7/package_bak.json
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
---
|
|
||||||
title: Data
|
|
||||||
order: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
## 数据
|
|
||||||
|
|
||||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
|
||||||
|
|
||||||
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />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数据
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
---
|
|
||||||
title: 数据
|
|
||||||
order: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
## 数据
|
|
||||||
|
|
||||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
|
||||||
|
|
||||||
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />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/)
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
---
|
|
||||||
title: QuickStart
|
|
||||||
order: 0
|
|
||||||
redirect_from:
|
|
||||||
- /en/docs/manual
|
|
||||||
---
|
|
||||||
# 使用方法
|
|
||||||
|
|
||||||
L7 提供三种使用方式：CDN、Submodule。
|
|
||||||
|
|
||||||
## 通过 CDN 使用
|
|
||||||
|
|
||||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
|
||||||
```html
|
|
||||||
<head>
|
|
||||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
|
||||||
</head>
|
|
||||||
```
|
|
||||||
|
|
||||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
|
||||||
```html
|
|
||||||
<head>
|
|
||||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
|
||||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
|
||||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
|
||||||
</head>
|
|
||||||
```
|
|
||||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
|
||||||
|
|
||||||
然后在 `<body>` 中定义一个容器并设置一个 `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 (
|
|
||||||
<div
|
|
||||||
id="map"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
|
||||||
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
---
|
|
||||||
title: 快速上手
|
|
||||||
order: 0
|
|
||||||
redirect_from:
|
|
||||||
- /zh/docs/manual
|
|
||||||
---
|
|
||||||
|
|
||||||
# 使用方法
|
|
||||||
|
|
||||||
L7 提供三种使用方式：CDN、Submodule。
|
|
||||||
|
|
||||||
## 通过 CDN 使用
|
|
||||||
|
|
||||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
|
||||||
```html
|
|
||||||
<head>
|
|
||||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
|
||||||
</head>
|
|
||||||
```
|
|
||||||
|
|
||||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
|
||||||
```html
|
|
||||||
<head>
|
|
||||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
|
||||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
|
||||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
|
||||||
</head>
|
|
||||||
```
|
|
||||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
|
||||||
|
|
||||||
然后在 `<body>` 中定义一个容器并设置一个 `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 (
|
|
||||||
<div
|
|
||||||
id="map"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 添加div 标签指定地图容器
|
||||||
|
|
||||||
|
同时需要为Div设置 高度和宽度
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<div id="map"></div>
|
||||||
|
````
|
||||||
|
|
||||||
|
### 初始化 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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>创建地图场景</title>
|
||||||
|
<style>
|
||||||
|
html,body{overflow:hidden;margin:0;}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const scene = new L7.Scene({
|
||||||
|
id: 'map',
|
||||||
|
mapStyle: 'dark', // 样式URL
|
||||||
|
center: [120.19382669582967, 30.258134],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 12,
|
||||||
|
type:'amap',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
@ -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
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 添加div 标签指定地图容器
|
||||||
|
|
||||||
|
同时需要为Div设置 高度和宽度
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<div id="map"></div>
|
||||||
|
````
|
||||||
|
|
||||||
|
### 初始化 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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>创建地图场景</title>
|
||||||
|
<style>
|
||||||
|
html,body{overflow:hidden;margin:0;}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const scene = new L7.Scene({
|
||||||
|
id: 'map',
|
||||||
|
mapStyle: 'dark', // 样式URL
|
||||||
|
center: [120.19382669582967, 30.258134],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 12,
|
||||||
|
type:'amap',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
@ -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
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 引入 L7
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
#### 添加div 标签指定地图容器
|
||||||
|
|
||||||
|
同时需要为Div设置 高度和宽度
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<div id="map"></div>
|
||||||
|
````
|
||||||
|
|
||||||
|
### 初始化 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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>创建地图场景</title>
|
||||||
|
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
<script>
|
||||||
|
const scene = new L7.Scene({
|
||||||
|
id: 'map',
|
||||||
|
mapStyle: 'dark', // 样式URL
|
||||||
|
center: [120.19382669582967, 30.258134],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 12,
|
||||||
|
type:'amap',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 引入 L7
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
#### 添加div 标签指定地图容器
|
||||||
|
|
||||||
|
同时需要为Div设置 高度和宽度
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<div id="map"></div>
|
||||||
|
````
|
||||||
|
|
||||||
|
### 初始化 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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>创建地图场景</title>
|
||||||
|
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||||
|
<script>
|
||||||
|
const scene = new L7.Scene({
|
||||||
|
id: 'map',
|
||||||
|
mapStyle: 'dark', // 样式URL
|
||||||
|
center: [120.19382669582967, 30.258134],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 12,
|
||||||
|
type:'amap',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
---
|
---
|
||||||
title: QuickStart
|
title: 快速上手
|
||||||
order: 0
|
order: 0
|
||||||
redirect_from:
|
redirect_from:
|
||||||
- /en/docs/tutorial
|
- /zh/docs/tutorial
|
||||||
---
|
---
|
||||||
|
|
||||||
# 使用方法
|
# 使用方法
|
||||||
|
|
||||||
L7 提供三种使用方式：CDN、Submodule。
|
L7 提供三种使用方式：CDN、Submodule。
|
||||||
|
|
@ -36,9 +37,10 @@ L7 提供三种使用方式：CDN、Submodule。
|
||||||
|
|
||||||
首先通过 `npm/yarn`
|
首先通过 `npm/yarn`
|
||||||
```bash
|
```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
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,9 +37,10 @@ L7 提供三种使用方式：CDN、Submodule。
|
||||||
|
|
||||||
首先通过 `npm/yarn`
|
首先通过 `npm/yarn`
|
||||||
```bash
|
```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
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ module.exports = {
|
||||||
order: 0
|
order: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: '/tutorial',
|
slug: 'tutorial',
|
||||||
title: {
|
title: {
|
||||||
zh: '快速入门',
|
zh: '快速入门',
|
||||||
en: 'QuickStart'
|
en: 'QuickStart'
|
||||||
|
|
@ -56,12 +56,12 @@ module.exports = {
|
||||||
order: 0
|
order: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: '/tutorial/map',
|
slug: 'tutorial/map',
|
||||||
title: {
|
title: {
|
||||||
zh: '地图',
|
zh: '地图',
|
||||||
en: 'MAP'
|
en: 'Map'
|
||||||
},
|
},
|
||||||
order: 0
|
order: 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/scene',
|
slug: 'api/scene',
|
||||||
|
|
@ -156,7 +156,10 @@ module.exports = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
playground: {
|
playground: {
|
||||||
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>'
|
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
|
||||||
|
dependencies: {
|
||||||
|
'@antv/l7': 'beta'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,9 @@ module.exports = {
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
||||||
modulePathIgnorePatterns: [ 'dist' ],
|
modulePathIgnorePatterns: [ 'dist', 'packages/renderer' ], // TODO: 暂时关闭render test
|
||||||
moduleNameMapper: {
|
moduleNameMapper: {
|
||||||
'@antv/l7-(.+)$': '<rootDir>packages/$1/src',
|
'@antv/l7-(.+)$': '<rootDir>packages/$1/src'
|
||||||
},
|
},
|
||||||
notify: true,
|
notify: true,
|
||||||
notifyMode: 'always',
|
notifyMode: 'always',
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antv/g2": "^3.5.9",
|
"@antv/g2": "^3.5.9",
|
||||||
"@antv/gatsby-theme-antv": "^0.9.92",
|
"@antv/gatsby-theme-antv": "0.10.1",
|
||||||
"@babel/cli": "^7.6.4",
|
"@babel/cli": "^7.6.4",
|
||||||
"@babel/core": "^7.6.4",
|
"@babel/core": "^7.6.4",
|
||||||
"@babel/plugin-proposal-decorators": "^7.6.0",
|
"@babel/plugin-proposal-decorators": "^7.6.0",
|
||||||
|
|
@ -143,6 +143,7 @@
|
||||||
"tsc": "tsc",
|
"tsc": "tsc",
|
||||||
"watch": "yarn clean && lerna exec --parallel 'BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
|
"watch": "yarn clean && lerna exec --parallel 'BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
|
||||||
"bundle": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
|
"bundle": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
|
||||||
|
"bundle:watch": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch",
|
||||||
"glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
|
"glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
|
||||||
"clean": "lerna run clean"
|
"clean": "lerna run clean"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -158,7 +158,6 @@ export default class Scene extends EventEmitter implements ISceneService {
|
||||||
|
|
||||||
this.logger.debug(`scene ${this.id} renderer loaded`);
|
this.logger.debug(`scene ${this.id} renderer loaded`);
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO：init worker, fontAtlas...
|
// TODO：init worker, fontAtlas...
|
||||||
|
|
||||||
// 执行异步并行初始化任务
|
// 执行异步并行初始化任务
|
||||||
|
|
@ -183,11 +182,13 @@ export default class Scene extends EventEmitter implements ISceneService {
|
||||||
// 首次初始化，或者地图的容器被强制销毁的需要重新初始化
|
// 首次初始化，或者地图的容器被强制销毁的需要重新初始化
|
||||||
if (!this.inited) {
|
if (!this.inited) {
|
||||||
// 还未初始化完成需要等待
|
// 还未初始化完成需要等待
|
||||||
|
|
||||||
await this.initPromise;
|
await this.initPromise;
|
||||||
// FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
|
// FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
|
||||||
this.map.addMarkerContainer();
|
this.map.addMarkerContainer();
|
||||||
this.inited = true;
|
this.logger.info(' render inited');
|
||||||
this.emit('loaded');
|
this.emit('loaded');
|
||||||
|
this.inited = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 尝试初始化未初始化的图层
|
// 尝试初始化未初始化的图层
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
|
const docStyle = window.document.documentElement.style;
|
||||||
|
type ELType = HTMLElement | SVGElement;
|
||||||
let containerCounter = 0;
|
let containerCounter = 0;
|
||||||
|
export function createRendererContainer(
|
||||||
export function createRendererContainer(domId: string): HTMLDivElement | null {
|
domId: string | HTMLDivElement,
|
||||||
const $wrapper = document.getElementById(domId);
|
): HTMLDivElement | null {
|
||||||
|
let $wrapper = domId as HTMLDivElement;
|
||||||
|
if (typeof domId === 'string') {
|
||||||
|
$wrapper = document.getElementById(domId) as HTMLDivElement;
|
||||||
|
}
|
||||||
if ($wrapper) {
|
if ($wrapper) {
|
||||||
const $container = document.createElement('div');
|
const $container = document.createElement('div');
|
||||||
$container.style.cssText += `
|
$container.style.cssText += `
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
lib
|
lib
|
||||||
es
|
es
|
||||||
dist
|
dist
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
precision mediump float;
|
|
||||||
attribute vec4 a_Color;
|
attribute vec4 a_Color;
|
||||||
attribute vec3 a_Position;
|
attribute vec3 a_Position;
|
||||||
attribute vec4 a_Instance;
|
attribute vec4 a_Instance;
|
||||||
|
|
|
||||||
|
|
@ -205,14 +205,15 @@ export default class AMapService implements IMapService {
|
||||||
token = AMAP_API_KEY,
|
token = AMAP_API_KEY,
|
||||||
...rest
|
...rest
|
||||||
} = mapConfig;
|
} = mapConfig;
|
||||||
|
// 高德地图创建独立的container；
|
||||||
|
|
||||||
this.$mapContainer = document.getElementById(id);
|
// @ts-ignore
|
||||||
|
this.$mapContainer = this.creatAmapContainer(id);
|
||||||
// tslint:disable-next-line:typedef
|
// tslint:disable-next-line:typedef
|
||||||
await new Promise((resolve) => {
|
await new Promise((resolve) => {
|
||||||
const resolveMap = () => {
|
const resolveMap = () => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.map = new AMap.Map(id, {
|
this.map = new AMap.Map(this.$mapContainer, {
|
||||||
mapStyle: this.getMapStyle(style),
|
mapStyle: this.getMapStyle(style),
|
||||||
zooms: [minZoom, maxZoom],
|
zooms: [minZoom, maxZoom],
|
||||||
viewMode: '3D',
|
viewMode: '3D',
|
||||||
|
|
@ -327,4 +328,21 @@ export default class AMapService implements IMapService {
|
||||||
private getMapStyle(name: string) {
|
private getMapStyle(name: string) {
|
||||||
return MapTheme[name] ? MapTheme[name] : name;
|
return MapTheme[name] ? MapTheme[name] : name;
|
||||||
}
|
}
|
||||||
|
private creatAmapContainer(id: string | HTMLDivElement) {
|
||||||
|
let $wrapper = id as HTMLDivElement;
|
||||||
|
if (typeof id === 'string') {
|
||||||
|
$wrapper = document.getElementById(id) as HTMLDivElement;
|
||||||
|
}
|
||||||
|
const $amapdiv = document.createElement('div');
|
||||||
|
$amapdiv.style.cssText += `
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index:2;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
$amapdiv.id = 'l7_amap_div';
|
||||||
|
$wrapper.appendChild($amapdiv);
|
||||||
|
return $amapdiv;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue