使用openlayers 3 線上載入天地圖及GeoServer釋出的地圖
阿新 • • 發佈：2019-01-02
之前試了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>