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