<!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>