我想使用一个很长的CQL_FILTER在我的WMS层与谷歌地图javascript。所以，我发现如何使WMS POST请求与OpenLayers(在这里[https://stackoverflow.com/questions/29826627/how-to-make-ol-source-imagewms-send-post-request])。
我想用谷歌地图api做同样的事情，所以我使用ImageMapType和函数来做我发现的POST请求。使用getTileUrl参数的函数，我认为通过返回这个函数的图像，像OpenLayers, ImageMapType在我的地图上显示图像，但它没有。
这是代码，你知道如果我在某个地方错了，或者如果ImageMapType只接受来自geoserver的URL，并且它不能读取本地URL，例如base64。因此，是否有可能通过POST请求或我必须使用openlayers与谷歌地图api做一个很长的CQL_FILTER ?
真
<!DOCTYPE html>
<html>
<head>
<title>WMS and Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];
function xyzToBounds(x, y, z) {
var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
var minx = EXTENT[0] + x * tileSize;
var maxx = EXTENT[0] + (x + 1) * tileSize;
// remember y origin starts at top
var miny = EXTENT[1] - (y + 1) * tileSize;
var maxy = EXTENT[1] - y * tileSize;
return [minx, miny, maxx, maxy];
}
var getTileUrl = function (coordinates, zoom) {
src = "http://localhost:8080/geoserver/demo/ows?" +
"&REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0" +
"&LAYERS=demo:city" +
"&FORMAT=image/png&TRANSPARENT=true" +
"&BUFFER=40" +
"&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
"&BBOX=" + xyzToBounds(coordinates.x, coordinates.y, zoom).join(",") +
"&CQL_FILTER= Ville IN ('ST VULBAS','IZERNORE')"
var img = new Image();
if (typeof window.btoa === 'function') {
var xhr = new XMLHttpRequest();
//console.log("src", src);
//**GET ALL THE PARAMETERS OUT OF THE SOURCE URL**
var dataEntries = src.split("&");
var url;
var params = "";
for (var i = 0; i < dataEntries.length; i++) {
//console.log("dataEntries[i]", dataEntries[i]);
if (i === 0) {
url = dataEntries[i];
}
else {
params = params + "&" + dataEntries[i];
}
}
//console.log("params", params);
xhr.open('POST', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (this.status === 200) {
//console.log("this.response", this.response);
var uInt8Array = new Uint8Array(this.response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var type = xhr.getResponseHeader('content-type');
if (type.indexOf('image') === 0) {
img.src = 'data:' + type + ';base64,' + window.btoa(data);
img.width = img.height = 256;
console.log(img);
return img;
}
}
};
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
} else {
console.log(src);
return src;
}
}
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: { lat: 47.09, lng: 2.59 }
});
var overlay = new google.maps.ImageMapType({
getTileUrl: getTileUrl,
name: "City",
minZoom: 0,
maxZoom: 19,
opacity: 1.0
});
map.overlayMapTypes.push(overlay);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
</body>
</html>
使用https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs.
if (type.indexOf('image') === 0) {
return 'data:' + type + ';base64,' + window.btoa(data);
} else {
// handle error case
}