基于OpenLayers的多种地图服务（WMS WMTS WFS VectorTile）加载

本文基于OpenLayers列举了常用地图服务的加载方式demo，便于参考使用。值得注意的是，本文实例并未考虑到所有变量参数，如有需要具体可参考官网API：https://openlayers.org/en/latest/apidoc/

加载WMS （TileWMS）

//定义源
let mySource: {
    
    
      url: '服务地址',
      params: {
    
     LAYERS: '图层名'; TILED: 'true or false' };
      projectName: 'EPSG:4326',
    };
//定义投影
let projection = get(mySource.projectName);

//新建图层
let layer = new TileLayer({
    
    
        extent: projection.getExtent(),
        source: mySource,
      });
      
//map为openlayers:Map
map.addLayer(layer);

加载WMS （ImageWMS）

let mySource = new ImageWMS({
    
    
        url: '服务地址',
        params: {
    
    
          LAYERS: '图层名'
          TILED: false,
          VERSION: '1.1.0',
          SRS: 'EPSG:4326',
        },
        serverType: 'geoserver', //服务器类型
      });

let layer = new Image({
    
    
        source: mySource,
      });

map.addLayer(layer);

加载WMTS

let mySource: {
    
    
            url: '服务地址',
            layer: '图层名',
            matrixSet: 'matrixSet 具体查阅官网api',
            format: 'format 具体查阅官网api',
            projectName: 'EPSG:4326';
            tileGrid:WMTSTileGrid,
            version?: '1.0.0',
            style: 'default',
            wrapX?: true,
        };
//参数处理
const projectionExtent = mySource.projectName.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(18);
const matrixIds = new Array(18);
const origin = getTopLeft(projection.getExtent());

for (let z = 0; z < 18; ++z) {
    
    
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = z;
    }

mySource.tileGrid = new WMTSTileGrid({
    
    
      origin: origin,
      resolutions: resolutions,
      matrixIds: matrixIds,
    });
//定义源
let _source = new WMTS(mySource);
let layer = new TileLayer({
    
    
      source: _source,
    });

map.addLayer(layer);

加载WFS

let myUrl:string='服务地址' 
let layerName:string='图层名' 
let format:string='application/json'
let projection:string='EPSG:4326'

let mySource = new VectorSource({
    
    
      format: new GeoJSON(),
      url: function (extent) {
    
    
        return (
          myUrl +
          '?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=' +
          layerName +
          '&outputFormat=' +
          format
          + '&srsname=' + projection
        );
      }, 
      strategy: bbox,
    });

let layer = new VectorLayer({
    
    
      source: mySource,
    });
    
map.addLayer(layer);

加载VectorTile

let mySource = new VectorTileSource({
    
    
      format: new MVT(),
      url: '服务地址',
    });
let layer = new VectorTileLayer({
    
    
      source: mySource,
    });
map.addLayer(layer);