Openlayer：学习笔记之View-CFANZ编程社区

View

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

1、坐标导航

Openlayer：学习笔记之View_html

在这样一张地图中，有左移、右移、上移、下移、移到成都、放大缩小功能。这些功能，拼凑出简单的地图导航功能。而这些，用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进行描述的。 Openlayer：学习笔记之View_缩放_02

大概来说，就是它的功能是进行坐标转换，将坐标从源位置弄到目标位置。并且返回一个新的坐标值。它需要三个参数，第一个是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:4326
            projection: 'EPSG:4326',
            zoom: 10
        }),
        target: 'map'
    });
</script>
</body>

</html>

Openlayer：学习笔记之View_html_03

<!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_html_04