GeoServer

[epoch]OL3调用WMS服务展示地图，服务由epoch发布

by giser · 2019-04-02

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        #map{
            height: 310px;
            width: 512px;
        }
    </style>
    <title>EPOCH WMS测试</title>
    <script src="jq/jquery-1.10.2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">

    <script src="openlayers/ol.js"></script>
</head>
<body>
<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var view;
    var layers;
    layers = [
        new ol.layer.Image({
            //extent: [73.44696044921875,3.408477306365967,135.08583068847656,53.557926177978516],
            source: new ol.source.ImageWMS({
                url: 'http://127.0.0.1:8060/gisserver/wmsserver/china',
                params: {'LAYERS': ''}
            })
        })
    ];
    view =  new ol.View({
                center: [100, 30],
                zoom:20
            });
    var map = new ol.Map({
        layers: layers,
        target: 'map',
        view:view
    });

</script>
</body>
</html>

转载自：https://blog.csdn.net/dakjdfiue/article/details/47656855

相关推荐

Tags: [epoch]OL3调用WMS服务展示地图，服务由epoch发布 geoserver

You may also like...