openlayers 6【二】 地图视图 View 详解

Sisimi
1,294 阅读4分钟

1. view 属性

image.png image.png

1.1 view 常见的几个属性
  • center 是一个坐标[x， y]，表示地图视图的中心位置；
  • projection 是地图的投影坐标系统，是地图的投影坐标系统，默认投影为球面墨卡托为（'EPSG：3857'）坐标；
  • zoom 表示地图初始的缩放级别；

2. view 方法

view 类的方法主要是针对 view 的属性的 get 和 set 方法，其基本的方法很多，我们将常用的方法进行归类：

加粗为常用的方法

get类：

  • getCenter 获取视图中心，返回一个地图中心的坐标。

  • getZoom 获取当前的缩放级别。如果视图不限制分辨率，或者正在进行交互或动画，则此方法可能返回非整数缩放级别。

  • getMaxZoom 获取视图的最大缩放级别。

  • getMinZoom 获取视图的最小缩放级别。

  • getAnimating 确定视图是否处于动画状态。

  • getInteracting 确定用户是否正在与视图进行交互，例如平移或缩放。

  • getKeys 获取对象属性名称的列表。

  • getMaxResolution 获取视图的最大分辨率。

  • getMinResolution 获取视图的最低分辨率

  • getProjection 获取地图使用的”投影坐标系统”，如EPSG:4326；

  • getProperties 获取具有所有属性名称和值的对象。

  • getResolution 获取视图分辨率。

  • getResolutionForExtent 获取提供的范围（以地图单位为单位）和大小（以像素为单位）的分辨率。

  • getResolutionForZoom 获取缩放级别的分辨率。

  • getResolutions 获取视图的分辨率。这将返回传递给View的构造函数的分辨率数组，如果未给出则未定义。

  • getRevision 获取此对象的版本号。每次修改对象时，其版本号都会增加。

  • getRotation 获取视图旋转。

  • getZoomForResolution 获取分辨率的缩放级别。 set类：

  • setCenter  设置当前视图的中心。任何范围限制都将适用。

  • setConstrainResolution 设置视图是否应允许中间缩放级别。

  • setZoom 缩放到特定的缩放级别。任何分辨率限制都将适用。

  • setMaxZoom 为视图设置新的最大缩放级别。

  • setMinZoom 为视图设置新的最小缩放级别。

  • setProperties 设置键值对的集合。请注意，这会更改所有现有属性并添加新属性（不会删除任何现有属性）。

  • setResolution 设置此视图的分辨率。任何分辨率约束都将适用。

  • setRotation 设置该视图的旋转角度。任何旋转约束都将适用。 其他类：

  • rotate 接受两个参数，旋转角度数（rotation）和旋转中心（opt_anchor，可选），将地图围绕 opt_anchor 旋转 rotation 角度；

  • ifDef 检查地图的中心和分辨率是否已经设置，都设置返回 true，否则返回 false；

  • fitExtent(extent, size)，接受两个参数：extent 和 size，extent 类型是 ol.Extent – [left, bottom, right, top]，size由map.getSize()获取；该功能类似于 ArcGIS 的缩放到图层功能，将地图的view 缩放到 extent 区域可见的合适尺度；

  • fitGeometry(geometry, size, opt_options)，参数是地理要素，地图尺寸和可选参数；根据给定的地理要素，将 view 缩放到适合地理要素显示的尺寸；

3. view 方法具体示例

/****************************** set类 *******************************************************/
// 调整视图中心 默认投影为球面墨卡托(EPSG:3857)坐标 如 [13070000, 3060000]
map.view.setCenter(fromLonLat([120.15723903726405, 28.40811810432885]))
// 调整视图分辨率为344
map.view.setResolution(344)
// 调整视图旋转 60度
map.view.setRotation(Math.PI / 3)
// 调整视图层级
map.view.setZoom(9)
// 设置view value 添加属性ggg值为444的对象
map.view.set("ggg", 444)
// 移除view value 属性ggg值为444的对象
map.view.unset("ggg")
// 设置view value 添加多个属性值对象
map.view.setProperties({"ggg": 444, 'kkk': 777})

/****************************** get类 *******************************************************/
// 获取view value 下的属性
map.view.getKeys()
// 获取view value 下整个对象
map.view.getProperties()

/************************** animate  类 **************************************************/
// 跳转到某位置添加动画，zoom，center分开写表示先放大层级，在进行设置中心，
// 若 {zoom: 7,center：fromLonLat([125.15723903726405, 28.40811810432885])，duration:2000} 则同时进行
map.view.animate({zoom: 7,duration:2000}, {center: fromLonLat([125.15723903726405, 28.40811810432885]),duration:2000});
// 取消上面跳转到某位置的动画
map.view.cancelAnimations();

/************************** 事件监听  类 **************************************************/
// 监听 change 事件，触发一次
map.view.once("change", this.aa)
// 监听 change 事件，视图放大、缩小、平移都会触发
map.view.on("change", this.aa)
// 移除监听 change
map.view.un("change", this.aa)
// dispatchEvent 侦听此类事件
map.view.on("change", (event) => {
    map.view.dispatchEvent("change") //
    map.view.dispatchEvent({type: "change", event: event}) //返回true 活false
})

4. view 初始化

/**
    * 3857坐标类似于[14268216.554252842, 3627838.3347710525] 
    * 4326坐标类似于[142, 36] 
 */
this.view = new View({
    projection:'EPSG:3857',  // 默认是3857， 可以不写
    center: fromLonLat([120.15723903726405, 28.40811810432885]),  // 
    zoom: 6,
});
avatar
文章
阅读
粉丝