加载（瓦片、矢量）图层

一、瓦片图层

OpenLayers支持从OSM、Bing、MapBox、Stamen和其他任何XYZ瓦片资源中提取地图瓦片并在前端展示。同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务。
OpenLayers也支持矢量切片的访问和展示，包括MapBox矢量切片中的pbf格式，或者GeoJSON格式和TopoJSON格式的矢量切片。
OpenLayers支持OGC制定的WMS、WFS等GIS网络服务规范。

1、OSM

Layer source for the OpenStreetMap tile server.

new ol.layer.Tile({
    title: "OSM",
    source: new ol.source.OSM({
        url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
        // url: "https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png",
    })
})

BingMaps

Layer source for Bing Maps tile data.
申请密钥：http://www.bingmapsportal.com

new ol.layer.Tile({
    title: "BingMaps",
    source: new ol.source.BingMaps({
        key: '', // 输入您的密钥
        imagerySet: 'AerialWithLabels', // ['Aerial','AerialWithLabels','Road','collinsBart','ordnanceSurvey']
    })
})

MapBoxVector

A vector tile layer based on a Mapbox style that uses a single vector source.
申请密钥 https://account.mapbox.com/access-tokens

new ol.layer.MapboxVector({
    styleUrl: 'mapbox://styles/mapbox/bright-v9',
    accessToken: '' // 填入你的token
}),

Stamen

Layer source for the Stamen tile server.

new ol.layer.Tile({
    title: "Stamen",
    source: new ol.source.Stamen({
        layer: 'watercolor',
    })
}),
new ol.layer.Tile({
    title: "Stamen",
    source: new ol.source.Stamen({
        layer: 'terrain-labels',
    })
}),

XYZ Source

Layer source for tile data with URLs in a set XYZ format that are defined in a URL template.
网络地图服务规范使得客户端能够请求的内容具有灵活性，如果没有限制，在实践中，缓存会变得困难甚至不可能实现。另一种情况是，服务器可能只提供固定缩放级别和规律网格的瓦片，这种情况可以概括为 XYZ 资源的瓦片图层——X/Y 代表网格的行与列，Z 代表缩放级别。

new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'
    })
}),

// 其他网络地图服务

// ArcGIS 街道图
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}

// ArcGIS 灰色图
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}

// ArcGIS 深蓝夜色
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}

// 高德 街道
https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

// 高德 影像
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

// MapBox 黑色底图
https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png

OGC 地图服务

WMS

WMS的GetMap接口返回指定范围内的地图，因此可以以图片图层的方式加载，也可以以瓦片地图的方式加载，即可以使用 ol.layer.Image + ol.source.ImageWMS 的方式加载，或者使用ol.layer.Tile + ol.source.TileWMS的方式加载。
- 1、图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。
- 2、切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成标注多次出现的问题。
注：通过设置可以让WMS请求时的范围扩大，减少由于瓦片太小导致的出现在不同瓦片重复动态注记过多问题。但是确定就是请求范围变大后，每次请求耗时变长，并发性降低
https://www.cnblogs.com/naaoveGIS/p/8589204.html
Layer source for tile data from WMS servers.（这里使用GeoServer发布自己的数据后调用

new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://localhost:8081/geoserver/工作区/wms', 
        params: {
            'LAYERS': '图层名', 
            'TILED': true
        },
        serverType: 'geoserver', // 提供服务的服务器类型，如MapServer、GeoServer、QGIS等。
    }),
}),

Source for WMS servers providing single, untiled images.

layers: new ol.layer.Image({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ol.source.ImageWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'topp:states'},
        ratio: 1,
        serverType: 'geoserver',
    }),
}),

view: new ol.View({
    projection: 'EPSG:3857',
    center: [-10884991, 3270341],
    zoom: 4,
})

WMTS

WMTS的GetTile接口返回的就是单张瓦片地图，其调用方式与其他类型的瓦片地图相同。可以使用ol.layer.Tile + ol.source.WMTS加载WMTS
Layer source for tile data from WMTS servers.

const projection = ol.proj.get('EPSG:3857');
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = z;
}

new ol.layer.Tile({
    opacity: 0.7,
    source: new ol.source.WMTS({
        url: 'https://mrdata.usgs.gov/mapcache/wmts',
        layer: 'sgmc2',
        matrixSet: 'GoogleMapsCompatible',
        format: 'image/png',
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds,
        }),
        style: 'default',
        wrapX: true,
    }),
}),

WFS

WFS的GetFeature接口返回GML等格式的矢量地图，可以使用ol.layer.Vector + ol.source.Vector的方式加载。

矢量切片

Layer for vector tile data that is rendered client-side.

new ol.layer.VectorTile({
    declutter: true,
    source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' + 'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
    }),
}),

GeoServer支持矢量切片发布成GeoJson、MapBox Vector Tiles(pbf)、TopoJson三种类型，OpenLayer都提供显示支持。
- GeoJSON ==> ol.format.GeoJSON()
- TopoJSON ==> ol.format.TopoJSON()
- MapBox (pbf) ==> ol.format.MVT()
MVT：由Mapbox提出的一种节省存储空间的矢量瓦片数据编码格式。数据内部采用Google Protocol Buffers进行编码。Web Mercator是其默认的投影方式，Google Tile Scheme是其默认的瓦片编号方式。

二、矢量图层

OpenLayers能够渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据，上面说的矢量切片形式的数据也可以被认为是在矢量图层中渲染。

GeoJSON

全国各省市自治区等范围、边界、层级自动生成GeoJson数据 http://datav.aliyun.com/portal/school/atlas/area_selector

const geojsonObject = {} // 填入geojson

var map = new ol.Map({
    target:'map',
    layers: [
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: new ol.format.GeoJSON().readFeatures(geojsonObject),
            }),
            // source: new ol.source.Vector({
            //    projection: 'EPSG:4326',
            //    url: "/json/bj.geojson",
            //    format: new ol.format.GeoJSON()
            // }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2,
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,0,0.2)',
                }),
            }),    
        })],
    view: new ol.View({
        center: [116.4, 39.9],
        projection: 'EPSG:4326',
        zoom:8,
    }),
    interactions: ol.interaction.defaults().extend([
      new ol.interaction.Select({
          style:new ol.style.Style({
              stroke: new ol.style.Stroke({
                  color: 'blue',
                  width: 4,
              }),
              fill: new ol.style.Fill({
                  color: 'rgba(0,0,255,0.2)',
              }),
          })
      })
  ]),
});

KML

var projection = ol.proj.get('EPSG:3857');
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
                zoom: 7,
                projection: projection,
            })
        });
        var layer = new ol.layer.Tile({
            title: "基础地图",
            source: new ol.source.TileArcGISRest({
                url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
            })
        });
        map.addLayer(layer);

var styles = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(245, 0, 255, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        });  
var vectorSource2 = new ol.source.Vector({
            url: '../data/chengdu.kml',
            format: new ol.format.KML({
                dataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857',
                extractStyles: false //至关重要
            }),
            projection: 'EPSG:3857'
        });
        var kmlLayer = new ol.layer.Vector({
            source: vectorSource2,
            style: styles
        });
map.addLayer(kmlLayer);

三、其他：渲染

html渲染文档有3种方式，一种是使用dom，一种是canvas（2d），一种是webgl。
目前，OpenLayers较OpenLayers3的早期版本（v3.19之前版本），删除了落后的DOM渲染方式，目前提供HTML5标准的Canvas渲染和WebGL渲染两种模式的渲染器。
地图容器（Map）与图层（Layer）的渲染有Canvas、WebGL两种类型，分别由ol.renderer.Map与ol.renderer.Layer实现。
注：declutter: true //设为true时，矢量瓦片渲染模式将会覆盖地图渲染模式