您的位置：首页 > 运维架构

使用openlayers 3 在线加载天地图及GeoServer发布的地图

2017-09-05 18:31 519 查看

之前试了openlayers2加载天地图，不过公司已经弃用2，所以使用openlayers3来加载天地图卫星图和标注图层，今天又学习了GeoServer发布地图，一并用openlayers测试加载出来，顺便实现了7种地图控件。下面直接贴代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
<link rel="stylesheet" type="text/css" href="css/ol.css"/>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
}
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FF00FF;
position:absolute;
right:20px;
bottom:6px;
z-index:999;
}
.ol-rotate{
right:40px;
}
.ol-scale-line {
left:180px;
}
.ol-zoomslider{
top:120px;
left: 9px;
}
</style>
<script type="text/javascript" src="build/ol.js"></script>
<script type="text/javascript">
var map;
function init(){
//封装底图函数
function getBaseLayer(layername, layer){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
};

//封装标注图层
function getAnnoLayer(layername, layer, visiable){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
};

//天地图图层
var baseLayers = ["vec_w","img_w","ter_w"];
var vecLayer = getBaseLayer("地图",baseLayers[0]);
var imgLayer = getBaseLayer("影像",baseLayers[1]);
var terLayer = getBaseLayer("地形",baseLayers[2]);
var vecAnno = getAnnoLayer("地图标注", "cva_w", true);

//使用GeoServer发布的地图
function getWMSLayer(){
return new ol.layer.Image({
source:new ol.source.ImageWMS({
url:'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'},
serverType: 'geoserver'
})

})
}

//GeoServer中图层范围BBOX范围值
var extent=[-74.047,40.68,-73.908,40.882];

//地图投影类型
var projection=new ol.proj.Projection({
code:'EPSG:4326',
units:'degrees',
extent:extent
});

var geoServerTest=getWMSLayer();

map = new ol.Map({
controls:ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
}) ,
new ol.control.OverviewMap({  }),
new ol.control.Rotate({
autoHide:false
}),
new ol.control.ScaleLine({  }),
new ol.control.ZoomSlider({  }),
new ol.control.ZoomToExtent({  })
]),
view:new ol.View({
projection:projection,
center: ol.extent.getCenter(extent),
minZoom:1,
maxZoom:5,
zoom:1
}),
target: 'map',
layers: [geoServerTest],
});

}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div  id="mouse-position" class="mouse-position-wrapper">
<div class="custom-mouse-position"></div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航