mirror of https://gitee.com/antv-l7/antv-l7
docs(api): update setMapStyle API fix:#98
This commit is contained in:
thinkinggis
parent
f24a91c505
commit
ea10d6395d
|
|
@ -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 visualization demos
|
||||
## 🌄 l7 visualization demos
|
||||
|
||||
|
||||
|
||||
|
||||
## ✨ Highlight features of L7 2.0
|
||||
## 🌟 Highlight features of L7 2.0
|
||||
|
||||
|
||||
🌏 Data-driven Visualization
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
title: Control
|
||||
order: 3
|
||||
---
|
||||
# control
|
||||
|
||||
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
|
||||
|
||||
|
|
@ -19,7 +18,7 @@ L7 目前支持Control
|
|||
|
||||
#### option
|
||||
|
||||
position: `string` 控件位置支持是个方位
|
||||
position: `string` 控件位置支持是个方位
|
||||
|
||||
- bottomright
|
||||
- topright
|
||||
|
|
@ -28,7 +27,7 @@ position: `string` 控件位置支持是个方位
|
|||
|
||||
|
||||
|
||||
组件介绍
|
||||
### 组件介绍
|
||||
|
||||
```
|
||||
import { Scale Layers, Zoom } from '@antv/l7';
|
||||
|
|
@ -39,6 +38,7 @@ import { Scale Layers, Zoom } from '@antv/l7';
|
|||
|
||||
|
||||
#### Zoom
|
||||
|
||||
放大缩小组件 默认 左上角
|
||||
|
||||
```javascript
|
||||
|
|
@ -64,7 +64,7 @@ import { Scale Layers, Zoom } from '@antv/l7';
|
|||
```
|
||||
|
||||
|
||||
#### layer
|
||||
#### Layers
|
||||
图层列表目前支持可视化的图层控制
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -7,17 +7,26 @@ Marker 地图标注 目前只支持2D dom标注
|
|||
|
||||
|
||||
## 构造函数
|
||||
Marker<br />`const Marker = new L7.Marker(option)`
|
||||
Marker
|
||||
|
||||
`const Marker = new L7.Marker(option)`
|
||||
|
||||
|
||||
|
||||
|
||||
#### option
|
||||
|
||||
- color `string `  设置默认marker的颜色
|
||||
- color `string ` 设置默认marker的颜色
|
||||
- element `Dom|string` 自定义marker Dom节点，可以是dom实例，也可以是dom id
|
||||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
||||
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||||
|
||||
|
||||
### 添加到Scene
|
||||
```javascript
|
||||
scene.addMarker(marker);
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
#### setLnglat
|
||||
|
|
@ -77,7 +86,6 @@ new L7.Marker({
|
|||
element: el
|
||||
}).setLnglat(item.coordinates)
|
||||
.setPopup(popup)
|
||||
.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -165,6 +165,31 @@ scene.getPitch();
|
|||
|
||||
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()
|
||||
设置地图中心点坐标
|
||||
|
||||
|
|
|
|||
|
|
@ -165,6 +165,31 @@ scene.getPitch();
|
|||
|
||||
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()
|
||||
设置地图中心点坐标
|
||||
|
||||
|
|
@ -181,7 +206,9 @@ scene.setCenter([lng,lat])
|
|||
scene.setZoomAndCenter(zoom,center)
|
||||
```
|
||||
|
||||
参数：zoom {number}<br />center {LngLat}
|
||||
参数：
|
||||
- zoom {number}
|
||||
- center {LngLat}
|
||||
|
||||
|
||||
### setRotation
|
||||
|
|
@ -210,14 +237,20 @@ scene.ZoomOUt()
|
|||
scene.panTo(LngLat)
|
||||
```
|
||||
|
||||
参数：`center` LngLat 中心位置坐标
|
||||
参数：
|
||||
|
||||
- `center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
以像素为单位沿X方向和Y方向移动地图
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
```
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
参数：
|
||||
|
||||
- `x` {number} 水平方向移动像素 向右为正方向
|
||||
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
|
||||
### setPitch
|
||||
|
|
@ -226,11 +259,16 @@ scene.panBy(x,y)
|
|||
scene.setPitch(pitch)
|
||||
```
|
||||
|
||||
参数 :<br /> `pitch` {number}
|
||||
参数 :
|
||||
- `pitch` {number}
|
||||
|
||||
|
||||
### fitBounds
|
||||
地图缩放到某个范围内<br />参数 :<br /> `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
地图缩放到某个范围内
|
||||
|
||||
参数 :
|
||||
|
||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112,32,114,35]);
|
||||
|
|
@ -245,7 +283,9 @@ scene.fitBounds([112,32,114,35]);
|
|||
scene.removeLayer(layer)
|
||||
```
|
||||
|
||||
参数 `layer` {Layer}
|
||||
参数
|
||||
|
||||
- `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
|
|
|||
|
|
@ -5,164 +5,37 @@ redirect_from:
|
|||
- /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
|
||||
<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>
|
||||
```
|
||||
|
||||
如果使用 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>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
- [use Gaode Map](../map/amap.en.md)
|
||||
|
||||
然后在 `<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)
|
||||
- [use Mapbox Map ](../map/mapbox.en.md)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
## 通过 Module bundle 使用
|
||||
|
||||
Install the npm package.
|
||||
|
||||
```bash
|
||||
|
||||
npm install --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
|
||||
---
|
||||
|
||||
# 使用方法
|
||||
# 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
|
||||
<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>
|
||||
```
|
||||
|
||||
如果使用 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>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
- [use Gaode Map](../map/amap.en.md)
|
||||
|
||||
然后在 `<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)
|
||||
- [use Mapbox Map ](../map/mapbox.en.md)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
## 通过 Module bundle 使用
|
||||
|
||||
Install the npm package.
|
||||
|
||||
```bash
|
||||
|
||||
npm install --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