View

所有人都喜欢所见即所得，View就是这样的。作为地图的窗口，更改View，即可看到改变。View是Openlayer地图组成部分中非常重要的一个概念，涉及到地图移动、放大、缩小、旋转等，这些功能任何GIS引擎都不可或缺。

1、坐标导航

在这样一张地图中，有左移、右移、上移、下移、移到成都、放大缩小功能。这些功能，拼凑出简单的地图导航功能。而这些，用ol.view提供的方法就可以实现

map.getView() //可以获得地图视图
view.getCenter() //可以获得视图中心
mapCenter[0] //对mapCenter[0]进行加减操作，可以左右移动地图增加左移，减小右移
mapCenter[1] //对mapCenter10]进行加减操作，可以上下移动地图增加下移，减小上移
view.setCenter() //重新设置视图中心
view.setCenter(ol.proj.transform(坐标, ‘EPSG:4326’, ‘EPSG:3857’)) //设置视图中心坐标，可以进行闪现
view.getZoom() //获得缩放级别
view.setZoom() //设置缩放级别
缩放级别介绍

具体实现代码：

<!Doctype html>
<html lang="ch">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 地图示例</title><link href="ol.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div>
<div id="navigate-container"><input type="button" onClick="moveToLeft();" value="左移" /><input type="button" onClick="moveToRight();" value="右移" /><input type="button" onClick="moveToUp();" value="上移" /><input type="button" onClick="moveToDown();" value="下移" /><input type="button" onClick="moveToChengDu();" value="移到成都" /><input type="button" onClick="zoomIn();" value="放大" /><input type="button" onClick="zoomOut();" value="缩小" />
</div>
<script>const map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),// 设置初始缩放级别zoom: 10}),target: 'map'});// 向左移动地图function moveToLeft() {// 得到地图视图const view = map.getView();// 得到视图中心const mapCenter = view.getCenter();// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定mapCenter[0] += 50000;view.setCenter(mapCenter);map.render();}// 向右移动地图function moveToRight() {const view = map.getView();const mapCenter = view.getCenter();// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定mapCenter[0] -= 50000;view.setCenter(mapCenter);map.render();}// 向上移动地图function moveToUp() {const view = map.getView();const mapCenter = view.getCenter();// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定mapCenter[1] -= 50000;view.setCenter(mapCenter);map.render();}// 向下移动地图function moveToDown() {const view = map.getView();const mapCenter = view.getCenter();// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定mapCenter[1] += 50000;view.setCenter(mapCenter);map.render();}// 移动到成都function moveToChengDu() {const view = map.getView();// 设置地图中心为成都的坐标，即可让地图移动到成都view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));map.render();}// 放大地图function zoomIn() {const view = map.getView();// 让地图的zoom增加1，从而实现地图放大view.setZoom(view.getZoom() + 1);}// 缩小地图function zoomOut() {const view = map.getView();// 让地图的zoom减小1，从而实现地图缩小view.setZoom(view.getZoom() - 1);}</script>
</body></html>

2. 坐标

在API文档中，是这样对ol.proj.transform进行描述的。
大概来说，就是它的功能是进行坐标转换，将坐标从源位置弄到目标位置。并且返回一个新的坐标值。它需要三个参数，第一个是ol/coordinate类型的，二三个都是对应坐标所用到的坐标系。
之所以弄得如此复杂，是因为有许多坐标系，我们必须要自己对需要的坐标系进行设定。

3. 坐标系以及投影

关于原点，方向，单位等等的相关定义和描述，组成了我们常说的坐标系。谈到坐标系，就会想起初中数学中经常接触到的二维笛卡尔坐标系，在图形学中也会遇到三维坐标系，在GIS中我们需要地理坐标系。但它并不像笛卡尔坐标系那样简单，学过地理知识就知道，地球并不是一个完全规则的球体。在不同的地区，为了在数学上表示它，就出现了多种不同的参考椭球体，比如克拉索夫斯基(Krasovsky)椭球体，WGS1984椭球体，更多的椭球体参见参考椭球体。在参考椭球体的基础上，就发展出了不同的地理坐标系，比如我国常用的WGS84，北京54，西安80坐标系，欧洲，北美也有不同的坐标系。北京54使用的是克拉索夫斯基(Krasovsky)椭球体，WGS84使用的是WGS1984椭球体。由此可见，多个坐标系是源于地理的复杂性。
由于存在着多种坐标系，即使同样的坐标，在不同的坐标系中，也表示的是不同的位置，这就是大家经常遇到的偏移问题的根源，要解决这类问题，就需要纠偏，把一个坐标系的坐标转换成另一个坐标系的坐标。由于WGS84是全球通用的坐标系，涉及到多个坐标系与它之间的转换，所以在此做个简单的介绍。
WGS84，全称World Geodetic System 1984，是为GPS全球定位系统使用而建立的坐标系统。通过遍布世界的卫星观测站观测到的坐标建立，其初次WGS84的精度为1-2m，在1994年1月2日，通过10个观测站在GPS测量方法上改正，得到了WGS84（G730），G表示由GPS测量得到，730表示为GPS时间第730个周。
1996年，National Imagery and Mapping Agency (NIMA) 为美国国防部 (U.S.Department of Defense, DoD)做了一个新的坐标系统。这样实现了新的WGS版本WGS（G873）。其因为加入了美国海军天文台和北京站的改正，其东部方向加入了31-39cm 的改正。所有的其他坐标都有在1分米之内的修正。
关于北京54和西安80坐标系，请自行通过网络查找相关资料进行了解。
有了坐标系后，我们就能精确的表示地球上的每一个位置，但为什么还需要投影呢？投影是为了把不可展的椭球面描绘到平面上，它使用几何透视方法或数学分析的方法，将地球上的点和线投影到可展的曲面(平面、园柱面或圆锥面)上，再将此可展曲面展成平面，建立该平面上的点、线和地球椭球面上的点、线的对应关系。正是因为有投影，大家才能在网页上看到二维平面的地球地图。
投影方式也多种多样，其中有一种投影叫墨卡托投影(Mercator Projection)，广泛使用于网页地图，对于OpenLayers 3的开发者而言，尤其重要，详情参见墨卡托投影。
如果不了解上面这些基本知识，在使用OpenLayers 3的过程中，会感觉寸步难行，相反，则得心应手。
转自——http://weilin.me/ol3-primer/ch04/04-03.html

4. OpenLayer 使用的坐标系

目前OpenLayers 支持两种投影，一个是EPSG:4326，等同于WGS84坐标系，参见详情。另一个是EPSG:3857，等同于900913，由Mercator投影而来，经常用于web地图，参见详情。一个是全球通用的，一个是web地图专用的，OpenLayers 支持它们。OpenLayers 3默认使用的是EPSG:3857。我们要根据自己的需求进行设置。
使用4326和使用3857的区别：

<!Doctype html>
<html lang="ch">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 地图示例</title><link href="ol.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div>
<script>new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({// 设置成都为地图中心center: [104.06, 30.67],// 指定投影使用EPSG:4326projection: 'EPSG:4326',zoom: 10}),target: 'map'});
</script>
</body></html>

<!Doctype html>
<html lang="ch">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 地图示例</title><link href="ol.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div><script>const map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),// 设置初始缩放级别zoom: 10}),target: 'map'});</script>
</body></html>

Openlayer：学习笔记之View相关推荐

Codeigniter入门学习笔记02—View
很久很久以前学习Codeigniter的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助. 本文使用word2013编辑并发布 Postbird | There I am , in the ...
[Android学习笔记二] View转化Bitmap
在View类中的onDraw方法的参数Canvas是View绘制的背景,要将View转换为Bitmap实际上就是让Canvas上的绘制操作绘制到Bitmap上. View转化为Bitmap也称为截屏, ...
Qt学习笔记-----Model/View架构之自定义Model
Model/View Framework中提供了模型model的抽象基类QAbstractItemModel, 如果需要自定义模型就需要继承这个类并且实现一些必要的函数. 此外,Qt中又提供了QAbs ...
Qt学习笔记-----Model/View架构
为了实现数据的存储和表现分离,Qt提供了Model/View架构,包括三个部分,分别是模型(Model),视图(View),委托(delegate). Model用于访问底层数据,也就是说为其他组件访 ...
《Android艺术开发探索》学习笔记之View的事件体系（一）
View View是Android中所有控件的基类,即使是ViewGroup也是继承View,也就是说View本身就可以是单个控件也可以是多个控件组成的一组控件,通过这种关系形成了View的结构. V ...
28、深入浅出MFC学习笔记，View功能的加强和重绘效率的提高
1.同一份Document的多个views,在Document的一个view改变了后,如何同步其它view呢? 让所有的Views 同步更新资料的关键在于两个函数: 1)CDocument::Upda ...
css view a if属性,uni-app学习笔记（2）view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
xcode 学习笔记2:动态添加view
xcode 学习笔记2:动态添加view 2011-07-06 16:48:39| 分类: 计算机学习|字号订阅前面说的都是用的Interface Builder来编辑.xib文件来给窗口添加各 ...
[非卷积5D中文翻译及学习笔记] 神经辐射场 NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis
不使用3D建模,使用静态图片进行训练,用(非卷积)深度网络表示场景的5D连续体表示,再通过ray marching进行渲染. 本中文翻译使用"机器学习+人工校准/注解"的方式完成. ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...

Openlayer：学习笔记之View