mirror of https://gitee.com/antv-l7/antv-l7
fix: tslint error
This commit is contained in:
thinkinggis
commit
e27d96bc0c
|
|
@ -5,7 +5,6 @@ redirect_from:
|
|||
- /en/docs/api
|
||||
---
|
||||
|
||||
|
||||
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
|
@ -17,13 +16,12 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
|
@ -34,34 +32,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D 柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义 Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
- 3D 填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
|
|
@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
|
|
@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ redirect_from:
|
|||
|
||||
2.0.beta 版本目前有些功能还未完善，
|
||||
|
||||
⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
|
|
@ -24,7 +24,6 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
|
@ -35,34 +34,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D 柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义 Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
- 3D 填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
|
|
@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
|
|
@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
||||
### 技术支持服务群
|
||||
|
||||
L7 相关技术问题，需求反馈，我们会及时响应
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ title: 1.x stable
|
|||
order: 1
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
|
|
@ -19,9 +17,10 @@ order: 1
|
|||
|
||||
### npm 安装使用
|
||||
|
||||
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
|
||||
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -31,9 +30,6 @@ npm install @antv/l7
|
|||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ title: 1.x 稳定版
|
|||
order: 1
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
|
|
@ -19,9 +17,10 @@ order: 1
|
|||
|
||||
### npm 安装使用
|
||||
|
||||
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
|
||||
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -31,6 +30,4 @@ npm install @antv/l7
|
|||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ order: 2
|
|||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。
|
||||
L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入Map
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
|
||||
|
|
@ -21,20 +21,18 @@ L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管
|
|||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
```javascript
|
||||
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4,
|
||||
token:'xxxx - token'
|
||||
})
|
||||
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
|
@ -55,53 +53,45 @@ const scene = new Scene({
|
|||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的Map实例是同个容器。
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的API
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
#### 传入Mapbox 地图实例
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ order: 2
|
|||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。=
|
||||
L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入Map
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
|
||||
|
|
@ -21,20 +21,18 @@ L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管
|
|||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
```javascript
|
||||
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4,
|
||||
token:'xxxx - token'
|
||||
})
|
||||
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
|
@ -55,53 +53,45 @@ const scene = new Scene({
|
|||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的Map实例是同个容器。
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的API
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
#### 传入Mapbox 地图实例
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
|
|
@ -25,75 +25,73 @@ const scene = new L7.Scene({
|
|||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
|
||||
只需要通过Scene传入地图配置项即可。
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
|
||||
只需要通过 Scene 传入地图配置项即可。
|
||||
|
||||
目前L7 支持两种地图底图
|
||||
目前 L7 支持两种地图底图
|
||||
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
### map
|
||||
|
||||
### map
|
||||
|
||||
可以通过scene map 属性获取 map实例
|
||||
可以通过 scene map 属性获取 map 实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
|
||||
const map = scene.map;
|
||||
```
|
||||
为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
示例代码
|
||||
|
||||
```javascript
|
||||
const scene =new L7.Scene({
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 构造函数
|
||||
|
||||
**Scene**
|
||||
|
||||
|
||||
|
||||
**Scene**
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
||||
### zoom
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
### center
|
||||
|
||||
地图初始中心经纬度 {Lnglat}
|
||||
|
||||
### pitch
|
||||
|
||||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### style
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
|
||||
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
|
|
@ -103,62 +101,69 @@ const scene =new L7.Scene({
|
|||
比如高德地图
|
||||
|
||||
```javascript
|
||||
{
|
||||
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
|
||||
}
|
||||
|
||||
{
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### minZoom
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
### maxZoom
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
### rotateEnable
|
||||
|
||||
地图是否可旋转 {Boolean} default true
|
||||
|
||||
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### getZoom
|
||||
|
||||
获取当前缩放等级
|
||||
|
||||
```javascript
|
||||
scene.getZoom();
|
||||
```
|
||||
|
||||
return {float} 当前缩放等级
|
||||
return {float} 当前缩放等级
|
||||
|
||||
### getLayers()
|
||||
|
||||
获取所有的地图图层
|
||||
|
||||
```javascript
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
### getCenter()
|
||||
|
||||
获取地图中心点
|
||||
|
||||
```javascript
|
||||
scene.getCenter()
|
||||
scene.getCenter();
|
||||
```
|
||||
|
||||
return {Lnglat} :地图中心点
|
||||
|
||||
### getSize()
|
||||
|
||||
获取地图容器大小
|
||||
|
||||
```javascript
|
||||
scene.getSize()
|
||||
scene.getSize();
|
||||
```
|
||||
|
||||
return { Object } 地图容器的 width,height
|
||||
|
||||
### getPitch()
|
||||
|
||||
获取地图俯仰角
|
||||
|
||||
```javascript
|
||||
scene.getPitch();
|
||||
```
|
||||
|
|
@ -167,9 +172,9 @@ return {number} pitch
|
|||
|
||||
### setMapStyle
|
||||
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
|
||||
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||
L7 内置了三种地图样式，AMAP 和 MapBox 都适用
|
||||
|
||||
- light
|
||||
- dark
|
||||
|
|
@ -183,150 +188,163 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
|
|||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle(
|
||||
'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
|
||||
);
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
|
||||
设置地图中心点坐标
|
||||
|
||||
```javascript
|
||||
scene.setCenter([lng,lat])
|
||||
scene.setCenter([lng, lat]);
|
||||
```
|
||||
|
||||
参数：`center` {LngLat} 地图中心点
|
||||
|
||||
参数：`center` {LngLat} 地图中心点
|
||||
|
||||
### setZoomAndCenter
|
||||
|
||||
设置地图等级和中心
|
||||
|
||||
```javascript
|
||||
scene.setZoomAndCenter(zoom,center)
|
||||
scene.setZoomAndCenter(zoom, center);
|
||||
```
|
||||
|
||||
参数：zoom {number}<br />center {LngLat}
|
||||
|
||||
|
||||
### setRotation
|
||||
|
||||
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
|
||||
|
||||
```javascript
|
||||
scene.setRotation(rotation)
|
||||
scene.setRotation(rotation);
|
||||
```
|
||||
|
||||
参数： `rotation` {number}
|
||||
参数： `rotation` {number}
|
||||
|
||||
### zoomIn
|
||||
|
||||
地图放大一级
|
||||
|
||||
```javascript
|
||||
scene.zoomIn()
|
||||
scene.zoomIn();
|
||||
```
|
||||
|
||||
### zoomOut
|
||||
|
||||
地图缩小一级
|
||||
|
||||
```javascript
|
||||
scene.ZoomOUt()
|
||||
scene.ZoomOUt();
|
||||
```
|
||||
|
||||
### panTo
|
||||
|
||||
地图平移到指定的位置
|
||||
|
||||
```javascript
|
||||
scene.panTo(LngLat)
|
||||
scene.panTo(LngLat);
|
||||
```
|
||||
|
||||
参数：`center` LngLat 中心位置坐标
|
||||
参数：`center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
以像素为单位沿X方向和Y方向移动地图
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
```
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
以像素为单位沿 X 方向和 Y 方向移动地图
|
||||
|
||||
```javascript
|
||||
scene.panBy(x, y);
|
||||
```
|
||||
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
### setPitch
|
||||
|
||||
设置地图仰俯角度
|
||||
|
||||
```javascript
|
||||
scene.setPitch(pitch)
|
||||
scene.setPitch(pitch);
|
||||
```
|
||||
|
||||
参数 :<br /> `pitch` {number}
|
||||
|
||||
参数 :<br /> `pitch` {number}
|
||||
|
||||
### fitBounds
|
||||
|
||||
地图缩放到某个范围内<br />参数 :<br /> `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112,32,114,35]);
|
||||
scene.fitBounds([112, 32, 114, 35]);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### removeLayer
|
||||
移除layer
|
||||
|
||||
移除 layer
|
||||
|
||||
```javascript
|
||||
scene.removeLayer(layer)
|
||||
scene.removeLayer(layer);
|
||||
```
|
||||
|
||||
参数 `layer` {Layer}
|
||||
参数 `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
||||
获取所有的 layer
|
||||
|
||||
```javascript
|
||||
scene.getLayers()
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return layers {array}
|
||||
return layers {array}
|
||||
|
||||
## 事件
|
||||
|
||||
|
||||
### on
|
||||
|
||||
事件监听
|
||||
|
||||
#### 参数
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
### off
|
||||
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
### 地图事件
|
||||
```javascript
|
||||
scene.on('loaded',()=>{}) //地图加载完成触发
|
||||
scene.on('mapmove',()=>{}) // 地图平移时触发事件
|
||||
scene.on('movestart',()=>{}) // 地图平移开始时触发
|
||||
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
|
||||
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
|
||||
scene.on('zoomstart',()=>{}) // 缩放开始时触发
|
||||
scene.on('zoomend',()=>{}) // 缩放停止时触发
|
||||
```
|
||||
|
||||
```javascript
|
||||
scene.on('loaded', () => {}); //地图加载完成触发
|
||||
scene.on('mapmove', () => {}); // 地图平移时触发事件
|
||||
scene.on('movestart', () => {}); // 地图平移开始时触发
|
||||
scene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
|
||||
scene.on('zoomchange', () => {}); // 地图缩放级别更改后触发
|
||||
scene.on('zoomstart', () => {}); // 缩放开始时触发
|
||||
scene.on('zoomend', () => {}); // 缩放停止时触发
|
||||
```
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
```javascript
|
||||
scene.on('click', (ev)=>{}); // 鼠标左键点击事件
|
||||
scene.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
|
||||
scene.on('mousemove', (ev)=>{}); // 鼠标在地图上移动时触发
|
||||
scene.on('mousewheel', (ev)=>{}); // 鼠标滚轮开始缩放地图时触发
|
||||
scene.on('mouseover', (ev)=>{}); // 鼠标移入地图容器内时触发
|
||||
scene.on('mouseout', (ev)=>{}); // 鼠标移出地图容器时触发
|
||||
scene.on('mouseup', (ev)=>{}); // 鼠标在地图上单击抬起时触发
|
||||
scene.on('mousedown', (ev)=>{}); // 鼠标在地图上单击按下时触发
|
||||
scene.on('rightclick', (ev)=>{}); // 鼠标右键单击事件
|
||||
scene.on('dragstart', (ev)=>{}); //开始拖拽地图时触发
|
||||
scene.on('dragging', (ev)=>{}); // 拖拽地图过程中触发
|
||||
scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
|
||||
scene.on('click', (ev) => {}); // 鼠标左键点击事件
|
||||
scene.on('dblclick', (ev) => {}); // 鼠标左键双击事件
|
||||
scene.on('mousemove', (ev) => {}); // 鼠标在地图上移动时触发
|
||||
scene.on('mousewheel', (ev) => {}); // 鼠标滚轮开始缩放地图时触发
|
||||
scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
|
||||
scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
|
||||
scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
|
||||
scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
|
||||
scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
|
||||
scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
|
||||
scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
|
||||
scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
|
||||
```
|
||||
|
||||
### 其它事件
|
||||
|
||||
```javascript
|
||||
scene.on('resize',()=>{}) // 地图容器大小改变事件
|
||||
scene.on('resize', () => {}); // 地图容器大小改变事件
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
|
|
@ -25,75 +25,73 @@ const scene = new L7.Scene({
|
|||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
|
||||
只需要通过Scene传入地图配置项即可。
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
|
||||
只需要通过 Scene 传入地图配置项即可。
|
||||
|
||||
目前L7 支持两种地图底图
|
||||
目前 L7 支持两种地图底图
|
||||
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
### map
|
||||
|
||||
### map
|
||||
|
||||
可以通过scene map 属性获取 map实例
|
||||
可以通过 scene map 属性获取 map 实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
|
||||
const map = scene.map;
|
||||
```
|
||||
为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
示例代码
|
||||
|
||||
```javascript
|
||||
const scene =new L7.Scene({
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 构造函数
|
||||
|
||||
**Scene**
|
||||
|
||||
|
||||
|
||||
**Scene**
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
||||
### zoom
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
### center
|
||||
|
||||
地图初始中心经纬度 {Lnglat}
|
||||
|
||||
### pitch
|
||||
|
||||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### style
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
|
||||
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
|
|
@ -104,62 +102,69 @@ const scene =new L7.Scene({
|
|||
比如高德地图
|
||||
|
||||
```javascript
|
||||
{
|
||||
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
|
||||
}
|
||||
|
||||
{
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### minZoom
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
### maxZoom
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
### rotateEnable
|
||||
|
||||
地图是否可旋转 {Boolean} default true
|
||||
|
||||
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### getZoom
|
||||
|
||||
获取当前缩放等级
|
||||
|
||||
```javascript
|
||||
scene.getZoom();
|
||||
```
|
||||
|
||||
return {float} 当前缩放等级
|
||||
return {float} 当前缩放等级
|
||||
|
||||
### getLayers()
|
||||
|
||||
获取所有的地图图层
|
||||
|
||||
```javascript
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
### getCenter()
|
||||
|
||||
获取地图中心点
|
||||
|
||||
```javascript
|
||||
scene.getCenter()
|
||||
scene.getCenter();
|
||||
```
|
||||
|
||||
return {Lnglat} :地图中心点
|
||||
|
||||
### getSize()
|
||||
|
||||
获取地图容器大小
|
||||
|
||||
```javascript
|
||||
scene.getSize()
|
||||
scene.getSize();
|
||||
```
|
||||
|
||||
return { Object } 地图容器的 width,height
|
||||
|
||||
### getPitch()
|
||||
|
||||
获取地图俯仰角
|
||||
|
||||
```javascript
|
||||
scene.getPitch();
|
||||
```
|
||||
|
|
@ -168,9 +173,9 @@ return {number} pitch
|
|||
|
||||
### setMapStyle
|
||||
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
|
||||
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||
L7 内置了三种地图样式，AMAP 和 MapBox 都适用
|
||||
|
||||
- light
|
||||
- dark
|
||||
|
|
@ -184,94 +189,113 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
|
|||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle(
|
||||
'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
|
||||
);
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
|
||||
设置地图中心点坐标
|
||||
|
||||
```javascript
|
||||
scene.setCenter([lng,lat])
|
||||
scene.setCenter([lng, lat]);
|
||||
```
|
||||
|
||||
参数：`center` {LngLat} 地图中心点
|
||||
参数：`center` {LngLat} 地图中心点
|
||||
|
||||
### setZoom()
|
||||
|
||||
设置地图缩放等级
|
||||
|
||||
参数：`zoom` 地图缩放等级
|
||||
|
||||
```
|
||||
scene.setZoom(zoom)
|
||||
```
|
||||
|
||||
### setZoomAndCenter
|
||||
|
||||
设置地图等级和中心
|
||||
|
||||
```javascript
|
||||
scene.setZoomAndCenter(zoom,center)
|
||||
scene.setZoomAndCenter(zoom, center);
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- zoom {number}
|
||||
- center {LngLat}
|
||||
|
||||
|
||||
### setRotation
|
||||
|
||||
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
|
||||
|
||||
```javascript
|
||||
scene.setRotation(rotation)
|
||||
scene.setRotation(rotation);
|
||||
```
|
||||
|
||||
参数： `rotation` {number}
|
||||
参数： `rotation` {number}
|
||||
|
||||
### zoomIn
|
||||
|
||||
地图放大一级
|
||||
|
||||
```javascript
|
||||
scene.zoomIn()
|
||||
scene.zoomIn();
|
||||
```
|
||||
|
||||
### zoomOut
|
||||
|
||||
地图缩小一级
|
||||
|
||||
```javascript
|
||||
scene.ZoomOUt()
|
||||
scene.ZoomOUt();
|
||||
```
|
||||
|
||||
### panTo
|
||||
|
||||
地图平移到指定的位置
|
||||
|
||||
```javascript
|
||||
scene.panTo(LngLat)
|
||||
scene.panTo(LngLat);
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- `center` LngLat 中心位置坐标
|
||||
- `center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
以像素为单位沿X方向和Y方向移动地图
|
||||
|
||||
以像素为单位沿 X 方向和 Y 方向移动地图
|
||||
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
scene.panBy(x, y);
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- `x` {number} 水平方向移动像素 向右为正方向
|
||||
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
### setPitch
|
||||
|
||||
设置地图仰俯角度
|
||||
|
||||
```javascript
|
||||
scene.setPitch(pitch)
|
||||
scene.setPitch(pitch);
|
||||
```
|
||||
|
||||
参数 :
|
||||
- `pitch` {number}
|
||||
|
||||
- `pitch` {number}
|
||||
|
||||
### fitBounds
|
||||
|
||||
地图缩放到某个范围内
|
||||
|
||||
参数 :
|
||||
|
|
@ -279,77 +303,76 @@ scene.setPitch(pitch)
|
|||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112,32,114,35]);
|
||||
scene.fitBounds([112, 32, 114, 35]);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### removeLayer
|
||||
移除layer
|
||||
|
||||
移除 layer
|
||||
|
||||
```javascript
|
||||
scene.removeLayer(layer)
|
||||
scene.removeLayer(layer);
|
||||
```
|
||||
|
||||
参数
|
||||
参数
|
||||
|
||||
- `layer` {Layer}
|
||||
- `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
||||
获取所有的 layer
|
||||
|
||||
```javascript
|
||||
scene.getLayers()
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return layers {array}
|
||||
return layers {array}
|
||||
|
||||
## 事件
|
||||
|
||||
|
||||
### on
|
||||
|
||||
事件监听
|
||||
|
||||
#### 参数
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
### off
|
||||
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
### 地图事件
|
||||
```javascript
|
||||
scene.on('loaded',()=>{}) //地图加载完成触发
|
||||
scene.on('mapmove',()=>{}) // 地图平移时触发事件
|
||||
scene.on('movestart',()=>{}) // 地图平移开始时触发
|
||||
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
|
||||
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
|
||||
scene.on('zoomstart',()=>{}) // 缩放开始时触发
|
||||
scene.on('zoomend',()=>{}) // 缩放停止时触发
|
||||
```
|
||||
|
||||
```javascript
|
||||
scene.on('loaded', () => {}); //地图加载完成触发
|
||||
scene.on('mapmove', () => {}); // 地图平移时触发事件
|
||||
scene.on('movestart', () => {}); // 地图平移开始时触发
|
||||
scene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
|
||||
scene.on('zoomchange', () => {}); // 地图缩放级别更改后触发
|
||||
scene.on('zoomstart', () => {}); // 缩放开始时触发
|
||||
scene.on('zoomend', () => {}); // 缩放停止时触发
|
||||
```
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
```javascript
|
||||
scene.on('click', (ev)=>{}); // 鼠标左键点击事件
|
||||
scene.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
|
||||
scene.on('mousemove', (ev)=>{}); // 鼠标在地图上移动时触发
|
||||
scene.on('mousewheel', (ev)=>{}); // 鼠标滚轮开始缩放地图时触发
|
||||
scene.on('mouseover', (ev)=>{}); // 鼠标移入地图容器内时触发
|
||||
scene.on('mouseout', (ev)=>{}); // 鼠标移出地图容器时触发
|
||||
scene.on('mouseup', (ev)=>{}); // 鼠标在地图上单击抬起时触发
|
||||
scene.on('mousedown', (ev)=>{}); // 鼠标在地图上单击按下时触发
|
||||
scene.on('rightclick', (ev)=>{}); // 鼠标右键单击事件
|
||||
scene.on('dragstart', (ev)=>{}); //开始拖拽地图时触发
|
||||
scene.on('dragging', (ev)=>{}); // 拖拽地图过程中触发
|
||||
scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
|
||||
scene.on('click', (ev) => {}); // 鼠标左键点击事件
|
||||
scene.on('dblclick', (ev) => {}); // 鼠标左键双击事件
|
||||
scene.on('mousemove', (ev) => {}); // 鼠标在地图上移动时触发
|
||||
scene.on('mousewheel', (ev) => {}); // 鼠标滚轮开始缩放地图时触发
|
||||
scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
|
||||
scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
|
||||
scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
|
||||
scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
|
||||
scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
|
||||
scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
|
||||
scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
|
||||
scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
|
||||
```
|
||||
|
||||
### 其它事件
|
||||
|
||||
```javascript
|
||||
scene.on('resize',()=>{}) // 地图容器大小改变事件
|
||||
scene.on('resize', () => {}); // 地图容器大小改变事件
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
"site:clean": "gatsby clean",
|
||||
"site:deploy": "yarn run site:build && gh-pages -d public",
|
||||
"site:publish": "gh-pages -d public",
|
||||
"lint:fix": "prettier --write docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx *.md",
|
||||
"lint:fix": "prettier --write docs/api/**/*.md docs/api/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx *.md",
|
||||
"lint:examples": "eslint examples/**/**/*.js --fix",
|
||||
"prebuild": "run-p tsc lint",
|
||||
"build": "yarn clean && lerna run build",
|
||||
|
|
|
|||
Loading…
Reference in New Issue