《Openlayers零基础教程》第六课:地图控件

往期推荐:

《Openlayers零基础教程》第一课:课程简介

《Openlayers零基础教程》第二课:GIS的核心概念

《Openlayers零基础教程》第三课:Openlayers的核心概念

《Openlayers零基础教程》第四课:VSCode安装

《Openlayers零基础教程》第五课:初始化地图

本篇教程主要介绍以下地图控件:

●视图跳转控件

●放大缩小控件

●全屏控件

2.实现步骤:

2.1初始化地图

上一篇已经介绍了,这一篇直接跳过该步骤。

2.2视图跳转控件

javascript 复制代码
/* 视图跳转控件 */
const ZoomToExtent = new ol.control.ZoomToExtent({
  extent: [110, 30, 160, 30]
});

map.addControl(ZoomToExtent);

2.3. 放大缩小控件

javascript 复制代码
/* 放大缩小控件 */
const zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);

2.4. 全屏控件

javascript 复制代码
//全屏控件 
const fullScreen = new ol.control.FullScreen(); 
map.addControl(fullScreen) 

代码示例:

javascript 复制代码
/* 视图跳转控件 */ 
const ZoomToExtent = new ol.control.ZoomToExtent({ 
  extent: [110, 30, 160, 30], 
}) 
map.addControl(ZoomToExtent) 
/* 放大缩小控件 */ 
const zoomslider = new ol.control.ZoomSlider(); 
map.addControl(zoomslider) 
//全屏控件 
const fullScreen = new ol.control.FullScreen(); 
map.addControl(fullScreen) 

3. 总结:

通过本篇教程的学习,我们主要实现视图跳转、放大缩小和全屏控制三个控件,openlayers中还有很多控件,本篇主要介绍到这里,下一章我们开始学习矢量图形绘制。

相关推荐
喝拿铁写前端6 分钟前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
sen_shan9 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
疾风铸境21 分钟前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
晓风伴月25 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态28 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
爱泡脚的鸡腿43 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ1 小时前
前端处理pdf文件流,展示pdf
前端·pdf
智践行1 小时前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态1 小时前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js