前端之js-openlayers4
阿新 • • 發佈:2019-01-24
1.初識openlayers
// 建立地圖 new ol.Map({ // 設定地圖圖層 layers: [ // 建立一個使用Open Street Map地圖源的瓦片圖層 new ol.layer.Tile({source: new ol.source.OSM()}) ], // 設定顯示地圖的檢視 view: new ol.View({ center: [0, 0], // 定義地圖顯示中心於經度0度,緯度0度處 zoom: 2 // 並且定義地圖顯示層級為2 }), // 讓id為map的div作為地圖的容器 target: 'map' }); 地圖主要是由layer和view組成,layer可以有多個,view只能有一個。
2.openlayers 詳解
地圖所有組成部分:
1.Map(地圖) 2.view(檢視) 3.圖層(Layer) 4.資料來源(Source) 5.控制元件(Control) 6.互動(Interaction)
map地圖容器初始化,view控制地圖中心位置,範圍,層級,layer可以有多個圖層,互不干擾,
source資料來源與圖層一一對應密不可分,可以是靜態圖或者瓦片圖;也可以是柵格化的或者向量,
control處於地圖的最上層,用於操控地圖,例如放大縮小,互動(Interaction)用於使用者與地圖間的互動操作
3.openlayers常用方法
ol.proj.transform 座標轉換 ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')就能把EPSG:4326的座標[104.06, 30.67]轉換為EPSG:3857的座標。這裡涉及座標系與投影的概念,這裡簡單介紹一下,OpenLayers 3支援兩種投影,一個是EPSG:4326,等同於WGS84座標系,另一個是EPSG:3857,等同於900913,由Mercator投影而來,經常用於web地圖,一個是全球通用的,一個是web地圖專用的,OpenLayers預設使用的是EPSG:3857,如果需要使用4326 ol.view.projection 來設定 setZoom 設定縮放級別 getView 獲取檢視 getCenter setCenter 設定獲取中心點 ol.Coordinate 獲取座標 ol.map.view.extent: [102, 29, 104, 31] 型別為:[minX, minY, maxX, maxY] 限定地圖範圍 minZoom: 10 設定最小縮小級別 maxZoom: 14 設定最大放大級別
3.深入瞭解openlayers
Source和Layer是一對一的關係,有一個Source,必然需要一個Layer,然後把這個Layer新增到Map上,
歸納起來共三種:ol.source.Tile(瓦片資料來源),ol.source.Image(一整張圖)和ol.source.Vector(向量地圖源),點,線,面等等常用的地圖元素(Feature)都包含在Vector中,程式碼如下
new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/geojson/line-samples.geojson', // 地圖來源
format: new ol.format.GeoJSON() // 解析向量地圖的格式化類
})
})
設定樣式
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
新增圓
var circle = new ol.Feature({
geometry: new ol.geom.Point([0, 0])
});
overlayer 覆蓋物,一般為圖片
var anchor = new ol.Overlay({//定義覆蓋物
element: document.getElementById('anchor')
});
anchor.setPosition([104, 30]);//設定位置
map.addOverlay(anchor);//新增到地圖上
draw 標註點,往往與Interaction一起使用
補充:瓦片就是渲染後的圖片,按照一定的規則結合比例尺切成小的圖片,一種是柵格地圖瓦片,一種是向量地圖瓦片。openlayer 屬於前者,**柵格地圖瓦片**,**優點**:顯示效率高,方便傳輸,**缺點**:佔用伺服器空間,無法完成像旋轉,偽三維等互動顯示功能,資料保密性差,死板,**向量地圖瓦片**,**優點**:極少佔用伺服器空間,可以實現有效的地圖互動顯示功能,可以形成豐富的配色,對於Cartographic,資料保密性強,靈活。 **缺點**:技術成熟度較差,以前的資源不通用