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. 解决 winform打开网页 和WebBrowser打开链接360误报拦截的问题

    以下方法我已经在自己电脑上验证通过,其他电脑并未测试,请广大读者自行验证并反馈,如果有更好的方法请指教. 在winform中如果使用这种方法弹出网页,例如这样 Process.start(" ...

  2. 新版的nuget包 PackageLicense 这样写

    Intro 最近编译类库项目的时候发现总是有个 licenseUrl 的警告,警告信息如下: warning NU5125: The 'licenseUrl' element will be depr ...

  3. 测者的性能测试手册:Yourkit 监控JettyYourkit 监控Jetty

    Yourkit是收费工具,每一个email可以免费试用15天,觉得好的朋友可以自行选择购买 服务器端下载yourkit(java) Windows安装yourkit Java Profiler 201 ...

  4. Python第三天 序列 5种数据类型 数值 字符串 列表 元组 字典 各种数据类型的的xx重写xx表达式

    Python第三天 序列  5种数据类型  数值  字符串  列表  元组  字典 各种数据类型的的xx重写xx表达式 目录 Pycharm使用技巧(转载) Python第一天  安装  shell ...

  5. c/c++ 网络编程 UDP 发送端 bind 作用

    网络编程 UDP 发送端 bind 作用 upd 发送端 调用bind函数的效果:把socket特定到一个指定的端口,如果不调用bind,内核会随机分配一个端口. upd 发送端 调用bind函数的目 ...

  6. XML详解二XML的解析与创建

    XML用来传输和存储数据,如何解析获取到的XML文本呢? 一.解析XML 创建demo.xml文件: <?xml version="1.0" encoding="U ...

  7. Python基础之协程

    阅读目录 一 引子 二 协程介绍 三 Greenlet模块 四 Gevent模块 引子 之前我们学习了线程.进程的概念,了解了在操作系统中 进程是资源分配的最小单位,线程是CPU调度的最小单位. 按道 ...

  8. tmpfs使用探讨

    一. 什么是tmpfs? tmpfs是一种基于内存的文件系统,它和虚拟磁盘ramdisk比较类似,但不完全相同,和ramdisk一样,tmpfs可以使用RAM,但它也可以使用swap分区来存储. 而且 ...

  9. Git拉取、提交、迁出、合并、删除分之命令

    #拉取代码 git clone -b 分之名称 git地址 #提交代码 git add . //:注释,if是第一次提交: $ git add --all . (请注意后面有个英文点(表示是当前目录) ...

  10. Bootstrap日期和时间表单组件

    http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 MarketPoint