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

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;

}

varmap;functioninit(){//封装底图函数

functiongetBaseLayer(layername, layer){return newol.layer.Tile({

title:layername,

source:newol.source.XYZ({

url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"})

});

};//封装标注图层

functiongetAnnoLayer(layername, layer, visiable){return newol.layer.Tile({

title:layername,

source:newol.source.XYZ({

url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"})

});

};//天地图图层

varbaseLayers=["vec_w","img_w","ter_w"];varvecLayer=getBaseLayer("地图",baseLayers[0]);varimgLayer=getBaseLayer("影像",baseLayers[1]);varterLayer=getBaseLayer("地形",baseLayers[2]);varvecAnno=getAnnoLayer("地图标注","cva_w",true);//使用GeoServer发布的地图

functiongetWMSLayer(){return newol.layer.Image({

source:newol.source.ImageWMS({

url:'http://localhost:8080/geoserver/wms',

params: {'LAYERS':'topp:testpoly_landmarks','VERSION':'1.1.1'},

serverType:'geoserver'})

})

}//GeoServer中图层范围BBOX范围值

varextent=[-74.047,40.68,-73.908,40.882];//地图投影类型

varprojection=newol.proj.Projection({

code:'EPSG:4326',

units:'degrees',

extent:extent

});vargeoServerTest=getWMSLayer();

map= newol.Map({

controls:ol.control.defaults().extend([newol.control.FullScreen(),newol.control.MousePosition({

coordinateFormat: ol.coordinate.createStringXY(4),

projection:'EPSG:4326',

className:'custom-mouse-position',

target: document.getElementById('mouse-position')

}) ,newol.control.OverviewMap({ }),newol.control.Rotate({

autoHide:false}),newol.control.ScaleLine({ }),newol.control.ZoomSlider({ }),newol.control.ZoomToExtent({ })

]),

view:newol.View({

projection:projection,

center: ol.extent.getCenter(extent),

minZoom:1,

maxZoom:5,

zoom:1}),

target:'map',

layers: [geoServerTest],

});

}