p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #99 from antvis/dev-map 

docs(api): update setMapStyle API fix:#98
This commit is contained in:
@thinkinggis 2019-11-28 14:51:57 +08:00 committed by GitHub
parent 74c8ef2b60 d35056da52
commit e8ca88675b
6 changed files with 96 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/api/component/control.zh.md
View File

@ -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

14
docs/api/component/marker.en.md
View File

@ -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 `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
- color        `string ` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认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);
```

25
docs/api/scene.en.md
View File

@ -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()
设置地图中心点坐标

25
docs/api/scene.zh.md
View File

@ -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()
设置地图中心点坐标

157
docs/tutorial/quickstart.en.md
View File

@ -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()` 手动销毁场景。

159
docs/tutorial/quickstart.zh.md
View File

@ -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()` 手动销毁场景。