<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>mapbox 添加 geoserver釋出的wms服務及wms服務屬性查詢</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.js'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 15,
center: [91.10, 29.65]
});
map.on('load', function () {
map.addLayer({
'id': 'wms-test-layer',
'type': 'raster',
'source': {
'type': 'raster',
'tiles': [
'http://192.9.104.68:8080/geoserver/wms/wms?service=WMS&version=1.1.0&request=GetMap&layers=wms:VEGPL&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG%3A900913&format=image%2Fpng&transparent=true'
],
'tileSize': 256
},
'paint': {}
}, 'aeroway-line');
});
map.on("click", function (e) {
const zoom = map.getZoom();
const value = Math.pow(2, 22 - zoom);
console.log(zoom, value);
const {
x,
y
} = e.point;
const {
lng,
lat
} = e.lngLat;
const center = wgs84ToMercator(lng, lat);
const min = [center.x - value, center.y - value];
const max = [center.x + value, center.y + value];
// 查詢WMS要素屬性
axios.get(
`http://192.9.104.68:8080/geoserver/wms/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image/png&TRANSPARENT=true&QUERY_LAYERS=wms:VEGPL&LAYERS=wms:VEGPL&exceptions=application/vnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG:900913&STYLES=&WIDTH=101&HEIGHT=101&BBOX=${min[0]},${min[1]},${max[0]},${max[1]}`
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () { });
});
// 經緯度轉墨卡托
function wgs84ToMercator(lng, lat) {
lng = parseFloat(lng);
lat = parseFloat(lat);
var d = Math.PI / 180,
max = 90,
lat = Math.max(Math.min(max, lat), -max),
sin = Math.sin(lat * d);
var x = 6378137 * lng * d;
var y = 6378137 * Math.log((1 + sin) / (1 - sin)) / 2;
console.log()
return {
x,
y
};
};
</script>
</body>
</html>
mapbox 添加geoserver釋出的wms服務及wms服務屬性查詢 
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)