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
最低0.47元/天 解锁文章
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
