6.8 KiB
| title | order |
|---|---|
| Scene | 1 |
简介
Scene 基础的地图类,提供地图创建，图层创建，管理等功能
示例代码
import {Scene} from '@l7/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
center:[ 110.770672, 34.159869 ],
pitch:45
})
构造函数
Scene
支持两种实例化方式
- 独立实例化 内部根据id自动穿件地图实例
- 传入地图实例
独立实例化 Scene
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
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方法。
map 实例方法见高德地图文档
scene.map
构造类
PointLayer
新建点图层
PolylineLayer
新建线图层
PolygonLayer
新建面图层
ImageLayer
新建图片图层
配置项
id
需传入 dom 容器或者容器 id {domObject || string} [必选]
zoom
地图初始显示级别 {number} （0-22）
center
地图初始中心经纬度 {Lnglat}
pitch
地图初始俯仰角度 {number} default 0
mapSyle
地图样式 {style} 目前仅支持高德地图。 default 'dark'
L7 内置三种种默认地图样式 dark | light|blank 空地图
设置地图的显示样式，目前支持两种地图样式：
第一种：自定义地图样式，如"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
可前往地图自定义平台定制自己的个性地图样式；
第二种：官方样式模版,如"amap://styles/grey"。
其他模版样式及自定义地图的使用说明见开发指南
minZoom
地图最小缩放等级 {number} default 0 (0-22)
maxZoom
地图最大缩放等级 {number} default 22 (0-22)
rotateEnable
地图是否可旋转 {Boolean} default true
方法
getZoom
获取当前缩放等级
scene.getZoom();
return {float} 当前缩放等级
getLayers()
获取所有的地图图层
scene.getLayers();
return 图层数组 {Array}
getCenter()
获取地图中心点
scene.getCenter()
return {Lnglat} :地图中心点
getSize()
获取地图容器大小
scene.getSize()
return { Object } 地图容器的 width,height
getPitch()
获取地图俯仰角
scene.getPitch();
return {number} pitch
setCenter()
设置地图中心点坐标
scene.setCenter([lng,lat])
参数：center {LngLat} 地图中心点
setZoomAndCenter
设置地图等级和中心
scene.setZoomAndCenter(zoom,center)
参数：zoom {number}
center {LngLat}
setRotation
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
scene.setRotation(rotation)
参数： rotation {number}
zoomIn
地图放大一级
scene.zoomIn()
zoomOut
地图缩小一级
scene.ZoomOUt()
panTo
地图平移到指定的位置
scene.panTo(LngLat)
参数：center LngLat 中心位置坐标
panBy
以像素为单位沿X方向和Y方向移动地图
scene.panBy(x,y)
参数：x {number} 水平方向移动像素 向右为正方向
y {number} 垂直方向移动像素 向下为正方向
setPitch
设置地图仰俯角度
scene.setPitch(pitch)
参数 :
pitch {number}
setStatus
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
fitBounds
地图缩放到某个范围内
参数 :
extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
scene.fitBounds([112,32,114,35]);
removeLayer
移除layer
scene.removeLayer(layer)
参数layer {Layer}
getLayers
获取所有的layer
scene.getLayers()
return layers {array}
事件
on
事件监听
参数
eventName {string} 事件名hander {function } 事件回调函数
off
移除事件监听eventName {string} 事件名hander {function } 事件回调函数
地图事件
scene.on('loaded',()=>{}) //地图加载完成触发
scene.on('mapmove',()=>{}) // 地图平移时触发事件
scene.on('movestart',()=>{}) // 地图平移开始时触发
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
scene.on('zoomstart',()=>{}) // 缩放开始时触发
scene.on('zoomend',()=>{}) // 缩放停止时触发
鼠标事件
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('resize',()=>{}) // 地图容器大小改变事件