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使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...
随机推荐
- 打python&adb组合拳,实现微信读书永久免费读
用过“微信读书”的朋友都知道,如果我们想阅读全本的付费书籍,除了购买整本(使用书币)外,还可以使用无限卡.可无论是购买全书还是无限卡,归根结底都是要花银子的. 除此之外,还有一种方式——用阅读时长兑换 ...
- 史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
目录 前言: 1. 搭建整合环境 2.Spring框架代码的编写 3.SpringMVC框架代码的编写 4. Spring整合SpringMVC的框架 5.MyBatis框架代码的编写 6. Spri ...
- Java基础(十二)lambda表达式
1.引入lambda表达式的重要性 lambda表达式是一个可传递的代码块,可以在以后执行一次或多次. 在前面的回调部分,有一个例子是,ActionListener类实现了TimePrinter接口并 ...
- chrome安装json美化软件 JSONView
安装效果如下: 安装步骤: 1.下载地址: github地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 2.解压文件 3.打开谷歌浏览 ...
- SpringBoot整合FastJson(七)
一.Maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson&l ...
- javase实现记事本
java编程就是分布式.微服务?离开Spring...我还能写点什么 不知从何时起,自己喜欢上也习惯了用java写点界面程序.app.也许这就是程序员仅剩的一点乐趣.但对我而言.我却很享受这个过程.程 ...
- C++学习笔记1_ 指针.引用
1.引用的本质struct typeA{ int &a;}struct typeB{ int *a;}int main(void){ cout<<sizeof(struct typ ...
- Ubuntu16.04下nvidia驱动+nvidia-docker+cuda9+cudnn7安装
一.宿主机安装nvidia驱动 打开终端,先删除旧的驱动: sudo apt-get purge nvidia* 禁用自带的 nouveau nvidia驱动 sudo gedit /etc/modp ...
- BZOJ 2101: [Usaco2010 Dec]Treasure Chest 藏宝箱(这是我写过最骚气的dp!)
题目描述 贝西和邦妮找到了一个藏宝箱,里面都是金币! 但是身为两头牛,她们不能到商店里把金币换成好吃的东西,于是她们只能用这些金币来玩游戏了. 藏宝箱里一共有N枚金币,第i枚金币的价值是Ci.贝西 ...
- JavaScript BOM学习
Mirror王宇阳 2019年11月13日 [首发] 数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表) ...