笔记：openlayers调用天地图做底图并叠加geoserver发布的图层

Posted 2021-09-01 oooiaaam

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了笔记：openlayers调用天地图做底图并叠加geoserver发布的图层相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="styles/ol.css" />
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="script/ol.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/ol.css" />
    <script type="text/javascript">
        function init() {
            console.log('init');
            var layers = [
                new ol.layer.Tile({
                    title: "天地图路网",
                    source: new ol.source.XYZ({
                        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94b23cf14b33f25fbade47ecacddffb8"
                    })
                })
            ];
            var map = new ol.Map({
                layers: layers,
                target: 'map',
                view: new ol.View({
                    projection: 'EPSG:4326',
                    center: [108.5, 34.05],
                    zoom: 12
                }),
                controls: ol.control.defaults({
                    attributionOptions: {
                        collapsible: false
                    }
                })
            });
    
           
    
            var tian_di_tu_annotation = new ol.layer.Tile({
                title: "天地图文字标注",
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94b23cf14b33f25fbade47ecacddffb8'
                })
            });
            map.addLayer(tian_di_tu_annotation);
    
            var test = new ol.layer.Tile({
                source: new ol.source.TileWMS({
                    url: 'http://localhost:8080/geoserver/shortest/wms',
                    params: {
                        'LAYERS': 'shortest:func_shortpath',//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称  
                        'TILED': false,
                  
                        }
                    },
                    serverType: 'geoserver'    //服务器类型  
                })
            });
            map.addLayer(test);
        }
    </script>
</head>


<body onload='init()'>
    <div style="position: absolute; top: 50px; left: 80px; width: 300px; height: 100px;">
        <div id='map' style='width:1200px;height:500px;'></div>
    </div>
</body>

注意：

注意路径，本人已本地部署过openlayers