ol3 Demo1 ----加載geoserver發布的地圖數據
阿新 • • 發佈：2018-02-19
sheet geos ams cti alt 地圖 投影 switch 5.5
前提：geoserver已經發布數據。
必要條件：導入js庫（下載地址）
下面是效果圖
下面是代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset=‘utf-8‘/> <script src="js/ol.js" type="text/javascript"></script> <script src="ScriptFolder/jquery-1.11.1.js"type="text/javascript"></script> <script src="ScriptFolder/jquery-ui-1.10.4.js" type="text/javascript"></script> <script src="layerswitcher/ol3-layerswitcher.js" type="text/javascript"></script> <link href="css/ol.css" rel="stylesheet" type="text/css" /> <link href="layerswitcher/ol3-layerswitcher.css" rel="stylesheet" type="text/css" /> <link href="StyleFolder/dot-luv/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="StyleFolder/dot-luv/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #map { width: 70%; height: 80%; border: darkslategrey solid 3px; } </style> <script type="text/javascript"> var map; //地圖 var vietnam; //越南圖層 var strFromProj = "EPSG:4326", strToProj = "EPSG:3857"; //投影 vietnam = new ol.layer.Tile({ title:‘越南行政底圖‘, type:‘base‘, source: new ol.source.TileWMS({ url: "http://******/geoserver/vietnam/wms?", params: { "LAYERS": "vietnam:VNM_adm2" } }) }); //初始化地圖 function initMap() { map = new ol.Map({ target: "map", layers: [vietnam], view: new ol.View({ center: ol.proj.transform([105.5, 15.5], strFromProj, strToProj), zoom: 5 }) }); var layerSwitcher = new ol.control.LayerSwitcher({ tipLabel: ‘Légende‘ }); map.addControl(layerSwitcher); } // 初始化界面 function initUI() { } $(function () { initMap(); initUI(); }); </script> </head> <body> <div id="map"></div> </body> </html>
核心代碼：
ol3 Demo1 ----加載geoserver發布的地圖數據