diff --git a/docs/api/component/control.zh.md b/docs/api/component/control.zh.md index 6f1809a4a4..9d71c6f2ff 100644 --- a/docs/api/component/control.zh.md +++ b/docs/api/component/control.zh.md @@ -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 diff --git a/docs/api/component/marker.en.md b/docs/api/component/marker.en.md index 5adbea840f..9fbab14dcc 100644 --- a/docs/api/component/marker.en.md +++ b/docs/api/component/marker.en.md @@ -7,17 +7,26 @@ Marker 地图标注 目前只支持2D dom标注 ## 构造函数 -Marker
`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); ``` diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index c069eff70b..314e909838 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -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() 设置地图中心点坐标 diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 966cd71f84..757d07b035 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -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() 设置地图中心点坐标 diff --git a/docs/tutorial/quickstart.en.md b/docs/tutorial/quickstart.en.md index 5907fa077d..96a8e1b51a 100644 --- a/docs/tutorial/quickstart.en.md +++ b/docs/tutorial/quickstart.en.md @@ -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 of your HTML file. -首先在 `` 中引入 L7 CDN 版本的 JS 和 CSS 文件： ```html - + ``` -如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)： -```html - - - - - -``` -⚠️高德采用异步加载，因此不需要引入任何额外静态文件。 +- [use Gaode Map](../map/amap.en.md) -然后在 `` 中定义一个容器并设置一个 `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 ( -
- ); - } -} -``` - -⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。 - diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index 1b37860175..5d3aff4689 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -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 of your HTML file. -首先在 `` 中引入 L7 CDN 版本的 JS 和 CSS 文件： ```html - + ``` -如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)： -```html - - - - - -``` -⚠️高德采用异步加载，因此不需要引入任何额外静态文件。 +- [use Gaode Map](../map/amap.en.md) -然后在 `` 中定义一个容器并设置一个 `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 ( -
- ); - } -} -``` - -⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。 -