Openlayers 地图定位到相应位置并缩放
说明:
在地图操作中,有个功能,需要点击一个点,将视图定位到点击点的位置,并放大。
解决方案:
1、可以有openlayers中可以有ol.View来控制,但是在更改时,会将地图初始化时设置的maxZoom,minZoom等覆盖掉,因此需要在设置新的view前,重新设置一次初始化时的值,避免重复覆盖。
/**
* @description 地图定位中心并缩放事件
* @param {Map} _map 地图对象
* @param {Feature} _feature 要定位的要素
* @param {Number} _zoomLevel 缩放层级
*/
this.zoomAndCenter = function (_map, _feature, _zoomLevel) {
var my_view = new ol.View({
center: ol.extent.getCenter(_feature.getGeometry().getExtent()),//格式:[x,y]
zoom: _zoomLevel,
minZoom: _map.encmap.getView().getMinZoom(),
maxZoom: _map.encmap.getView().getMaxZoom()
});
_map.encmap.setView(my_view);
};
2、单独设置中心和缩放,推荐!
let view = _map.encmap.getView();
view.setZoom(_zoomLevel);
view.setCenter(ol.extent.getCenter(_feature.getGeometry().getExtent()));
Openlayers 地图定位到相应位置并缩放的更多相关文章
- Android应用中使用百度地图API定位自己的位置(二)
官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...
- Android使用百度地图定位并显示手机位置后使用前置摄像头“偷拍”
今天老板让我验证一下技术可行性,记录下来. 需求 :定位手机的位置并在百度地图上显示,得到位置后使用前置摄像头进行抓拍 拿到这个需求后,对于摄像头的使用不太熟悉,于是我先做了定位手机并在百度地图上显示 ...
- html5定位获取当前位置并在百度地图上显示
用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- Android 百度地图定位(手动+自动) 安卓开发教程
近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置. 经过2天研究 ...
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- 使用高德地图JS获取当前位置和经纬度
先看效果,我做的是这样的,可以按地图位置来返回当前你点的位置(图一,二),也可以根据输入框的自动搜索(图三,四) HTML的代码: <div> <input type="t ...
- (十八)WebGIS中清空功能和地图定位功能的设计以及实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...
- Android之仿ele地图定位效果
PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...
随机推荐
- Node.js事件的正确使用方法
前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...
- Linux及Windows安装Redis(详细)
Linux及Windows安装Redis 1.Windows安装教程 1.1下载 https://github.com/MSOpenTech/redis/releases 进入github里下载red ...
- JVM(2) Java内存溢出异常
在Java虚拟机运行时数据区中,除了程序计数器之外,虚拟机栈.本地方法栈.方法区和Java堆都有发生OutOfMemoryError(简称OOM)异常的可能. 一.Java堆溢出 Java堆用于存储对 ...
- 设计模式(七)Builder模式
Builder模式,从这个名字我们可以看出来,这种设计模式就是用于组装具有复杂结构的实例的. 下面还是以一个实例程序来解释这种设计模式,先看实例程序的类图. 这里为了调试方便,只实现其中一个功能Tex ...
- Java连接MySQL简单步骤及常见问题解析
这篇文章跟读者们介绍Java语言如何连接到MySQL数据库相关操作,及FAQ(Frequently Asked Questions)介绍. 选择工具和准备数据集 IDE:Eclipse 数据库:使用的 ...
- Topshelf+Quartz在.Net Core框架下的实现
在我们日常开发工作中,经常会运用到Quartz+Topshelf组件的组合来开发一些定时任务.那么在.Net Core下如何去使用呢?我自己尝试搭建了一个测试项目,过程中遇到了以下一些问题: Quar ...
- Visual Studio Online 的 FAQ:iPad 支持、自托管环境、Web 版 VS Code、Azure 账号等
北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online 公开预览版!发布之后,开发者们都为之振奋.同 ...
- CSPS模拟测试59
这场考得我心态爆炸......... 开场T1只会$n^{2}$,然后发现bfs时每个点只需要被更新一次,其他的更新都是没用的. 也就是说,我们可以只更新还没被更新的点? 于是我先YY了一个链表,发现 ...
- 超出隐藏兼容H5
常用的字体超出隐藏不能兼容H5和ios 所以整理了两种用jquery来实现的方法,然后弊端是只能隐藏指定字数不能段落隐藏 方法一. //超出隐藏兼容iosfunction hide(text,nube ...
- 你了解MySQL中的日志吗?
MySQL中有两类非常重要的日志,一类是redo log(重做日志),一类是bin log(归档日志) redo log 重做日志利用的,是MySQL中,常见的WAL技术,WAL技术的全程是:Writ ...