openlayers 3 地图上限制地图显示及拖动范围,坐标系是4326转3857,中心经纬度精确到小数点后六位,减少误差

GitHub:八至

作者:狐狸家的鱼

本文链接:ol3-限制地图显示及拖动范围

查看extent参数可以知道:

所以可以这样进行设置范围:

  1. var view = new ol.View({
  2. ...
  3. extent: [minx,miny,maxx,maxy]
  4. ...
  5. });
  6. var map = new ol.Map({
  7. ...
  8. view: view,
  9. ...
  10. });

并且需要考虑地图投影,比如在WGS84和球形墨卡托之间,有一个转换方案:

  1. var map = new ol.Map({
  2. .
  3. .
  4. .
  5. view: new ol.View({
  6. extent: ol.proj.transfromExtent([minx, miny, maxx, maxy], 'EPSG:4326', 'EPSG:3857');
  7. .
  8. .
  9. .
  10. )}
  11. )}

而当缩放地图时,显示的范围不是我们想要的结果,可以限制缩放层级,这是另一种选择:

  1. ...
  2. var map = new ol.Map({
  3. layers: [...],
  4. overlays: [...],
  5. target: document.getElementById('map'),
  6. view: new ol.View({
  7. center: ol.proj.transform([minx,miny,maxx,maxy],
  8. 'EPSG:4326', 'EPSG:3857'),
  9. zoom: ...,
  10. maxZoom: ...,
  11. minZoom: ...,
  12. extent: ol.proj.transform([minx-n,miny-n,maxx+n,maxy+n],
  13. 'EPSG:4326', 'EPSG:3857')
  14. })
  15. });
  16. ...

OpenLayers学习笔记(九)— 限制地图显示范围的更多相关文章

  1. Windows phone 8 学习笔记(8) 定位地图导航

    原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

  2. 多线程学习笔记九之ThreadLocal

    目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...

  3. MDX导航结构层次:《Microsoft SQL Server 2008 MDX Step by Step》学习笔记九

    <Microsoft SQL Server 2008 MDX Step by Step>学习笔记九:导航结构层次   SQL Server 2008中SQL应用系列及BI笔记系列--目录索 ...

  4. python3.4学习笔记(九) Python GUI桌面应用开发工具选择

    python3.4学习笔记(九) Python GUI桌面应用开发工具选择 Python GUI开发工具选择 - WEB开发者http://www.admin10000.com/document/96 ...

  5. Go语言学习笔记九: 指针

    Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...

  6. go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin)

    目录 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin) zipkin使用demo 数据持久化 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin ...

  7. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  8. Python学习笔记九

    Python学习笔记之九 为什么要有操作系统 管理硬件,提供接口. 管理调度进程,并且将多个进程对硬件的竞争变得有序. 操作系统发展史 第一代计算机:真空管和穿孔卡片 没有操作系统,所有的程序设计直接 ...

  9. OpenLayers学习笔记4——使用jQuery UI实现測量对话框

    OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉 ...

  10. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

随机推荐

  1. 新更新,又是一年了。这次记录下关于android版的WeiboDemo的问题

    时隔一年多,现在又开始折腾android的代码了.之前看了Learning android,就想看下能否移植到Weibo.然后就下了weibo的代码,代码包里有个实例叫WeiboSDKDemo. 为了 ...

  2. Git使用入门笔记

    1. 创建并初始化一个 代码仓库 (repository) $ git init 2.查看当前状态 $ git status 3. 将修改后的文件推入缓冲区 $ git add <filenam ...

  3. SQLServer之修改表值函数

    修改表值函数注意事项 更改先前通过执行 CREATE FUNCTION 语句创建的现有 Transact-SQL 或 CLR 函数,但不更改权限,也不影响任何相关的函数.存储过程或触发器. 不能用 A ...

  4. idea 模板注释设置

    一.首先我们来设置IDEA中类的模板: 1.File-->settings-->Editor-->File and Code Templates-->Files 我们选择Cla ...

  5. python——python3.6环境搭建(Windows10,64位)

    1.python软件资源下载 1.1 打开python官网地址:https://www.python.org 1.2 根据自己电脑的设置选择下载合适的python3.6.2 1.3 此处选择windo ...

  6. JavaScript面向对象—基本数据类型和引用数据类型的区别和变量及作用域(函数和变量)

    基本类型和引用类型的值 ECMAScript 变量可能包含两种不同的数据类型的值:基本类型值和引用类型值. 基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置. 而引用 ...

  7. (六)List All Indices

    Now let’s take a peek at our indices: 现在让我们来看看我们的指数: GET /_cat/indices?v And the response: health st ...

  8. Spring Security(三十五):Part III. Testing

    This section describes the testing support provided by Spring Security. 本节介绍Spring Security提供的测试支持. ...

  9. redis 初步认识三(设置登录密码)

    1.cmd 2.cd C:\Program Files\Redis 3.redis-cli.exe -h 127.0.0.1 -a 123456

  10. Spring Cloud:多环境配置、eureka 安全认证、容器宿主机IP注册

    记录一下搭建 Spring Cloud 过程中踩过的一些坑,测试的东西断断续续已经弄了好多了,一直没有时间整理搭建过程,时间啊~时间~ Spring 版本 Spring Boot:2.0.6.RELE ...