OpenLayers中文文档3基本概念Basic Concepts

基本概念Basic Concepts

地图Map

The core component of OpenLayers is the map (from the ol/Map module). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. setTarget().

OpenLayers的核心组件是地图（来自 ol/Map模块）。它被渲染到一个 "目标 "容器（包含地图的网页上的一个 "div "元素：e.g.）。所有的地图属性都可以在构建时配置，或者通过使用setter方法，例如setTarget()。

The markup below could be used to create a <div> that contains your map.

下面的标记可以用来创建一个包含你的地图的div。

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

The script below constructs a map that is rendered in the <div> above, using the map id of the element as a selector.

下面的脚本构建了一个地图，在上面的<div>中呈现，使用元素的mapid作为选择器。

import Map from 'ol/Map.js';
​
const map = new Map({target: 'map'});

视图View

The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a ol/View instance.

地图不负责像中心、缩放级别和地图的投影这样的事情。相反，这些是ol/View实例的属性。

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

A View also has a projection. The projection determines the coordinate system of the center and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.

一个 "视图 "也有一个 “投影”。投影决定了 "中心 "的坐标系和地图分辨率计算的单位。如果没有指定（如上面的片段），默认投影是球面墨卡托（EPSG:3857），地图单位是米。

The zoom option is a convenient way to specify the map resolution. The available zoom levels are determined by maxZoom (default: 28), zoomFactor (default: 2) and maxResolution (default is calculated in such a way that the projection’s validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of maxResolution units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level’s resolution by zoomFactor, until zoom level maxZoom is reached.

缩放 "选项是指定地图分辨率的一种方便方法。可用的缩放级别由maxZoom（默认：28）、zoomFactor（默认：2）和maxResolution（默认的计算方式是投影的有效范围适合256x256像素的瓦片）决定。从缩放级别0开始，每个像素的分辨率为maxResolution单位，随后的缩放级别是通过前一个缩放级别的分辨率除以zoomFactor来计算，直到达到缩放级别maxZoom。

来源Source

To get remote data for a layer, OpenLayers uses ol/source/Source subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.

为了获得一个图层的远程数据，OpenLayers使用ol/source/Source子类。这些子类可用于免费和商业地图瓦片服务，如OpenStreetMap或Bing，用于OGC来源，如WMS或WMTS，以及用于GeoJSON或KML等格式的矢量数据。

import OSM from 'ol/source/OSM.js';
​
const source = OSM();

层数Layer

A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:

一个图层是一个来源的数据的可视化表示。OpenLayers有四种基本类型的层：

• ol/layer/Tile - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.渲染资源，提供网格中的平铺图像，这些网格是按特定分辨率的缩放级别组织的。
• ol/layer/Image - Renders sources that provide map images at arbitrary extents and resolutions.渲染提供任意范围和分辨率的地图图像的来源。
• ol/layer/Vector - Renders vector data client-side.在客户端渲染矢量数据。
• ol/layer/VectorTile - Renders data that is provided as vector tiles.渲染以矢量瓦片形式提供的数据。

import TileLayer from 'ol/layer/Tile.js';
​
// ...
const layer = new TileLayer({source: source});
map.addLayer(layer);

把它们放在一起

[Putting it all together]

The above snippets can be combined into a single script that renders a map with a single tile layer:

上述片段可以组合成一个单独的脚本，用一个瓦片层渲染地图：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
​
new Map({
  layers: [
    new TileLayer({source: new OSM()}),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  target: 'map',
});