1.调用wms服务
//layers表示请求的图层名称， styles为图层使用的样式名称， CQL_FILTER是字段多滤器 BBOX(wkb_geometry,101,30,102,31)可以用来控制请求指定范围里面的图像
//请求地址url中的ld是命名空间的名称
return new TileLayer({
//extent: [105.259429931641, 28.1478328704834, 110.219795227051, 32.2172889709473],
source: new TileWMS({
url: ‘http://www.xxxx.cn:8001/geoserver/ld/wms?’,
params: {
'VERSION': '1.1.0',
'REQUEST': 'GetMap',
'layers': layerName,
//'CRS':'EPSG:4326'
'CQL_FILTER': 'ldxzdj=\'S\' and 'name'=\'test\' and BBOX(wkb_geometry,101,30,102,31)'，
'styles': sldName
},
crossOrigin: 'anonymous',
//projection:this.projection,
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
//transition: 0
})
});
2.调用wfs服务
//urlFormat()是一个辅助方法，用于将url和参数整合为一个可用的url
//调用wfs服务的时候其实就是使用xhr发送一个post请求，将返回的数据整理转化创建一个图层加载到地图上
addWFS() {
var url = 'https://www.xxx.cn:8001/geoserver/ld/ows';
var urlParm = {
'srsName': 'EPSG:4326',
'service': 'WFS',
'version': '1.0.0',
'request': 'GetFeature',
'typename': 'ld:ld_2019',
'outputFormat': 'application/json',
'CQL_FILTER': `(lxbh=\'xxx\')and(xzqh=\'xxx\')`,//'TBDW LIKE \'xx%\'',//CQL_FILTER与bbox是相互排斥的，当存在CQL_FILTER时,直接将bbox以wkt格式直接添加到CQL_FILTER中
//'sortBy': wfsParm.sortBy,//'crowid'//排序字段
//'startIndex': wfsParm.startIndex,//开始字段
//'maxFeatures': wfsParm.maxCount,//条数
//'propertyName': wfsParm.fields//'the_geom,ldlmlx,ldjsdj'//返回的属性字段
};
var xhr = new XMLHttpRequest();
xhr.open('post', this.urlFormat(url, urlParm),false);
var _this = this;
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var count = JSON.parse(xhr.responseText).totalFeatures;
if(count ==0){
return 0;
}
var features = new GeoJSON().readFeatures(xhr.responseText);
var vectorSource = new VectorSource();
vectorSource.addFeatures(features);
var vectorLayer = new VectorLayer({
source: vectorSource,
style:
function (feature) {
return new Style({
stroke: new Stroke({
color: 'rgba(255,0,0, 1)',
width: 3
})
})
}
});
_this.map.addLayer(vectorLayer);
} else {
console.log("Error", xhr.statusText);
}
}
}
xhr.send();
}
urlFormat(url, params) {
url = url + '?';
for (let property in params) {
if (params.hasOwnProperty(property)) {
url += property + '=' + params[property] + '&';
}
}
url = url.replace(/%/g, "%25");
return url;
}
3.调用geowebcache发布的底图切图服务
//调用geowebcache的底图服务感觉和调用wms服务差不多的方式，但是origin/extent/resolutions这几个值一定要按照切图是设定的参数准确填写，还有请求的url地址也有变化
//当然还有其他很多的参数可以设置比如请求的切图大小，图片格式等。
origin = [-400.0, 399.9999999999998];
extent = [-400.0, 26.67878659144452, 110.86060782223353, 399.9999999999998];
resolutions =[0.010964556314865932, 0.005482278157432966, 0.002741139078716483, 0.0013705695393582415, 6.852847696791208E-4, 3.426423848395604E-4, 1.713211924197802E-4, 8.56605962098901E-5, 4.283029810494505E-5, 2.1415149052472524E-5, 1.0707574526236262E-5];
map:any;
let tileGrid = new TileGrid({
origin: this.origin,
extent: this.extent,
resolutions:this.resolutions
});
let backLayer = [
new TileLayer({
source: new TileWMS({ url: `http://www.xxxx.cn:8001/geoserver/gwc/
service/wms`,
params: {
'VERSION': '1.1.1',
'REQUEST': 'GetMap',
'layers': 'cqmap_wgs84',
'format': 'image/png',
},
projection: 'EPSG:4326',
tileGrid: tileGrid,
crossOrigin: 'anonymous'
})
})
];
let view = new View({
center: [108.05, 29.90],
resolutions: this.resolutions,
//zoom: 1,
resolution:0.010964556314865932,
//minZoom: 7,
//zoom:8,
extent: this.extent,
projection: 'EPSG:4326',
});
this.map = new Map({
controls: defaultControls({
attribution: false,
rotate: false,
zoom: false
}),
layers: backLayer,
view: view,
target: 'map',
});