loader:function(extent,resolution,projection){
varurl='/geoserver/wfs?service=WFS&'+
'version=1.1.0&request=GetFeature&typename=osm:water_areas&'+
<style>
.map{
height:400px;
width:100%;
}
</style>
<scriptsrc="/en/v3.7.0/build/ol.js"type="text/javascript"></script>
<title>OpenLayers 3 example</title>
map.addControl(newOpenLayers.Control.OverviewMap());
map.addControl(newOpenLayers.Control.PanZoomBar());
varvlayer=yer.Vector("Editable");
'outputFormat=text/javascript&format_options=callback:loadFeatures'+
'&srsname=EPSG:3857&bbox='+extent.join(',')+',EPSG:3857';
// use jsonp: false to prevent jQuery from adding the "callback" //阻止JQuery自己增加callback函数
})
],
view:newol.View({
center:ol.proj.transform([37.41,8.82],'EPSG:4326','EPSG:3857'),
zoom:4
})
});
</script>
</body>
</html>
放大缩小
<script>
varmap=newol.Map({
layers:[
collapsible:false
})
}),
view:newol.View({
center:[0,0],
zoom:2
})
});
document.getElementById('zoom-out').onclick=function(){
varview=map.getView();
varzoom=view.getZoom();
layers:'clabel,ctylabel,statelabel',
transparent:true
},{
opacity:.5
});
map.addLayers([wms_base,wms_labels]);
map.addControl(yerSwitcher({}));
'Specialty/ESRI_StateCityHighway_USA/MapServer';
varlayers=[
yer.Tile({
source:newol.source.MapQuest({layer:'sat'})
}),
yer.Tile({
ቤተ መጻሕፍቲ ባይዱextent:[-13884991,2870341,-7455066,6338219],
</head>
<body>
<h2>My Map</h2>
<divid="map"class="map"></div>
<scripttype="text/javascript">
varmap=newol.Map({
target:'map',
layers:[
yer.Tile({
source:newol.source.MapQuest({layer:'sat'})
// parameter to the URL
$.ajax({url:url,dataType:'jsonp',jsonp:false});
},
strategy:ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom:19
}))
});
/**
*JSONP WFS callback function.
</head>
<bodyonLoad="init()">
<divid="map_element"style="width:900px;height:900px"></div>
<scripttype="text/javascript">
varmap;
functioninit(){
map=newOpenLayers.Map('map_element',{
source:newol.source.TileArcGISRest({
url:url
})
})
];
varmap=newol.Map({
layers:layers,
target:'map',
view:newol.View({
center:[-10997148,4569099],
zoom:4
})
});
</script>
map.addLayer(vlayer);
map.addControl(newOpenLayers.Control.EditingToolbar(vlayer));
map.addControl(newOpenLayers.Control.PanZoomBar());
if(map.getCenter()){
* @param {Object} response The response object.
*/
window.loadFeatures=function(response){
vectorSource.addFeatures(geojsonFormat.readFeatures(response)); //读取GeoJSON数据response--->geojson--->feature--->map
controls:[]
});
varwms_base=yer.WMS('Base Layer','/wms/vmap0',{
layers:'basic'
},{
isBaseLayer:true
});
varwms_labels=yer.WMS('Location Labels','/wms/vmap0',{
yer.Tile({
source:newol.source.OSM()
})
],
target:'map',
controls:ol.control.defaults({
attributionOptions:/** @type {olx.control.AttributionOptions} */({
一、OL2
1.Control
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>创建一个简单的电子地图</title>
<scripttype="text/javascript"src="/olapi/OpenLayers.js"></script>
WMS
<script>
varlayers=[
yer.Tile({
source:newol.source.TileWMS({
attributions:[newol.Attribution({
html:'© '+
'<a href="http://www.geo.admin.ch/internet/geoportal/'+
map.zoomToMaxExtent();
}
}
</script>
</body>
</html>
二、OL3
/en/v3.7.0/examples/
快速开始
<!doctype html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="/en/v3.7.0/css/ol.css"type="text/css">
view.setZoom(zoom-1);
