【10】openlayers 视图view

创建地图:

//View对象代表地图的简单2D视图
//创建view
let view = new ol.View({
    center:[109,34],//视图的初始中心
    maxZoom:18,//最大缩放级别 ,默认为28
    minZoom:3,//最小缩放级别,默认为0
    projection:'EPSG:4326',//坐标格式,默认为'EPSG:3857'
    rotation:(Math.PI/180)*0,//视图的初始旋转(弧度)(顺时针正旋转,0表示北)
    zoom:8,//初始视图级别
    extent:[107,34,108,36],//限制视图的范围[minLon,minLat,maxLon,maxLat]
})

//创建地图
var map = new ol.Map({
    view:view,
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    //控件初始默认不显示
    controls:ol.control.defaults({
        attribution: false,
        zoom: false
    }).extend([])
});

动画:

//飞行类型
let Easing = {
    easeIn:ol.easing.easeIn,//开始缓慢并加快速度
    easeOut:ol.easing.easeOut,//快速启动,然后慢下来
    inAndOut:ol.easing.inAndOut,//从慢开始,加快速度,然后再次慢下来
    linear:ol.easing.linear,//随时间保持恒定的速度
    upAndDown:ol.easing.upAndDown,//从慢开始,加快速度,最后再减速
}
view.animate({
    center:[100,34],//动画结束时视图的中心
    zoom:10,//动画结束时视图的缩放级别
    rotation:0,//动画结束时视图的旋转
    duration:3000,//动画的持续时间(以毫秒为单位)
    easing:Easing.inAndOut,//动画类型,默认为inAndOut
})
//取消正在进行的动画 
view.cancelAnimations();
//确定视图是否处于动画状态,返回布尔值
view.getAnimating();

view 常用方法:

//获取-设置,视图中心
view.getCenter()
view.setCenter([100,40])
//获取-设置,视图的最大缩放级别
view.getMaxZoom()
view.setMaxZoom(16)
//获取-设置,视图的最小缩放级别
view.getMinZoom()
view.setMinZoom(6)
//获取-设置,视图旋转角度
view.getRotation()/(Math.PI/180)
view.setRotation((Math.PI/180)*60)
//获取-设置,当前缩放级别
view.getZoom()
view.setZoom(13)
//获取视图投影
view.getProjection()

//绑定事件-取消事件 type事件类型,listener函数体
view.on(type,listener)
view.un(type,listener)

 

posted @ 2020-03-15 14:03  悟道_ms  阅读(797)  评论(0编辑  收藏  举报