openlayers 3加载MapServer示例子

最新推荐文章于 2024-12-07 09:25:29 发布

转载最新推荐文章于 2024-12-07 09:25:29 发布 · 1k 阅读

openLayers 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用OpenLayers3加载MapServer地图服务，通过示例代码展示了如何配置TileWMS源，并将其与OSM底图叠加显示。代码中详细说明了参数设置，包括服务URL、图层名、地图文件路径等。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>openlayers 3加载MapServer示例子</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style type="text/css">
    #map {
        width: 100%;
        height: 600px;
    }
    </style>
</head>
 
<body>
    <div id="map"></div>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
    <script type="text/javascript">
    var layers = [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://localhost:8068/VSpaceDataServices/GetVgsData/GetOgcServerData/World_region?request=GetCapabilities&Version=1.3.0&Service=WMS',
                params: {
                    'layers': 'World_region',
                    'MAP': "F:/mapserverData/World_region.map",
                    'TILED': true
                },
                serverType: 'mapserver',
            })
        })
    ];
    var map = new ol.Map({
        target: 'map',
        layers: layers,
        view: new ol.View({
            center: ol.proj.fromLonLat([104, 30]),
            zoom: 2,
            projection: 'EPSG:3857'
        })
    });
    </script>
</body>
</html>