Vue+OpenLayers7入门到实战：OpenLayers7地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系

原创 已于 2024-03-09 21:31:39 修改 · 339 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #OpenLayers7初始化 #地图初始化

于 2024-01-24 18:03:48 首次发布
本文详细介绍了在OpenLayers7中如何初始化地图，包括设置默认缩放级别、地图中心点、最大和最小缩放级别，以及默认坐标系。通过Vue项目实践，展示具体代码实现。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

本章讲解OpenLayers7地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系等配置。

前言

OpenLayers7地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置最大缩放级别和最小缩放级别，超过缩放级别用户无法再放大和缩小，和设置默认坐标系。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "^7.5.2"
  1. 使用npm安装依赖
npm
了解本专栏 订阅专栏 解锁全文
Openlayers实战：自定义放大缩小，显示zoom等级
大剑师兰特的GIS世界
07-05 1943
Openlayers地图中，默认的zoom组件是在左上角，这个组件很重要，方便大家来操控地图。在实际项目中，大家往往要改写这个组件，通常会放置到右下角，方便鼠标操作。在我们的实战课程里，自定义了放大缩小，并增加了显示zoom等级的功能，实际的项目中往往都是这样办理的。
04-openlayers注册4490并加载天地图
fxshy的博客
05-14 669
注册4490并加载天地图
Openlayers+天地图在页面上显示（初始化）（使用vue3）
m0_57816620的博客
10-18 2624
使用openlayers+天地图完成初始化页面的显示
openlayers6【二】Map地图详解，初始化一个map地图
@必意玲
04-02 1万+
openlayers 6【二】vue 初始化map地图详解
OpenLayers入门，OpenLayers地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-28 1638
OpenLayers地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置最大缩放级别和最小缩放级别，超过缩放级别用户无法再放大和缩小，和设置默认坐标系。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3503
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4910
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-29 458
本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
Vue+OpenLayers7入门专栏目录，OpenLayers7中文文档，OpenLayers7中文手册api，OpenLayers7中文教程
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-17 981
本篇作为《Vue+OpenLayers7入门教程》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏基本上每章都有详细的源代码和运行示例以供参考，且保证每章代码都可以正常运行，非常适合入门读者从零开始学习。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种简单的入门案例带领大家快速上手Vue+OpenLayers7开发。
缩放级别为1HTML,OpenLayers中地图缩放级别的设置方法
weixin_33600376的博客
06-17 925
来源于：http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html一、概述在OpenLayers中，地图必须具有一个缩放级别的范围，缩放级别可以用比例尺(scale)或者分辨率(resolution)表示。比例尺——屏幕上1米代表多少地图坐标单位；分辨率——屏幕上一个像素代表多少地图坐标单位。两者的转换关系是：scale = r...
Openlayers中的比例尺（scale）和分辨率（resolution）
热门推荐
dazhi_1314的专栏
08-05 1万+
<br />今天研究了一下Openlayers中的比例尺（scale）和分辨率（resolution），弄懂了一些以前不太懂的东西。 <br />一、首先阐明几个概念：1、Scale：比例尺，图上距离和实地距离之比。<br />2、Resolution：分辨率，每个象元代表的实地距离（map units per pixels）。<br />3、Extent：地图的范围（地图四至）。<br />4、zoomlevel：缩放的级别（0~15）。注：因为这几个变量均为对”地图显示“的量化描述，因此均有最大和最小值
地图比例尺学习、超图最小可见比例尺和最大可见比例尺
bcbobo21cn的专栏
01-09 2179
比例尺是表示地图距离与实际距离之比，表示图上距离比实际距离缩放的程度。 比例尺可对地图上的元素大小和元素间的距离进行直观指示。 比例尺越大，地图所表示的范围越小，图内表示的内容越详细； 比例尺越小，地图上所表示的范围越大，反映的内容越简略，精确度越低。 地图比例尺可分为主比例尺和局部比例尺两种： 主比例尺：是指在投影面上没有形变的点或线上的比例尺， 局部比例尺：是指在投影面上有变形处的比例尺； 地图比例尺形式 地图比例尺有数字式、文字式、图解式三种； 超图图层属性中有如下2个...
超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件
bcbobo21cn的专栏
12-12 1612
以超图的在线示例来学习；运行之后如下； 原网址代码比较长一些；先把多的去掉；看一下基本的加载图层和地图控件的概念； <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script> <script type="text/javascript" exclude="iclient-classic" include="tianditu" src="../../
Openlayers之初始化地图
SmileCoffin的博客
01-20 4226
1、使用VS新建一个Web空白网站，然后将Openlayers3的开发库和样式文件复制到网站的根目录下； 2、新建一个HTML文档，并引入ol.js和ol.css； 3、在body标签中新建一个div作为地图加载的容器，然后设置其id为“map”； 4、代码实现 加载并显示OSM地图 window.onload =
OpenLayers设置地图缩放最小范围和最大范围
asuyunlong的专栏
07-29 9444
 OpenLayers设置地图缩放最小范围和最大范围 function init() { var options= { projection: "EPSG:4326", eventListeners: { "moveend": mapEvent, "zoomend": mapEvent }, contro
高德定位后缩放级别的设置
weixin_33901641的博客
07-22 950
2019独角兽企业重金招聘Python工程师标准>>> ...
百度地图_设置缩放级别
zhipeng
11-24 1万+
百度地图缩放级别
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 134
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
vue对接海康摄像头-H5player
最新发布
林恒的博客
12-31 190
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
vue2+openlayers天地图手动平滑更新中心点
05-27
在 Vue2 和 OpenLayers 结合天地图的项目中，实现手动平滑更新中心点的功能主要涉及以下几个方面：初始化地图、设置视图动画以及处理坐标转换。以下是具体的实现步骤和代码示例。 #### 1. 初始化地图 首先需要创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值