openlayers放大缩小

前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法。
     本人不是专业GIS开发,只是记录,方便后续查找。

参考资料:
openlayers官网:https://openlayers.org/
geojson下载网站:https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站:https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心:Map对象、View视图、Layer图层、Source来源、Feature特征等

// 地图缩小
zoomOut () {
  // 使用map对象获取view视图,然后设置View视图的放大,缩小参数即可
  const view = this.map.getView()
  const zoom = view.getZoom()
  view.setZoom(zoom - 1)
},
// 地图放大
zoomIn () {
  const view = this.map.getView()
  const zoom = view.getZoom()
  view.setZoom(zoom + 1)
}

在这里插入图片描述
注:加载天地图获取map对象,请参考本人该系列博客第一篇

Logo

前往低代码交流专区

更多推荐