openlayers入门教程2《View -1.地图控制》

openlayers - View 属性地图控制

View 是我们组成一个地图中不可缺少的一份部分，涉及到地图移动，放大，缩小，旋转等，这些功能是任何一个GIS引擎必不可少的。

1、View的相关属性

具体实际工作中可以针对需要的内容去官网 查看具体使用说明。下面我们将针对与一些在开发的过程中的实际使用进行一些代码讲解

2、一个基本的地图

import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import * as olProj from "ol/proj";
export default class customMap {
  constructor(options) {
    this.mapUrl = options.mapUrl || "";
    this.target = options.target;
    this.map = null;
  }
 
  /**
   * @description: 初始化地图实例
   */
  init() {
    // 已经初始化就不需要再次初始化了
    if (this.map) return;
 
    // Map 地图实例用来承载我们的配置
    this.map = new Map({
      // 让id为map的div作为地图的容器
      target: this.target,
      // 图层容器: 图层会有很多个  类似于我们吃的千层饼 一层一层叠在一起 这样可以让我们看到更多丰富的内容.
      layers: [
        // 创建一个使用Open Street Map地图源的瓦片图层
        // Tile 加载一个瓦片地图 也就是我们底图
        new Tile({ source: new OSM() }),
      ],
 
      // 设置显示地图的视图: 对我们的地图进行一些配置
      view: new View({
        center: olProj.transform([104.06, 30.67], "EPSG:4326", "EPSG:3857"),
        zoom: 10, // 并且定义地图显示层级为2
      }),
    });
  }
}

我们在View类中通过指定center的坐标 来进行我们初始化时 显示的地图位置。

  // 设置显示地图的视图: 对我们的地图进行一些配置
   view: new View({
     center: olProj.transform([116.397128, 39.916527], "EPSG:4326", "EPSG:3857"),
     zoom: 10, // 并且定义地图显示层级为2
   }),

在此处我们可能会有疑问，为什么我们在初始化坐标为0，0的时候不需要调用olProj.transform方法进行转换呢？而这里却要进行坐标转换呢？4326 和 3857 又是什么意思呢？

olProj.transform([116.397128, 39.916527], "EPSG:4326", "EPSG:3857"),

3、openlayers中的坐标

1、EPSG：4326（又名WGS84，未投影）是一个地理的非项目坐标系。它是lat，longs GPS显示器。它的单位是十进制度。EPSG：4326无法在平面地图上以有意义的方式显示。
2、EPSG：3857（又名Pseudo-Mercator，球形墨卡托或Web墨卡托）是投影坐标系。这是Google Maps和几乎所有其他Web制图应用程序使用的坐标系。

通常，数据存储在EPSG：4326中并显示在 EPSG：3857中。此外，映射API可以将lat，long（即EPSG：4326）作为输入，但是当这些坐标显示在地图上时，它们将显示为地图基于Web墨卡托（即EPSG：3857）投影。
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分米之内的修正。
有了坐标系后，我们就能精确的表示地球上的每一个位置，但为什么还需要投影呢？投影是为了把不可展的椭球面描绘到平面上，它使用几何透视方法或数学分析的方法，将地球上的点和线投影到可展的曲面(平面、园柱面或圆锥面)上，再将此可展曲面展成平面，建立该平面上的点、线和地球椭球面上的点、线的对应关系。正是因为有投影，大家才能在网页上看到二维平面的地球地图。
投影方式也多种多样，其中有一种投影叫墨卡托投影(Mercator Projection)，广泛使用于网页地图，对于OpenLayers 3的开发者而言，尤其重要，详情参见墨卡托投影。

总结：我们实际生活中经纬度坐标通常使用的是 WGS84标准的坐标 通常表现为 [116.397128,39.916527] 分别代表精度和纬度。由于WGS84无法战士在我们的平面地图上所有就有了投影坐标，在我们开发过程中的地图中的坐标都是经过投影的Web墨卡托坐标

openlayers 默认的坐标类型是 EPGS 3857,我们可以通过projection字段进行类型指定

     // 设置显示地图的视图: 对我们的地图进行一些配置
      view: new View({
        center: [116.397128, 39.916527],
        zoom: 10, // 并且定义地图显示层级为2
        projection: 'EPSG:4326',
      }),

4、地图的缩放级别与动态设置坐标

• 地图的缩放 zoom
• • zoom 当前地图的缩放几倍
• • maxZoom 地图的做大缩放级别
• • minZoom 最小缩放级别
• 通过view 实例上的animate 方法 动态设置地图的缩放等级
• 通过setCenter修改坐标点位置

4-1、customMap.js 初始化一个基本的瓦片地图

import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import * as olSource from "ol/source";
export default class CustomMap {
  constructor(options) {
    this.mapUrl = options.mapUrl || "";
    this.target = options.target;
    this.map = null;
  }
 
  /**
   * @description: 初始化地图实例
   */
  init() {
    // 已经初始化就不需要再次初始化了
    if (this.map) return;
 
    // Map 地图实例用来承载我们的配置
    this.map = new Map({
      // 让id为map的div作为地图的容器
      target: this.target,
      // 图层容器: 图层会有很多个  类似于我们吃的千层饼 一层一层叠在一起 这样可以让我们看到更多丰富的内容.
      layers: [
        // 加载一个高德地图
        // Tile 加载一个瓦片地图 也就是我们底图
        new Tile({
          source: new olSource.XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          }),
        }),
      ],
 
      // 设置显示地图的视图: 对我们的地图进行一些配置
      view: new View({
        center: [116.397128, 39.916527],
        zoom: 10, // 并且定义地图显示层级为10
        projection: "EPSG:4326",
      }),
    });
  }
 
  /**
   * @description: 获取地图实例
   */
 
  getMap() {
    return this.map;
  }
}

4-2、通过操作地图实例来实现地图控制

index.jsx

import React, { useEffect } from "react";
import CustomMap from "./libs/customMap";
import "./index.less";
const Acomponent = () => {
  let newCustomMap = null;
  /**
   * @description: 初始化地图
   */
 
  const init = () => {
    newCustomMap = new CustomMap({
      url: "",
      target: "map",
    });
    newCustomMap.init();
  };
 
  /**
   * @description: 设置地图放大
   */
 
  const scaleMap = () => {
    const Map = newCustomMap.getMap();
    const View = Map.getView();
    View.animate({ zoom: View.getZoom() + 1 });
  };
 
  /**
   * @description: 缩小地图等级
   */
  const shrinkMap = () => {
    const Map = newCustomMap.getMap();
    const View = Map.getView();
    View.setZoom(View.getZoom() - 1);
  };
 
 
  // 仔细观察我们可以看到 二者放大和缩小的实现方式 是不同的 第一种我们通过一个动画去实现 效果更好
 
 
  /**
   * @description: 设置中心点
   */
 
  const setCenter = () => {
    const Map = newCustomMap.getMap();
    const View = Map.getView();
 
    View.setCenter([117.30983, 39.71755]);
  };
 
  /**
   * @description: 通过fit函数自适应地图
   */
 
  const showFitFn = () => {
    const Map = newCustomMap.getMap();
    const View = Map.getView();
    console.log(Map.getSize());
    View.fit([104, 30.6, 104.12, 30.74], Map.getSize());
  };
 
  useEffect(() => {
    init();
  }, []);
 
  return (
    <div className="warp">
      <div id="map"></div>
 
      <button onClick={scaleMap}>点击按钮放大地图</button>
      <button onClick={shrinkMap}>点击按钮缩小地图</button>
      <button onClick={setCenter}>点击按钮定位去天津</button>
      <button onClick={showFitFn}>点击定位到成都</button>
    </div>
  );
};
 
export default Acomponent;

注意！在进行坐标设置时需要注意我们指定的坐标类型是4326 还是 3857 如果类型错误会导致我们的预期的功能无法实现

更多View 实例方法我们可以在官网进行查看

4-3、精准定位某个坐标的地图展示内容

精准定位某个坐标的地图展示内容 在实际业务开发中我们通常像实际定位某个设备存在与地图上与之相对应的位置，而不是笼统的定位信息展示，面对这种需求我们可以在出发定位设备这个功能时，同时设置View的放大等级再修改中心点为定位设备的中心点。这样其实也能够实现。但是我们现在有更好的办法去实现该功能

// 通过fit 函数 我们可以移动到指定地点，然后放大当前区域
const showFitFn = () => {
    const Map = newCustomMap.getMap();
    const View = Map.getView();
    console.log(Map.getSize())
    View.fit([104, 30.6, 104.12, 30.74],Map.getSize());
  };