mirror of https://gitee.com/antv-l7/antv-l7
docs(api): update setMapStyle API fix:#98
This commit is contained in:
thinkinggis
parent
557c623a58
commit
5918543dc0
|
|
@ -11,12 +11,12 @@ Powered by WebGL, the rendering technology of L7 supports fast and efficient ren
|
||||||
L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services
|
L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services
|
||||||
|
|
||||||
|
|
||||||
## l7 visualization demos
|
## 🌄 l7 visualization demos
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ Highlight features of L7 2.0
|
## 🌟 Highlight features of L7 2.0
|
||||||
|
|
||||||
|
|
||||||
🌏 Data-driven Visualization
|
🌏 Data-driven Visualization
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
title: Control
|
title: Control
|
||||||
order: 3
|
order: 3
|
||||||
---
|
---
|
||||||
# control
|
|
||||||
|
|
||||||
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
|
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
|
||||||
|
|
||||||
|
|
@ -19,7 +18,7 @@ L7 目前支持Control
|
||||||
|
|
||||||
#### option
|
#### option
|
||||||
|
|
||||||
position: `string` 控件位置支持是个方位
|
position: `string` 控件位置支持是个方位
|
||||||
|
|
||||||
- bottomright
|
- bottomright
|
||||||
- topright
|
- topright
|
||||||
|
|
@ -28,7 +27,7 @@ position: `string` 控件位置支持是个方位
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
组件介绍
|
### 组件介绍
|
||||||
|
|
||||||
```
|
```
|
||||||
import { Scale Layers, Zoom } from '@antv/l7';
|
import { Scale Layers, Zoom } from '@antv/l7';
|
||||||
|
|
@ -39,6 +38,7 @@ import { Scale Layers, Zoom } from '@antv/l7';
|
||||||
|
|
||||||
|
|
||||||
#### Zoom
|
#### Zoom
|
||||||
|
|
||||||
放大缩小组件 默认 左上角
|
放大缩小组件 默认 左上角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
@ -64,7 +64,7 @@ import { Scale Layers, Zoom } from '@antv/l7';
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
#### layer
|
#### Layers
|
||||||
图层列表目前支持可视化的图层控制
|
图层列表目前支持可视化的图层控制
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
|
||||||
|
|
@ -7,17 +7,26 @@ Marker 地图标注 目前只支持2D dom标注
|
||||||
|
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
Marker<br />`const Marker = new L7.Marker(option)`
|
Marker
|
||||||
|
|
||||||
|
`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### option
|
#### option
|
||||||
|
|
||||||
- color `string `  设置默认marker的颜色
|
- color `string ` 设置默认marker的颜色
|
||||||
- element `Dom|string` 自定义marker Dom节点，可以是dom实例，也可以是dom id
|
- element `Dom|string` 自定义marker Dom节点，可以是dom实例，也可以是dom id
|
||||||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
||||||
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||||||
|
|
||||||
|
|
||||||
|
### 添加到Scene
|
||||||
|
```javascript
|
||||||
|
scene.addMarker(marker);
|
||||||
|
```
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
#### setLnglat
|
#### setLnglat
|
||||||
|
|
@ -77,7 +86,6 @@ new L7.Marker({
|
||||||
element: el
|
element: el
|
||||||
}).setLnglat(item.coordinates)
|
}).setLnglat(item.coordinates)
|
||||||
.setPopup(popup)
|
.setPopup(popup)
|
||||||
.addTo(scene);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -165,6 +165,31 @@ scene.getPitch();
|
||||||
|
|
||||||
return {number} pitch
|
return {number} pitch
|
||||||
|
|
||||||
|
### setMapStyle
|
||||||
|
|
||||||
|
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||||
|
|
||||||
|
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||||
|
|
||||||
|
- light
|
||||||
|
- dark
|
||||||
|
- normal
|
||||||
|
|
||||||
|
设置地图底图样式的方法
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 快捷名称设置
|
||||||
|
|
||||||
|
scene.setMapStyle('light');
|
||||||
|
|
||||||
|
// mapbox 主题设置
|
||||||
|
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||||
|
|
||||||
|
// AMap
|
||||||
|
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
### setCenter()
|
### setCenter()
|
||||||
设置地图中心点坐标
|
设置地图中心点坐标
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -165,6 +165,31 @@ scene.getPitch();
|
||||||
|
|
||||||
return {number} pitch
|
return {number} pitch
|
||||||
|
|
||||||
|
### setMapStyle
|
||||||
|
|
||||||
|
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||||
|
|
||||||
|
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||||
|
|
||||||
|
- light
|
||||||
|
- dark
|
||||||
|
- normal
|
||||||
|
|
||||||
|
设置地图底图样式的方法
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 快捷名称设置
|
||||||
|
|
||||||
|
scene.setMapStyle('light');
|
||||||
|
|
||||||
|
// mapbox 主题设置
|
||||||
|
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||||
|
|
||||||
|
// AMap
|
||||||
|
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
### setCenter()
|
### setCenter()
|
||||||
设置地图中心点坐标
|
设置地图中心点坐标
|
||||||
|
|
||||||
|
|
@ -181,7 +206,9 @@ scene.setCenter([lng,lat])
|
||||||
scene.setZoomAndCenter(zoom,center)
|
scene.setZoomAndCenter(zoom,center)
|
||||||
```
|
```
|
||||||
|
|
||||||
参数：zoom {number}<br />center {LngLat}
|
参数：
|
||||||
|
- zoom {number}
|
||||||
|
- center {LngLat}
|
||||||
|
|
||||||
|
|
||||||
### setRotation
|
### setRotation
|
||||||
|
|
@ -210,14 +237,20 @@ scene.ZoomOUt()
|
||||||
scene.panTo(LngLat)
|
scene.panTo(LngLat)
|
||||||
```
|
```
|
||||||
|
|
||||||
参数：`center` LngLat 中心位置坐标
|
参数：
|
||||||
|
|
||||||
|
- `center` LngLat 中心位置坐标
|
||||||
|
|
||||||
### panBy
|
### panBy
|
||||||
以像素为单位沿X方向和Y方向移动地图
|
以像素为单位沿X方向和Y方向移动地图
|
||||||
```javascript
|
```javascript
|
||||||
scene.panBy(x,y)
|
scene.panBy(x,y)
|
||||||
```
|
```
|
||||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
参数：
|
||||||
|
|
||||||
|
- `x` {number} 水平方向移动像素 向右为正方向
|
||||||
|
|
||||||
|
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||||
|
|
||||||
|
|
||||||
### setPitch
|
### setPitch
|
||||||
|
|
@ -226,11 +259,16 @@ scene.panBy(x,y)
|
||||||
scene.setPitch(pitch)
|
scene.setPitch(pitch)
|
||||||
```
|
```
|
||||||
|
|
||||||
参数 :<br /> `pitch` {number}
|
参数 :
|
||||||
|
- `pitch` {number}
|
||||||
|
|
||||||
|
|
||||||
### fitBounds
|
### fitBounds
|
||||||
地图缩放到某个范围内<br />参数 :<br /> `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
地图缩放到某个范围内
|
||||||
|
|
||||||
|
参数 :
|
||||||
|
|
||||||
|
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
scene.fitBounds([112,32,114,35]);
|
scene.fitBounds([112,32,114,35]);
|
||||||
|
|
@ -245,7 +283,9 @@ scene.fitBounds([112,32,114,35]);
|
||||||
scene.removeLayer(layer)
|
scene.removeLayer(layer)
|
||||||
```
|
```
|
||||||
|
|
||||||
参数 `layer` {Layer}
|
参数
|
||||||
|
|
||||||
|
- `layer` {Layer}
|
||||||
|
|
||||||
### getLayers
|
### getLayers
|
||||||
获取所有的layer
|
获取所有的layer
|
||||||
|
|
|
||||||
|
|
@ -5,164 +5,37 @@ redirect_from:
|
||||||
- /en/docs/tutorial
|
- /en/docs/tutorial
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## L7
|
||||||
|
|
||||||
|
Current version: 2.0.0-beta.10
|
||||||
|
|
||||||
# 使用方法
|
# 使用方法
|
||||||
|
|
||||||
L7 提供三种使用方式：CDN、Submodule。
|
## 通过 L7 CDN 使用
|
||||||
|
|
||||||
## 通过 CDN 使用
|
Include the L7 JS JavaScript <head> of your HTML file.
|
||||||
|
|
||||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
|
||||||
```html
|
```html
|
||||||
<head>
|
<head>
|
||||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'>
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
```
|
```
|
||||||
|
|
||||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
- [use Gaode Map](../map/amap.en.md)
|
||||||
```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`：
|
- [use Mapbox Map ](../map/mapbox.en.md)
|
||||||
⚠️需要获取高德或者 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`
|
## 通过 Module bundle 使用
|
||||||
|
|
||||||
|
Install the npm package.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
npm install --save @antv/l7@beta
|
npm install --save @antv/l7@beta
|
||||||
|
|
||||||
|
// 或者
|
||||||
yarn add --save @antv/l7@beta
|
yarn add --save @antv/l7@beta
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
然后就可以使用其中包含的场景和各类图层：
|
|
||||||
```typescript
|
|
||||||
import { Scene, PolygonLayer } from '@antv/l7';
|
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
|
||||||
|
|
||||||
(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({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
center: [110.19382669582967, 50.258134],
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
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);
|
|
||||||
})();
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
|
||||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.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 { GaodeMap } from '@antv/l7-maps';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
export default class GaodeMap 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({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
center: [110.19382669582967, 50.258134],
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
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);
|
|
||||||
this.scene = scene;
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id="map"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,164 +5,37 @@ redirect_from:
|
||||||
- /zh/docs/tutorial
|
- /zh/docs/tutorial
|
||||||
---
|
---
|
||||||
|
|
||||||
# 使用方法
|
# L7
|
||||||
|
|
||||||
L7 提供三种使用方式：CDN、Submodule。
|
Current version: 2.0.0-beta.10
|
||||||
|
|
||||||
## 通过 CDN 使用
|
## 使用方法
|
||||||
|
|
||||||
|
### 通过 L7 CDN 使用
|
||||||
|
|
||||||
|
Include the L7 JS JavaScript <head> of your HTML file.
|
||||||
|
|
||||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
|
||||||
```html
|
```html
|
||||||
<head>
|
<head>
|
||||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'>
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
```
|
```
|
||||||
|
|
||||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
- [use Gaode Map](../map/amap.en.md)
|
||||||
```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`：
|
- [use Mapbox Map ](../map/mapbox.en.md)
|
||||||
⚠️需要获取高德或者 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`
|
## 通过 Module bundle 使用
|
||||||
|
|
||||||
|
Install the npm package.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
npm install --save @antv/l7@beta
|
npm install --save @antv/l7@beta
|
||||||
|
|
||||||
|
// 或者
|
||||||
yarn add --save @antv/l7@beta
|
yarn add --save @antv/l7@beta
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
然后就可以使用其中包含的场景和各类图层：
|
|
||||||
```typescript
|
|
||||||
import { Scene, PolygonLayer } from '@antv/l7';
|
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
|
||||||
|
|
||||||
(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({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
center: [110.19382669582967, 50.258134],
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
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);
|
|
||||||
})();
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
|
||||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.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 { GaodeMap } from '@antv/l7-maps';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
export default class GaodeMap 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({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
center: [110.19382669582967, 50.258134],
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
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);
|
|
||||||
this.scene = scene;
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id="map"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue