使用openlayers 3 在线加载天地图及GeoServer发布的地图
Posted SWEETFAN
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用openlayers 3 在线加载天地图及GeoServer发布的地图相关的知识,希望对你有一定的参考价值。
使用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>
以上是关于使用openlayers 3 在线加载天地图及GeoServer发布的地图的主要内容,如果未能解决你的问题,请参考以下文章