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

GitHub:八至

作者:狐狸家的鱼

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

查看extent参数可以知道:

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

var view = new ol.View({
...
extent: [minx,miny,maxx,maxy]
...
});
var map = new ol.Map({
...
view: view,
...
});

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

var map = new ol.Map({
.
.
.
view: new ol.View({
extent: ol.proj.transfromExtent([minx, miny, maxx, maxy], 'EPSG:4326', 'EPSG:3857');
.
.
.
)}
)}

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

...
var map = new ol.Map({
layers: [...],
overlays: [...],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([minx,miny,maxx,maxy],
'EPSG:4326', 'EPSG:3857'),
zoom: ...,
maxZoom: ...,
minZoom: ...,
extent: ol.proj.transform([minx-n,miny-n,maxx+n,maxy+n],
'EPSG:4326', 'EPSG:3857')
})
});
...

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 常驻广播和非常驻广播

    一.知识准备 ①常驻广播接受者:使用AndroidManifest.xml注册,接受者不随Activity的销毁而销毁,也就是拥有独立的生命周期. ②非常驻广播接受者:使用registerReceiv ...

  2. 创建你的一个composer包

    如何创建自己的一个composer包,这个其实很好解决的!只要你了解composer相关的知识便不难做到. 首先,你还不知道什么是composer的话,请先学习下composer的相关知识.简单的说, ...

  3. HybridStart发布v1.0测试版

    HybridStart是一款多webview模式的混合应用前端开发框架,本来只是作者自用的一套混合应用开发模板,为了进一步提高混合应用开发效率,近期着重在框架高通用性和易用性方面做了较大改进,比如将U ...

  4. Redis操作list

    来自:http://www.cnblogs.com/alex3714/articles/6217453.html List操作,redis中的List在在内存中按照一个name对应一个List来存储. ...

  5. .NET CORE学习笔记系列(3)——ASP.NET CORE多环境标识

    在开发项目的过程当中,生产环境与调试环境的配置是不一样的.比如连接字符串. ASP .NET CORE 支持利用环境变量来动态配置 JSON 文件.ASP.NET Core 引用了一个特定的环境变量  ...

  6. kubernetes-核心资源之Ingress

    1.Ingress 在Kubernetes中,服务和Pod的IP地址仅可以在集群网络内部使用,对于集群外的应用是不可见的.为了使外部的应用能够访问集群内的服务,在Kubernetes中可以通过Node ...

  7. 使用time+dd测试硬盘读写速度

    命令:time dd if=/dev/zero bs=1M count=2048 of=direct_2G   此命令为在当前目录下新建一个2G的文件 Demo如下: 写速度: time dd if= ...

  8. ubuntu系统下mysql重置密码和修改密码操作

    一.忘记密码后想重置密码 在介绍修改密码之前,先介绍一个文件/etc/mysql/debian.cnf.其主要内容如下图: 里面有一个debian-sys-maint用户,这个用户只有Debian或U ...

  9. 使用serialize时多数据传递

    class CartList(APIView): #定义编辑方法 def post(self,request): username = request.POST.get('username') # p ...

  10. iOS开发基础-UITableView控件简单介绍

     UITableView 继承自 UIScrollView ,用于实现表格数据展示,支持垂直滚动.  UITableView 需要一个数据源来显示数据,并向数据源查询一共有多少行数据以及每一行显示什么 ...