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

最新推荐文章于 2024-08-13 17:07:49 发布

weixin_34228387

最新推荐文章于 2024-08-13 17:07:49 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaoyanhaoBlog/p/9149404.html

版权

使用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>