OpenLayers3应用
2015年6月17日
1 使用WEB服务
1.1 显示OpenStreetMap
示例:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.6.0/css/ol.css"type="text/css">
<style>
.map2{height:400px;width:100%;}
</style>
<scriptsrc="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>
<title>testOpenLayers</title>
</head>
<body>
<h2>Head Test OpenLayers</h2>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoomin</button>
<div id="map2"class="map2">Map</div>
<script type="text/javascript">
var attribution = new ol.control.Attribution({
collapsible:true
});
var tileAttr=new ol.Attribution({
html: 'All maps © ' + '<ahref="http://www.localhost:8080/">MyTest GeoServer</a>'
});
map=new ol.Map
({
target:'map2',
controls: ol.control.defaults({ attribution: false}).extend([attribution]),
layers:[
new ol.layer.Tile({source:newol.source.OSM()}),//openstreetmap tms
newol.layer.Tile({//tiledebug grid
source:new ol.source.TileDebug({
projection:'EPSG:3857',
tileGrid:ol.tilegrid.createXYZ({maxZoom: 22})})}),
new ol.layer.Tile({source:newol.source.XYZ({//geoserver local tms
attributions:[tileAttr],
projection:ol.proj.get('EPSG:3857'),
url:'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testShp%3Astates3857@testTms3857@png/{z}/{x}/{-y}.png'
}),
opacity: 0.5
})],
view:new ol.View
({
center:ol.proj.transform([-98,40],'EPSG:4326','EPSG:3857'),
zoom:3
})
})
document.getElementById('zoom-out').onclick = function() {
var view =map.getView();
var zoom =view.getZoom();
view.setZoom(zoom- 1);
};
document.getElementById('zoom-in').onclick = function() {
var view =map.getView();
var zoom =view.getZoom();
view.setZoom(zoom+ 1);
};
</script>
</body>
</html>
1.2 显示MapQuest服务
参考:官网示例http://openlayers.org/en/v3.6.0/doc/quickstart.html。
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.6.0/css/ol.css"type="text/css">
<style>
.map2{height:400px;width:100%;}
</style>
<script src="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>
<title>testOpenLayers</title>
</head>
<body>
<h2>Head Test OpenLayers</h2>
<div id="map2"class="map2">Map</div>
<script type="text/javascript">
map=new ol.Map
({
target:'map2',
layers:[new ol.layer.Tile({source:newol.source.MapQuest({layer:'osm'})})],
view:new ol.View
({
center:ol.proj.transform([-116,38],'EPSG:4326','EPSG:3857'),
zoom:4
})
})
</script>
</body>
</html>
1.3 显示WMS
参考:wms-image.html示例。
WMS服务参见:GeoServer.docx
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.6.0/css/ol.css"type="text/css">
<style>
.map2{height:400px;width:100%;}
</style>
<script src="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>
<title>testOpenLayers</title>
</head>
<body>
<h2>Head Test OpenLayers</h2>
<div id="map2"class="map2">Map</div>
<script type="text/javascript">
map=new ol.Map
({
target:'map2',
layers:[new ol.layer.Image({source:newol.source.ImageWMS({
url:'http://localhost:8080/geoserver/testShp/wms',
params: {'LAYERS':'states'},
serverType:'geoserver'
})
})],
view:new ol.View
({
center:ol.proj.transform([-116,38],'EPSG:4326','EPSG:3857'),
zoom:4
})
})
</script>
</body>
</html>
1.4 显示WMTS?
1.5 显示TMS
找到TMS的服务地址,使用level/x/y.format进行替换。
参考:xyz.html示例。
WMS服务参见:GeoServer.docx
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.6.0/css/ol.css"type="text/css">
<style>
.map2{height:400px;width:100%;}
</style>
<scriptsrc="http://openlayers.org/en/v3.6.0/build/ol.js" type="text/javascript"></script>
<title>testOpenLayers</title>
</head>
<body>
<h2>Head Test OpenLayers</h2>
<div id="map2"class="map2">Map</div>
<script type="text/javascript">
map=new ol.Map
({
target:'map2',
layers:[
new ol.layer.Tile({source:newol.source.XYZ({
projection:ol.proj.get('EPSG:3857'),
url:'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testShp%3Astates@testTms@png/{z}/{x}/{-y}.png'
}),
opacity: 0.5
})],
view:new ol.View
({
center:ol.proj.transform([-98,40],'EPSG:4326','EPSG:3857'),
zoom:3
})
})
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
1.6 显示调试TMS的瓦片编号
参考:canvas-tile.html
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.6.0/css/ol.css"type="text/css">
<style>
.map2{height:400px;width:100%;}
</style>
<scriptsrc="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>
<title>testOpenLayers</title>
</head>
<body>
<h2>Head Test OpenLayers</h2>
<div id="map2"class="map2">Map</div>
<script type="text/javascript">
map=new ol.Map
({
target:'map2',
layers:[
new ol.layer.Tile({
source:new ol.source.TileDebug({
projection:'EPSG:3857',
tileGrid:ol.tilegrid.createXYZ({maxZoom: 22})})}),
new ol.layer.Tile({source:new ol.source.XYZ({
projection:ol.proj.get('EPSG:3857'),
url:'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testShp%3Astates@testTms@png/{z}/{x}/{-y}.png'
}),
opacity: 0.5
})],
view:new ol.View
({
center:ol.proj.transform([-98,40],'EPSG:4326','EPSG:3857'),
zoom:3
})
})
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
1.7 显示WFS
目标:请求WFS的矢量元素,并显示在页面。
方法:
1.7.1WFS请求
1) 在geoserver的web.xml中启用jsonp(参见:..\Net\javascript.docx)(参见:GeoServer.docx)。。
2) 构造WFS的JSONP请求:
格式:wfs地址+服务信息+请求信息+输出信息。
wfs地址:http://服务器IP:PORT/geoserver[/工作空间[/图层名]]/WFS。
服务信息:包括服务类型和版本号,格式:service=WFS&version=1.1.0
请求信息:包括请求功能,请求图层,图层SRS和请求范围bbox。格式:request=GetFeature&typename=testShp:states3857&srsname=EPSG:3857&bbox=xMin,yMin,xMax,yMax,SRSName。
输出信息:包括输出格式(jsonp必须使用text/javascript)和其它参数(一般是回调函数的名字)。格式:outputFormat=text/javascript&format_options=callback:loadFeatures。
示例:
3) 测试:在浏览器测试WFS的请求,得到相应的输出。
结果:调用以结果Feat