本文基于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);