From 0042d7555c495a7231df65164e6371f1790c94da Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 28 Nov 2019 13:37:42 +0800 Subject: [PATCH] docs(api): update setMapStyle API fix:#98 --- README.md | 4 +- docs/api/component/control.zh.md | 8 +- docs/api/component/marker.en.md | 14 ++- docs/api/scene.en.md | 25 +++++ docs/api/scene.zh.md | 52 ++++++++-- docs/tutorial/quickstart.en.md | 157 +++--------------------------- docs/tutorial/quickstart.zh.md | 159 ++++--------------------------- 7 files changed, 119 insertions(+), 300 deletions(-) diff --git a/README.md b/README.md index 4a91e89ba8..3d65767421 100644 --- a/README.md +++ b/README.md @@ -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 ![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ) -## ✨ Highlight features of L7 2.0 +## 🌟 Highlight features of L7 2.0 🌏 Data-driven Visualization 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..1bbbb1c249 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() 设置地图中心点坐标 @@ -181,7 +206,9 @@ scene.setCenter([lng,lat]) scene.setZoomAndCenter(zoom,center) ``` -参数：zoom {number}
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) ``` -参数：
`x` {number} 水平方向移动像素 向右为正方向
      `y` {number} 垂直方向移动像素 向下为正方向 +参数： + +- `x` {number} 水平方向移动像素 向右为正方向 + +- `y` {number} 垂直方向移动像素 向下为正方向 ### setPitch @@ -226,11 +259,16 @@ scene.panBy(x,y) scene.setPitch(pitch) ``` -参数 :
   `pitch` {number} +参数 : +-  `pitch` {number} ### fitBounds -地图缩放到某个范围内
参数 :
  `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 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()` 手动销毁场景。 -