文章目录

前言一、Vector矢量（GeoJSON）二、Image图片（ImageWMS）三、Tile瓦片三、总结

前言

地图构建之后，我们常常需要加载路网、街道、湖泊、河流、标注等数据，通常情况，这些数据会以图层的形式渲染在地图canvas画布上。 OpenLayer中，图层（Layer）根据API方法划分，分为三种类型图层：瓦片图层（Tile）、图片图层(Image)、矢量图层（Vector）。

OpenLayers地图数据通过图层（Layer）进行组织渲染，然后通过数据源（Source）设置具体的地图数据来源。Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把Layer添加到Map上，就可以显示出来。

地图图层（Layer）有Image、Tile、Vector三大类的图层，相对应，地图数据根据数据源（Source）可分为Image、Tile、Vector三大类型的数据源类。

在使用 OpenLayers 进行地理信息系统 (GIS) 开发时，经常需要处理不同格式的数据。OpenLayers 支持多种数据格式以满足不同需求，以下是一些常见的数据格式及其在 OpenLayers 中的应用：

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vector矢量（GeoJSON）

瓦片、图片与矢量相比较，前两个基本就是图片，后者主要是点、线、面等数据集合。

点数据可直接用坐标值描述，每个点是由单独的X,Y坐标定义的。 线数据可用均匀或不均匀间隔的顺序坐标链来描述，线是一系列（至少2个）相连的折点或点的集合。 面状数据（或多边形数据）可用边界线来描述，面是由3个或以上的折点组成的连续封闭图形。

常用的矢量数据格式有GeoJSON、TopoJSON、KML、GML、shapfile等。ol.source.Vector类是矢量数据源基类，为矢量图层ol.layer.Vector类提供具体的数据来源，包括直接组织或读取的矢量数据、远程数据源的矢量数据（即通过url设置数据源路径）。

定义：GeoJSON 是一种基于 JSON 的轻量级地理空间数据交换格式，可以表示各种类型的地理数据结构，包括点、线、多边形等。 GeoJSON 数据获取：阿里云数据可视化平台

OpenLayers 中的应用：

import './style.css';

import Map from 'ol/Map.js';

import GeoJSON from 'ol/format/GeoJSON.js';

import View from 'ol/View.js';

import VectorLayer from 'ol/layer/vector';

import VectorSource from 'ol/source/Vector';

import { transform } from 'ol/proj';

const center = [114.1692, 30.494]; //EPSG:4326

const transformedCenter = transform(center, 'EPSG:4326', 'EPSG:3857');

const view = new View({

center: transformedCenter,

zoom: 10

});

const map = new Map({

target: 'map',

layers: [

new VectorLayer({

source: new VectorSource({

format: new GeoJSON(),

url:'https://openlayers.org/data/vector/ecoregions.json'

})

})

],

view: view

});

效果如下：

二、Image图片（ImageWMS）

可用于任意范围和分辨率的服务器渲染图像 Image图层相比较Tile图层，Image对应的是一整张大图片，而不像瓦片那样很多张小图片，从而无需切片，也可以加载一些地图，适用于一些小场景地图。

图层ol.layer.Image与 数据源ol.source.Image对应： ol.source.Image：Base class for sources providing a single image； ol.source.ImageArcGISRest：支持Arcgis Server的Rest服务图片； ol.source.ImageCanvas：支持添加Canvas图层作为图片；示例 ol.source.ImageMapGuide：支持Mapguide 服务器提供的图片； ol.source.ImageStatic：支持静态图片； ol.source.ImageWMS：支持WMS服务图片； ol.source.Raster：光栅；（这个不知道怎么用）

完整代码：

三、Tile瓦片

对于在网格中提供预渲染平铺图像的图层源，这些网格按特定分辨率的缩放级别组织。 在Web端页面，地图成为一张平面地图，由于既要展示宏观信息，也要展示微观信息，所以对这张地图进行等级切分。 在最高级（zoom=0），信息最少，只用一张256x256像素的一张图片就可以；在下一级（zoom=1），信息量变多，用一张512x512像素的图片表示；以此类推，级别越低的像素越高。对每张图片，我们将其切分为单张256x256图片，称为瓦片（Tile）。 ol.source.Tile最为复杂，因为多个服务提供商，多种标准等诸多原因，导致要支持世界上大多数的瓦片数据，就需要针对这些差异提供不同的Tile数据源支持。

ol.source.Tile：Abstract base class。通常仅用于创建子类，不在应用程序中实例化； ol.source.UrlTile：提供基于http网络，划分为瓦片网格的瓦片基类数据源； ol.source.DataTile：支持数据源为数组类型瓦片数据； ol.source.UTFGrid：支持TileJSON格式加载的UTFGrid交互数据的图层源； ol.source.XYZ：支持各平台，XYZ格式的URL的瓦片数据（谷歌、高德、百度、Arcgis online等服务平台）； ol.source.TileArcGISRest：支持Arcgis Server的Rest服务瓦片； ol.source.OSM：支持 OpenStreetMap； ol.source.BingMaps：支持 必应地图； ol.source.OGCMapTile：支持OGC地图瓦片服务； ol.source.WMTS：支持WMTS数据格式瓦片服务； ol.source.TileWMS：支持WMS数据格式瓦片服务； ol.source.Zoomify：Zoomify格式的瓦片数据的层源（支持Zoomify和Internet Imaging协议）; ol.source.VectorTile：支持矢量瓦片服务；（尽管是矢量，但是还是划入Tile数据源） ol.source.TileJSON：支持TileJSON格式瓦片数据；

示例：

let map = new ol.Map({

target: 'map',

layers: [

new ol.layer.Tile({

// source: new ol.source.OSM()

source: new ol.source.BingMaps({

key: '// Bing Map的key，可以去官网申请',

imagerySet: 'AerialWithLabels' // 指定加载的图层名，还可以替换为'Aerial'或'Road'

})

}),

],

view: new ol.View({

center: [116.39, 39.91],

zoom: 8,

projection:'EPSG:4326'

})

});

效果：

三、总结

OpenLayers图层（Layer）分为三类瓦片（ol.layer.Tile）、图片（ol.layer.Image）、矢量（ol.layer.Vector）；OpenLayers中数据源（Source）为图层（Layer）提供来源数据；OpenLayers中Source和Layer是一对一的关系，有一个Layer，必然需要一个Source；由于不同服务商提供不同数据格式，所以瓦片数据源种类最多； 在GIS中，瓦片主要是图片切片，矢量主要是地理要素的空间坐标与属性信息；