openlayers基础（一)——Map
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector
data and markers loaded from any source. OpenLayers has been developed to further the use of
geographic information of all kinds. It is completely free, Open Source JavaScript.
需要注意的是openlayers2（以下簡稱ol）和ol3以上的版本有很大的差異，以最新版5.2.0為例，展開對ol的學習。
為了方便，下載ol 5.2.0,將ol.js和ol.css解壓出來。
首先，引用ol.css和ol.js，因為我們已經下載了ol庫，所以使用ol的本地路徑就行了，如果網絡方便，可以直接在從ol網站獲取。
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">1.Map的創建
首先從一個例子入手：
<!doctype html> <html lang="en"><head><link rel="stylesheet" href="js/ol/ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}</style><script src="js/ol/ol.js"></script><title>OpenLayers example</title></head><body><h2>My Map</h2><div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: ol.proj.fromLonLat([103.73,36.03]),zoom: 8,minZoom:5,maxZoom:12})});</script></body> </html>關于這段代碼：
上面涉及的地圖組成部分有：
- 地圖(Map)，對應的類是ol.Map ， 它就是第一個入口。
- 圖層(Layer)，對應的類是ol.layer，ol5有多種多樣用于不同業務的圖層，每一種圖層在實現上都對應于一個類，放在包ol.layer下面，的ol.layer.Tile就是其中的一種。多個layer可以重疊在一起，相互之間互不干擾。layer相當于一個放置數據的容器，一個Map中可以有0-n個layer，Map類中有一個layers的成員變量并且它適用于此容器，為渲染的地圖提供數據。
- 視圖(View)，對應的類是ol.View， 控制地圖顯示的中心位置，范圍，層級等。一個Map只能有0或1個View。
- 數據源(Source)，它是和圖層一一對應的，ol 5存在多種不同的數據源，每一種在實現上也對應于一個具體的類，它們都放在包ol.source下面，ol.source.OSM就是其中的一種。ol5支持多種多樣在線或離線的數據源；可以是靜態圖或者瓦片圖；也可以是柵格化的或者矢量的。如果你想在地圖上加載某種格式的數據，或者某種服務提供的數據，都可以優先查看一下ol 5是否已經支持了。詳情可以在官網查看Source和Layer。
對比leaflet顯示一個地圖的過程，兩者的代碼確實有比較大的差異，但是其思路是一樣的：
1.創建放置地圖的div；
2.從某個數據源獲得數據創建layer；
3.確定地圖的中心位置，層級；
4.創建map，將數據渲染到網頁中。
2.Map的屬性和方法
2.1 Map的常見屬性
- controls 地圖控件；
- target 地圖容器；
- layers 圖層；
- view 視圖
- overlays 疊加圖層
2.2 Map的常見方法
- add/sControl()添加控件
- addLayer()添加圖層
- addOverlay()添加疊加圖層
- getEventCoordinate（）觸發事件的坐標
- getEventPixel（）觸發事的像素位置
- getTarget()得到Map所有的容器
- getLayers()、getOverlys()、getControls()、getView()
- setView()、setTarget()
- removeLayer()、removeOverlay()、removeControl()
3 Map的事件
- click 點擊事件，雙擊將兩個觸發該事件
- dblclick 雙擊事件
- moveend 地圖被移動后觸發
- movestart 地圖開始移動時觸發
- postrender 地圖被渲染后觸發
- singleclick 單擊事件
監聽地圖事件：on(type,listener)
只監聽一次：once(type,listener)
注銷監聽：un(type,listener)
如果要在上面地圖中實現單擊顯示經緯度功能：
map.on('click',function (e) {var coor=e.coordinatevar lonlat=ol.proj.transform(coor,'EPSG:3857',"EPSG:4326")alert("lon:"+lonlat[0].toFixed(2)+",lat:"+lonlat[1].toFixed(2)); })轉載于:https://www.cnblogs.com/xtfge/p/9949059.html
總結
以上是生活随笔為你收集整理的openlayers基础（一)——Map的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： rsync+shell脚本完成自动化备份
- 下一篇： checkVector()