OpenLayer基础概念翻译

最近正在学习gis，openlayer学习记点笔记。

0penLayer基本概念翻译笔记
MAP
openlayer组件核心是map，它被渲染到一个目标容器 target (e.g. web页面上一个包含map的div元素）。
所有的map参数可以在构建地图时配置，也能使用setter方法设置，e.g. setTarget()。

<div id="map" style="width: 100%, height: 400px"></div>

import Map from 'ol/Map';
var map = new Map({target: 'map'});

View
map不负责地图中心，缩放，投影的功能，相对的是使用View控制，使用map.setView()

import View from 'ol/View';
map.setView(new View({
  center: [0, 0],
  zoom: 2
}));

View还有一个projection（投影）属性，它决定了以center为中心的坐标系统和地图映射分辨率单位。如果没有指定该属性
（像上面的代码段），则会默认为球墨卡托坐标系（EPSG：3857），以米为单位。
zoom选项用来指定地图分辨率非常方便。可缩放等级由maxZoom(默认为28)，zoomFactor(默认为2)，和maxResolution(默认由投影有效范围铺满一个256x256的一个像素瓦片的方法计算获得）。起始缩放等级为0，分辨率为每像素的maxResolution单位，后续的缩放级别计算方法是将前一个缩放级别的分辨率除以zoomFactor，直到缩放级别达到maxZoom。

Source

为了获得layer的远程数据，OpenLayer使用source子类，它们可用于OpenStreetMap或Bing等免费和商业地图瓦片服务，也可用于WMS或WMTS等OGC源，以及GeoJSON或KML等格式的矢量数据。

i

mport OSM from 'ol/source/OSM';
var osmSource = OSM();

Layer
layer是对来自于source的数据的虚拟表示，OpenLayer有4种类型的图层：
ol.layer.Tile(瓦片图层)：呈现以网格形式提供瓦片图像的源文件，网格由缩放级别组织，以获得特定的分辨率。
ol.layer.Image(图像图层)：呈现以任意大小和分辨率提供地图图像的源。
ol.layer.Vector(矢量图层)：呈现矢量数据在客户端。
ol.layer.VerctorTile(矢量瓦片图层)：呈现以矢量瓦片格式提供的数据。

在map上添加layer用map.addLayer()

import TileLayer from 'ol/layer/Tile';
var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);

整体结合

上述代码段可以结合在一块，形成一个script用于渲染一个有单个瓦片图层的地图

import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/source/Tile';

new Map({
  layers: [
    new TileLayer({source: new OSM()})
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  }),
  target: 'map'
});