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

OpenLayer加载geoserver，OSM，ARCGIS发布地图服务

2018-01-24 15:40 609 查看

说明：发布的地图服务地址可以在geoserver图层OpenLayer预览地址栏中拿到；

arcgis服务地址可以在arcgis server manager中拿到；

地图投影为wgs84；

实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大缩小</title>
<link href="../css/ol.css">
<script src="../js/ol,js.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<div id="map" style="height: 100%;">

</div>
<script>
$(function () {
var geoserverlayer=new  ol.layer.Tile({
visible: true,
source: new ol.source.TileWMS({
url: 'http://localhost:8087/geoserver/ceshi/wms',  //geoserver图层地图
params: {'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'ceshi:demo',  //图层名
}
})
});
var osmlayer=new ol.layer.Tile({
source:new ol.source.OSM()
});
var  arcgisLayer=new ol.layer.Tile({
source:new ol.source.TileArcGISRest({
url:'http://localhost:6080/arcgis/rest/services/itmsdp/MapServer'
})
})
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation:'neu'
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.MousePosition({
className:"ol-mouseposition",
coordinateFormat: ol.coordinate.createStringXY(5)
})
]),
target: 'map',
layers: [
osmlayer,geoserverlayer,arcgisLayer
],
view: new ol.View({
projection: projection,
center: [129.631215,44.590727],    // 定义地图显示中心于经度0度，纬度0度处
zoom: 9           // 并且定义地图显示层级为2
})
});

})

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

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

标签： geoserver OpenLayer arcgis osm

相关文章推荐

新的分享

章节导航