refactor(l7 lib): update libs

This commit is contained in:
thinkinggis 2019-11-21 17:52:18 +08:00
parent 6124e414ec
commit 882e50b140
60 changed files with 150 additions and 233 deletions

View File

@ -19,7 +19,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
### Installation
```
npm install @antv/l7
npm install @antv/l7@beta
```

View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers'
import { Scene,ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,5 @@
---
title: quickStart
title: QuickStart
order: 0
redirect_from:
- /en/docs/tutorial

View File

@ -1,15 +1,40 @@
---
title: Scene
title: 场景 Scene
order: 1
---
## 简介
`Scene `基础的地图类,提供地图创建,图层创建,管理等功能
# 简介
## Scene
L7 地理可视化 地图图层组件以及可视化所需要的资源如图片字体通过Scene统一管理
## Map
L7 地理可视化侧重于地理数据的可视化表达地图层需要依赖第三方地图第三方地图通过Scene 统一创建,创建管理
只需要通过Scene传入地图配置项即可。
目前L7 支持两种地图底图
- 高德地图 国内业务场景 合规中国地图
- MapBox 国际业务,或者内网离线部署场景
### map
可以通过scene map 属性获取 map实例
```javascript
const map = scene.map
```
为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一因此一些地图的操作方法可以通过scene调用这样切换不同底图时保证表现一致。
示例代码
```javascript
import {Scene} from '@l7/scene';
import {Scene} from '@antv/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
@ -21,75 +46,15 @@ const scene =new L7.Scene({
### 构造函数
**Scene**<br />支持两种实例化方式
- 独立实例化 内部根据id自动穿件地图实例
- 传入地图实例
**Scene**
#### 独立实例化 Scene
```javascript
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark',
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
```
#### 根据map 实例创建Sence
_L7 基于高德地图3D模式开发的因此传入Map实例 __viewModes需要设置成3d_<br />_
```javascript
var mapinstance = new AMap.Map('map',{
center: [ 120.19382669582967, 30.258134 ],
viewMode: '3D',
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
const scene = new L7.Scene({
mapStyle: 'dark',
map:mapinstance
});
```
## map
L7 在scene 下保留了高德地图实例可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 构造类
### PointLayer
新建点图层
### PolylineLayer
新建线图层
### PolygonLayer
新建面图层
### ImageLayer
新建图片图层
## 配置项
### 地图配置项
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
@ -103,10 +68,23 @@ scene.map
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
### style
设置地图的显示样式,目前支持两种地图样式:<br />第一种:自定义地图样式,如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式;<br />第二种:官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
简化地图样式设置L7 内置了三种主题默认样式 高德mapbox 都可以使用
- dark
- light
- normal
除了内置的样式,你也可以传入自定义的其他属性。
比如高德地图
```javascript
{
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
}
```
### minZoom
@ -227,21 +205,6 @@ scene.setPitch(pitch)
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转rotateEnable、是否可双击放大地图、是否可以通过键盘控制地图旋转keyboardEnable  
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
@ -259,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
参数 `layer` {Layer}
### getLayers
 获取所有的layer

View File

@ -21,11 +21,20 @@ L7 地理可视化 地图,图层,组件,以及可视化所需要的资源
- MapBox 国际业务,或者内网离线部署场景
### map
可以通过scene map 属性获取 map实例
```javascript
const map = scene.map
```
为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一因此一些地图的操作方法可以通过scene调用这样切换不同底图时保证表现一致。
示例代码
```javascript
import {Scene} from '@l7/scene';
import {Scene} from '@antv/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
@ -42,15 +51,6 @@ const scene =new L7.Scene({
## map
L7 在scene 下保留了高德地图实例可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 配置项
### 地图配置项
@ -68,16 +68,23 @@ scene.map
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
### style
简化地图样式设置L7 内置了三种主题默认样式
简化地图样式设置L7 内置了三种主题默认样式 高德mapbox 都可以使用
- dark
- light
- normal
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
除了内置的样式,你也可以传入自定义的其他属性。
设置地图的显示样式,目前支持两种地图样式:<br />第一种:自定义地图样式,如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式;<br />第二种:官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
比如高德地图
```javascript
{
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
}
```
### minZoom
@ -198,21 +205,6 @@ scene.setPitch(pitch)
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转rotateEnable、是否可双击放大地图、是否可以通过键盘控制地图旋转keyboardEnable  
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
@ -230,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
参数 `layer` {Layer}
### getLayers
 获取所有的layer

View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],

View File

@ -1,6 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 35.210526315789465,

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 64.88,

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 53.6305,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 26.842105263157915,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from './node_modules/@l7/scene';
import { LineLayer } from './node_modules/@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,8 +1,7 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],
center: [ 103.83735, 1.3602538 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 116.3956, 39.9392 ],

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 116.3956, 39.9392 ],

View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const scene = new Scene({
id: 'map',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const scene = new Scene({
id: 'map',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const CSS = `.l7-marker .g2-guide-html {

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 66.02383,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 48.62562,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',
@ -8,7 +7,6 @@ const scene = new Scene({
pitch: 0,
zoom: 4
});
scene.on('loaded', () => {
addMarkers();
});

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 64.88,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers';
import { Scene, PolygonLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers';
import { Scene, ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,
@ -19,6 +18,7 @@ layer.source(
}
}
);
scene.on('loaded', () => {
scene.addLayer(layer);
});
scene.addLayer(layer);
// scene.on('loaded', () => {
// scene.addLayer(layer);
// });

View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers';
import { Scene, ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,
@ -19,6 +18,5 @@ layer.source(
}
}
);
scene.on('loaded', () => {
scene.addLayer(layer);
});
scene.addLayer(layer);

View File

@ -6,4 +6,5 @@ window.scene = require('./packages/scene/src');
window.layers = require('./packages/layers/src');
window.component = require('./packages/component/src');
window.g2 = require('@antv/g2');
window.l7 = require("@antv/l7");
//

View File

@ -7,6 +7,7 @@
"devDependencies": {
"@antv/g2": "^3.5.9",
"@antv/gatsby-theme-antv": "^0.9.52",
"@antv/l7": "2.0.0-beta.4",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",

View File

@ -33,6 +33,16 @@ const IndexPage = () => {
description: t('支持海量数据2D、3D动态可交互高性能渲染'),
},
];
const companies = [
{ name: '阿里云', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ' },
{ name: '支付宝', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ', },
{ name: '天猫', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ', },
{ name: '淘宝网', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', },
{ name: '网商银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', },
{ name: '盒马',img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ePJMQZCb8vkAAAAAAAAAAABkARQnAQ', },
{ name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ', },
{ name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ', },
];
const bannerButtons = [
{
text: t('图表示例'),
@ -95,6 +105,7 @@ const IndexPage = () => {
notifications={notifications}
className="banner"
githubStarLink="https://github.com/antvis/L7/stargazers"
/>
<Features features={features} style={{ width: '100%' }} />
<Cases cases={cases} />