zoukankan      html  css  js  c++  java
  • 【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)
  • 相关阅读:
    探究操作系统的内存分配(malloc)对齐策略
    三十一个实用的小常识
    防止网页后退
    郁闷的一天
    脑袋不行
    家的开张
    猴子定律
    赴微软onsite!谁有C++/HTML/JavaScript开发工程师推荐?
    卡马克的求平方根函数代码的陷阱
    动作游戏自定义技能探讨
  • 原文地址:https://www.cnblogs.com/MaShuai666/p/12497324.html
Copyright © 2011-2022 走看看