<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ol.css">
<script type="text/javascript" src="js/ol.js"></script>
<style type="text/css">
body{
margin: 0px;
}
html,body,#map{height:100%;}
#mapbar{
position : absolute;
right: 15px;
top: 15px;
width:150px;
height:20px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="mapbar"></div>
<script>
/**
* 1、创建基础地图,增加比例尺控件和鹰眼控件
* 2、创建WMS数据源
* 3、创建WMS图层,连接数据源
* 4、将WMS图层添加到地图当中
*/
//1、创建基础地图,增加比例尺控件和鹰眼控件
var map = new ol.Map({
target:"map",
layers:[new ol.layer.Tile({
source:new ol.source.OSM()
})],
view:new ol.View({
center:[0,0],
zoom:3
})
})
var scaleControl = new ol.control.ScaleLine({
target : "mapbar",
units : "metric",
bar : true
});
map.addControl(scaleControl);
var eagleEyeControl = new ol.control.OverviewMap({
collapsed : "true"
});
map.addControl(eagleEyeControl);
//2、创建WMS数据源
var worldSource = new ol.source.ImageWMS({
url : "http://localhost:8080/geoserver/wms",
params:{
"layers":"world"
}
})
//3、创建WMS图层,连接数据源
var provinceLayer = new ol.layer.Image({
source : worldSource
});
//4、将WMS图层添加到地图当中
map.addLayer(provinceLayer);
</script>
</body>
</html>
加载wms
于 2024-01-02 21:13:50 首次发布