A003： openlayers常用的几个数据格式

---

前言

地图构建之后，我们常常需要加载路网、街道、湖泊、河流、标注等数据，通常情况，这些数据会以图层的形式渲染在地图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：光栅；（这个不知道怎么用）

完整代码：

      <template>
  <div class="container">
    <h3>加载OpenStreet地图</h3>
    <div id="vue-openlayers" class="map-x"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import ImageLay from "ol/layer/Image";
import TileLay from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";
import GeoJSON from "ol/format/GeoJSON.js";
import VectorLayer from "ol/layer/Vector";
import ImageWMSource from "ol/source/ImageWMS";
import VectorSource from "ol/source/Vector";
export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      let view = new View({
        projection: "EPSG:3857", //使用这个坐标系，默认为 3857,可以不写
        center: fromLonLat([104.912777, 34.730746]), // 数据格式4326转为3857
        zoom: 4.5, //缩放级别
      });

      this.map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLay({
            source: new OSM(),
          }),
          new ImageLay({
            // 范围
            extent: [-13884991, 2870341, -7455066, 6338219],
            // WMS图片
            source: new ImageWMSource({
              url: "https://ahocevar.com/geoserver/wms",
              params: { LAYERS: "topp:states" },
              ratio: 1,
              // 服务类型
              serverType: "geoserver",
            }),
          }),
          new VectorLayer({
            source: new VectorSource({
              format: new GeoJSON(),
              url: "https://openlayers.org/data/vector/ecoregions.json",
            }),
          }),
        ],
        view: view,
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped>
#vue-openlayers {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
}
h3 {
  line-height: 40px;
}
</style>

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

效果：

三、总结

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