38-Openlayers调整中心点坐标、调整缩放级别、调整地图可视角度和地图复位

已于 2024-06-02 12:32:07 修改
阅读量317 收藏
点赞数
分类专栏： OpenLayers中文教程零基础到精通 文章标签： javascript
于 2024-06-02 10:15:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxshy/article/details/139387759
版权
本文介绍了如何使用OpenLayers库在JavaScript中改变地图的中心点坐标、调整缩放级别以及设置地图的可视角度。同时，还涵盖了如何将地图恢复到初始状态的复位操作。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07-Openlayers调整中心点坐标、调整缩放级别、调整地图可视角度和地图复位</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.9.0/proj4.js"></script>
    <style>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
fxshy
关注
专栏目录
订阅专栏
Vue+OpenLayers7入门到实战：OpenLayers7地图调整中心点坐标、调整缩放级别、调整地图可视角度、地图复位到默认位置和缩放级别和调整可视角度等功能实现
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-26 237
本章介绍如何使用OpenLayers7实现最基础的调整中心点坐标、调整缩放级别、调整地图可视角度、地图复位到默认位置和缩放级别和调整可视角度的功能示例。非常简单，可直接上手。
Openlayers6入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-25 1748
本章介绍一下Openlayers最基础的调整中心点坐标方式、调整缩放级别、调整地图可视角度和地图复位的小功能示例，非常简单，可直接上手。
openLayers实战(二)：设置地图中心点、回到地图中心点、绘制点、移除点、点击获取坐标点
在下魔王ii的博客
08-08 2920
1.设置中心点，首先需要知道点的地理坐标，还需要知道如何在地图上画点。2.每次重新设置中心点的时候，还需要清除上一次设置的中心点。
OpenLayers-添加overlay图层时位置发生偏移BUG
最新发布
人与人之间最小的差别是智商，最大的差别是坚持。
08-12 1110
然后我想到每次出现偏移时，进行地图缩放或者拖动时都会恢复正常，那我是不是可以在添加完图层后刷新一下地图从而实现想要的效果呢，结果就是成功了，在图层渲染完毕后通过回调调用地图刷新函数（这里有子组件的渲染，所以这边是通过生命周期钩子函数配合自定义事件完成），然后显示效果就正常了。在做项目过程中，用overlay做了一个infowindow弹窗，但是在使用过程中发现一个bug：overlay.setPosition以后，会出现偏移，但是拖动一下地图或者点击一下地图其他地方就回到正确的位置。
openLayers实战(四)：设置地图中心点、修改地图中心点
在下魔王ii的博客
08-10 2408
截至到目前阶段的功能，我自己实现最完整的代码。
openlayers 移动地图中心点
qq_51408015的博客
07-29 1647
openlayers
openlayer的中心点移动动画（定位某个点）
paidaboluo的博客
07-16 903
openlayer中心点设置 修改中心点 动画 设置缩放等级
OpenLayers中地图缩放级别的设置方…
ZHANGHUI3239619的专栏
12-07 3679
一、概述 在OpenLayers中，地图必须具有一个缩放级别的范围，缩放级别可以用比例尺（scale）或者分辨率（resolution）表示。 比例尺——屏幕上1米代表多少地图坐标单位；分辨率——屏幕上一个像素代表多少地图坐标单位。 两者的转换关系是：scale = resolution * 72 * 39.3701（1米=39.3701英寸，1英寸=72像素） 地图具有一个总的缩放级别，每个图
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3474
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
OpenLayers6入门，OpenLayers平移地图到指定位置，地图平移动画效果
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-09 997
本章讲解OpenLayers如何实现平移地图到指定经纬度位置的功能。其他地图跳转位置方式：Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位OpenLayers入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置。
OpenLayers6入门，OpenLayers旋转地图到移动到指定位置，旋转动画效果，边旋转边移动到指定位置
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-09 1140
本章讲解如何使用视图旋转动画方式，边旋转边移动地图到指定位置。其他地图跳转位置方式：Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位OpenLayers入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置OpenLayers入门，OpenLayers平移地图到指定位置，地图平移动画效果。
OpenLayers6入门，OpenLayers使用弹跳动画和弹簧动画效果移动地图到指定位置，两种弹跳动画效果
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-09 598
OpenLayers使用弹跳动画和弹簧动画效果移动地图到指定位置，分别实现两种弹跳动画效果，一种是弹跳效果，一种是弹簧效果，具体效果看效果图。
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 9663
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
Openlayers入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-30 1367
本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
openLayers 加载图层两种方式，动态设置地图中心点，框选获取geojson数据
wwf1225的博客
06-16 3071
关于openlayers图层的放大缩小以及中心坐标
qq_44090964的博客
12-01 1791
首先要引入openlayers的defaults，看看官网的文档. import { defaults } from "ol/control"; import { fromLonLat } from "ol/proj"; const map = new Map({ layers: [ new TileLayer({ source: new OSM() }),], target: "map", controls: new defaults({ attri
openlayer setCenter 地图无反应
josiecici的博客
10-19 339
加上map.render()即可。
04-openlayers注册4490并加载天地图
fxshy的博客
05-14 298
注册4490并加载天地图
Openlayers-设置地图缩放级别
12-24 1667
在实际项目中，好多地图不需要从第0级开始缩放，因为第0级地图太小了，没有实际意 义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制，也因此需要自己注册事件通过监听事件来控制地 图的最小缩放级别。对于openlayers3来说，直接通过view的属性进行控制即可。 openlayers中需要注册缩放事件来解决，在该事件中监听缩放后地图的级别，当地图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值