openlayers 3加载MapServer示例子

最新推荐文章于 2024-02-21 16:38:25 发布

绛门人

最新推荐文章于 2024-02-21 16:38:25 发布

阅读量1k

点赞数

分类专栏： openLayers

openLayers 专栏收录该内容

14 篇文章

订阅专栏

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