openLayers实战(一)：vue项目中的离线地图引入

最近的项目涉及到离线地图的操作，查阅社区文章，决定使用openLayers+vue+离线地图的方式进行开发，前期基础引入操作完全参考掘金文章，非常优秀全面的文章。

openlayers 实战离线地图 - 掘金

此外，开发过程的地图操作可参考官网的API说明OpenLayers - Welcome，一定要看！

按照掘金文章操作，我这里没遇到问题，后续开发过程中的实际使用会实时记录...

接下来是一些基本概念：转自OpenLayers中文文档3基本概念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);

组合

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',
});