開源GIS（三）——openlayers地圖基本框架與天地圖載入
阿新 • • 發佈：2018-12-31
目錄
一、引言
換工作中間耽誤了好長時間沒有更過blog了，現在終於有時間搞開源webgis了，先從openlayer下手，後面打算在研究geoserver、postgis、geotool等技術和OGC中WMS、WFS、WCS等標準。搞起==
二、openlayer中map基本框架
首先map包括以上的屬性：
layer是最主要的，它決定了是載入的是什麼型別的圖層，是向量的柵格的還是圖片；
view是檢視，決定了座標系，當前檢視的範圍，這也是為什麼叫view的原因；
controls是控制元件，跟arcgis中的控制元件類似，比例尺、鷹眼、縮放等；
target是與dom中哪個元素相關聯去顯示地圖；
三、載入天地圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/echarts.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="js/ol.css"> <script src="js/ol-debug.js"></script> </head> <body> <div id="map" style="width: 100%"></div> <script> //view var view=new ol.View({ // 設定成都為地圖中心 center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"), zoom: 4 }); //var osm=new ol.layer.Tile({source: new ol.source.OSM()}); // map var map = new ol.Map({ layers: [ getTdtLayer("vec_w"), getTdtLayer("cva_w"), ], view:view, target: 'map' }); function getTdtLayer(lyr) { var urls=[]; for(var i=0;i<8;i++) { urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}") } var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ urls:urls }) }); return layer; } </script> </body> </html>
這個例子主要是新增天地圖web墨卡託的底圖和標註切片兩個圖層，當然也可以把oms圖層的註釋去掉將osm圖層新增到layers中。地圖用的全部是網路地圖，js正確匯入後可以直接執行。
tip：openlayer預設的座標系是3857，web墨卡託投影座標系，所以在view中設定的是經緯度，要從4326轉換到3857座標系，不然的話view會在非洲那邊==
四、總結
- openlayer中map基本框架
- openlayer載入天地圖