1. 程式人生 > >使用openlayers 3 線上載入天地圖及GeoServer釋出的地圖

使用openlayers 3 線上載入天地圖及GeoServer釋出的地圖

        之前試了openlayers2載入天地圖,不過公司已經棄用2,所以使用openlayers3來載入天地圖衛星圖和標註圖層,今天又學習了GeoServer釋出地圖,一併用openlayers測試加載出來,順便實現了7種地圖控制元件。下面直接貼程式碼:
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
<meta name="apple-mobile-web-app-capable" content="yes">  
<title>OpenLayers MapQuest Demo</title>  
    <link rel="stylesheet" type="text/css" href="css/ol.css"/>  
    <style type="text/css">  
        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;
		  }
    </style>  
    <script type="text/javascript" src="build/ol.js"></script>  
    <script type="text/javascript">  
        var map;  
        function init(){  
        	//封裝底圖函式
            function getBaseLayer(layername, layer){  
                return new ol.layer.Tile({ 
                     title:layername,  
                     source:new ol.source.XYZ({
                     	url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}" 
                     })   
                });  
            };  
            
            //封裝標註圖層
            function getAnnoLayer(layername, layer, visiable){  
                return new ol.layer.Tile({   
                     title:layername,  
                     source:new ol.source.XYZ({  
                      url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
                     })
                });  
            };  
            
            //天地圖圖層
            var baseLayers = ["vec_w","img_w","ter_w"];  
            var vecLayer = getBaseLayer("地圖",baseLayers[0]);  
            var imgLayer = getBaseLayer("影像",baseLayers[1]);  
            var terLayer = getBaseLayer("地形",baseLayers[2]);  
            var vecAnno = getAnnoLayer("地圖標註", "cva_w", true); 
            
            //使用GeoServer釋出的地圖
            function getWMSLayer(){
            	return new ol.layer.Image({
            		source:new ol.source.ImageWMS({
            			url:'http://localhost:8080/geoserver/wms',  
			            params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'},  
			            serverType: 'geoserver'  
            		})
            		
            	})
            }
            
            //GeoServer中圖層範圍BBOX範圍值
  			var extent=[-74.047,40.68,-73.908,40.882];  
  			
  			//地圖投影型別 
  			var projection=new ol.proj.Projection({ 
	          	code:'EPSG:4326',  
	         	units:'degrees',  
	          	extent:extent  
      		});  
  			
            var geoServerTest=getWMSLayer();
  
            map = new ol.Map({  
            	controls:ol.control.defaults().extend([
            		new ol.control.FullScreen(),
			        new ol.control.MousePosition({
			            coordinateFormat: ol.coordinate.createStringXY(4),
			            projection: 'EPSG:4326',
			            className: 'custom-mouse-position',
			            target: document.getElementById('mouse-position')
			        }) ,
			        new ol.control.OverviewMap({  }),
			        new ol.control.Rotate({ 
			            autoHide:false
			        }),
			        new ol.control.ScaleLine({  }),
			        new ol.control.ZoomSlider({  }),
			        new ol.control.ZoomToExtent({  })
            	]),
            	view:new ol.View({
	            	projection:projection,
	            	center: ol.extent.getCenter(extent),
	            	minZoom:1,
	            	maxZoom:5,
	            	zoom:1
            	}),
                target: 'map', 
                layers: [geoServerTest],  
            });  
            
        }  
    </script>  
</head>  
<body onload="init()">  
    <div id="map"></div>  
    <div  id="mouse-position" class="mouse-position-wrapper">
    <div class="custom-mouse-position"></div>
</div>
</body>