mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
thinkinggis
commit
760c55268c
|
|
@ -31,7 +31,6 @@ const scene = new L7.Scene({
|
|||
});
|
||||
```
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
|
||||
|
|
@ -42,15 +41,14 @@ const scene = new L7.Scene({
|
|||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
|
||||
### map
|
||||
|
||||
可以通过 scene map 属性获取 map 实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
|
||||
const map = scene.map;
|
||||
```
|
||||
|
||||
为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
示例代码
|
||||
|
|
@ -63,37 +61,37 @@ const scene =new L7.Scene({
|
|||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 构造函数
|
||||
|
||||
**Scene**
|
||||
|
||||
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
||||
### zoom
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
### center
|
||||
|
||||
地图初始中心经纬度 {Lnglat}
|
||||
|
||||
### pitch
|
||||
|
||||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### style
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
|
||||
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
|
|
@ -104,27 +102,26 @@ const scene =new L7.Scene({
|
|||
|
||||
```javascript
|
||||
{
|
||||
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
### minZoom
|
||||
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
### maxZoom
|
||||
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
### rotateEnable
|
||||
|
||||
地图是否可旋转 {Boolean} default true
|
||||
|
||||
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### getZoom
|
||||
|
||||
获取当前缩放等级
|
||||
|
||||
```javascript
|
||||
|
|
@ -134,31 +131,39 @@ scene.getZoom();
|
|||
return {float} 当前缩放等级
|
||||
|
||||
### getLayers()
|
||||
|
||||
获取所有的地图图层
|
||||
|
||||
```javascript
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
|
||||
### getCenter()
|
||||
|
||||
获取地图中心点
|
||||
|
||||
```javascript
|
||||
scene.getCenter()
|
||||
scene.getCenter();
|
||||
```
|
||||
|
||||
return {Lnglat} :地图中心点
|
||||
|
||||
### getSize()
|
||||
|
||||
获取地图容器大小
|
||||
|
||||
```javascript
|
||||
scene.getSize()
|
||||
scene.getSize();
|
||||
```
|
||||
|
||||
return { Object } 地图容器的 width,height
|
||||
|
||||
### getPitch()
|
||||
|
||||
获取地图俯仰角
|
||||
|
||||
```javascript
|
||||
scene.getPitch();
|
||||
```
|
||||
|
|
@ -183,129 +188,133 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
|
|||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
|
||||
scene.setMapStyle(
|
||||
'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
|
||||
);
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
|
||||
设置地图中心点坐标
|
||||
|
||||
```javascript
|
||||
scene.setCenter([lng,lat])
|
||||
scene.setCenter([lng, lat]);
|
||||
```
|
||||
|
||||
参数：`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}
|
||||
|
||||
### zoomIn
|
||||
|
||||
地图放大一级
|
||||
|
||||
```javascript
|
||||
scene.zoomIn()
|
||||
scene.zoomIn();
|
||||
```
|
||||
|
||||
### zoomOut
|
||||
|
||||
地图缩小一级
|
||||
|
||||
```javascript
|
||||
scene.ZoomOUt()
|
||||
scene.ZoomOUt();
|
||||
```
|
||||
|
||||
### panTo
|
||||
|
||||
地图平移到指定的位置
|
||||
|
||||
```javascript
|
||||
scene.panTo(LngLat)
|
||||
scene.panTo(LngLat);
|
||||
```
|
||||
|
||||
参数：`center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
|
||||
以像素为单位沿 X 方向和 Y 方向移动地图
|
||||
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
scene.panBy(x, y);
|
||||
```
|
||||
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
|
||||
### setPitch
|
||||
|
||||
设置地图仰俯角度
|
||||
|
||||
```javascript
|
||||
scene.setPitch(pitch)
|
||||
scene.setPitch(pitch);
|
||||
```
|
||||
|
||||
参数 :<br /> `pitch` {number}
|
||||
|
||||
|
||||
### fitBounds
|
||||
|
||||
地图缩放到某个范围内<br />参数 :<br /> `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112, 32, 114, 35]);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### removeLayer
|
||||
|
||||
移除 layer
|
||||
|
||||
```javascript
|
||||
scene.removeLayer(layer)
|
||||
scene.removeLayer(layer);
|
||||
```
|
||||
|
||||
参数 `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
||||
```javascript
|
||||
scene.getLayers()
|
||||
```
|
||||
|
||||
return layers {array}
|
||||
|
||||
## 事件
|
||||
|
||||
|
||||
### on
|
||||
|
||||
事件监听
|
||||
|
||||
#### 参数
|
||||
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
|
||||
### off
|
||||
|
||||
移除事件监听<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', () => {}); // 缩放停止时触发
|
||||
```
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
|
|
@ -325,8 +334,7 @@ scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图
|
|||
```
|
||||
|
||||
### 其它事件
|
||||
|
||||
```javascript
|
||||
scene.on('resize',()=>{}) // 地图容器大小改变事件
|
||||
scene.on('resize', () => {}); // 地图容器大小改变事件
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ const scene = new L7.Scene({
|
|||
});
|
||||
```
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
|
||||
|
|
@ -42,15 +41,14 @@ const scene = new L7.Scene({
|
|||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
|
||||
### map
|
||||
|
||||
可以通过 scene map 属性获取 map 实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
|
||||
const map = scene.map;
|
||||
```
|
||||
|
||||
为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
示例代码
|
||||
|
|
@ -63,37 +61,37 @@ const scene =new L7.Scene({
|
|||
center: [110.770672, 34.159869],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 构造函数
|
||||
|
||||
**Scene**
|
||||
|
||||
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
||||
### zoom
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
||||
### center
|
||||
|
||||
地图初始中心经纬度 {Lnglat}
|
||||
|
||||
### pitch
|
||||
|
||||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### style
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
|
||||
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
|
|
@ -104,27 +102,26 @@ const scene =new L7.Scene({
|
|||
|
||||
```javascript
|
||||
{
|
||||
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
### minZoom
|
||||
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
|
||||
### maxZoom
|
||||
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
|
||||
### rotateEnable
|
||||
|
||||
地图是否可旋转 {Boolean} default true
|
||||
|
||||
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### getZoom
|
||||
|
||||
获取当前缩放等级
|
||||
|
||||
```javascript
|
||||
|
|
@ -134,31 +131,39 @@ scene.getZoom();
|
|||
return {float} 当前缩放等级
|
||||
|
||||
### getLayers()
|
||||
|
||||
获取所有的地图图层
|
||||
|
||||
```javascript
|
||||
scene.getLayers();
|
||||
```
|
||||
|
||||
return 图层数组 {Array}
|
||||
|
||||
|
||||
### getCenter()
|
||||
|
||||
获取地图中心点
|
||||
|
||||
```javascript
|
||||
scene.getCenter()
|
||||
scene.getCenter();
|
||||
```
|
||||
|
||||
return {Lnglat} :地图中心点
|
||||
|
||||
### getSize()
|
||||
|
||||
获取地图容器大小
|
||||
|
||||
```javascript
|
||||
scene.getSize()
|
||||
scene.getSize();
|
||||
```
|
||||
|
||||
return { Object } 地图容器的 width,height
|
||||
|
||||
### getPitch()
|
||||
|
||||
获取地图俯仰角
|
||||
|
||||
```javascript
|
||||
scene.getPitch();
|
||||
```
|
||||
|
|
@ -183,58 +188,69 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
|
|||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
|
||||
scene.setMapStyle(
|
||||
'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
|
||||
);
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
|
||||
设置地图中心点坐标
|
||||
|
||||
```javascript
|
||||
scene.setCenter([lng,lat])
|
||||
scene.setCenter([lng, lat]);
|
||||
```
|
||||
|
||||
参数：`center` {LngLat} 地图中心点
|
||||
|
||||
|
||||
### 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}
|
||||
|
||||
### zoomIn
|
||||
|
||||
地图放大一级
|
||||
|
||||
```javascript
|
||||
scene.zoomIn()
|
||||
scene.zoomIn();
|
||||
```
|
||||
|
||||
### zoomOut
|
||||
|
||||
地图缩小一级
|
||||
|
||||
```javascript
|
||||
scene.ZoomOUt()
|
||||
scene.ZoomOUt();
|
||||
```
|
||||
|
||||
### panTo
|
||||
|
||||
地图平移到指定的位置
|
||||
|
||||
```javascript
|
||||
scene.panTo(LngLat)
|
||||
scene.panTo(LngLat);
|
||||
```
|
||||
|
||||
参数：
|
||||
|
|
@ -242,28 +258,33 @@ scene.panTo(LngLat)
|
|||
- `center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
|
||||
以像素为单位沿 X 方向和 Y 方向移动地图
|
||||
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
scene.panBy(x, y);
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- `x` {number} 水平方向移动像素 向右为正方向
|
||||
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
|
||||
### setPitch
|
||||
|
||||
设置地图仰俯角度
|
||||
|
||||
```javascript
|
||||
scene.setPitch(pitch)
|
||||
scene.setPitch(pitch);
|
||||
```
|
||||
|
||||
参数 :
|
||||
- `pitch` {number}
|
||||
|
||||
- `pitch` {number}
|
||||
|
||||
### fitBounds
|
||||
|
||||
地图缩放到某个范围内
|
||||
|
||||
参数 :
|
||||
|
|
@ -274,53 +295,43 @@ scene.setPitch(pitch)
|
|||
scene.fitBounds([112, 32, 114, 35]);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### removeLayer
|
||||
|
||||
移除 layer
|
||||
|
||||
```javascript
|
||||
scene.removeLayer(layer)
|
||||
scene.removeLayer(layer);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
- `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
||||
```javascript
|
||||
scene.getLayers()
|
||||
```
|
||||
|
||||
return layers {array}
|
||||
|
||||
## 事件
|
||||
|
||||
|
||||
### on
|
||||
|
||||
事件监听
|
||||
|
||||
#### 参数
|
||||
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
|
||||
|
||||
### off
|
||||
|
||||
移除事件监听<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', () => {}); // 缩放停止时触发
|
||||
```
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
|
|
@ -340,8 +351,7 @@ scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图
|
|||
```
|
||||
|
||||
### 其它事件
|
||||
|
||||
```javascript
|
||||
scene.on('resize',()=>{}) // 地图容器大小改变事件
|
||||
scene.on('resize', () => {}); // 地图容器大小改变事件
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Image
|
|||
order: 4
|
||||
---
|
||||
|
||||
Image 数据主要用于在地图根据经纬度范围添加图图片，不如一幅纸制地图扫描版你要放在地图显示。
|
||||
Image 数据主要用于在地图根据经纬度范围添加图图片，比如一幅纸制地图扫描版你要放在地图显示。
|
||||
|
||||
## parser
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue