mapbox 添加geoserver发布的wms服务及wms服务属性查询

最新推荐文章于 2024-06-12 09:42:25 发布

炉火纯青-旺

最新推荐文章于 2024-06-12 09:42:25 发布

阅读量2.1k

点赞数

分类专栏： geoserver mapbox 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34870529/article/details/106113329

版权

mapbox 同时被 2 个专栏收录

22 篇文章 5 订阅

订阅专栏

geoserver

4 篇文章 0 订阅

订阅专栏

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

炉火纯青-旺

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
mapbox 添加geoserver发布的wms服务及wms服务属性查询

<!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' /> <.
复制链接

扫一扫