使用openlayers在網頁中展示地理資訊

Shoryuken發表於2019-04-29
網頁

使用openlayers在網頁中展示地理資訊

1. 介紹

這裡涉及到幾個基礎的概念，View, Layer, Control, Interaction, Overlay, Source, Projection 這些物件一起構成了Map

1.1 View

View管理Map的檢視引數，縮放zoom, 偏轉rotation, 解析度resolution, 檢視中心center等，也可以對這些引數設定範圍，從而實現對檢視顯示的控制

1.2 Layer

Layer是Map顯示的基本單位，layer從自身的Source獲取資料病將其顯示在Map上，一個Map可以包含多個Layer，可以將這些Layer的資料同時顯示在Map上，從而實現一個各種地理資訊的顯示

上層的Layer會遮蓋下層的Layer

  • Source
    指定layer的資料來源

1.3 Control

openlayers自身包含了一些內建的Map控制元件，像全屏，定位，旋轉的按鈕，通過控制元件可以實現以Map的互動，也可以自定義實現需要功能的控制元件，實現業務需要的互動效果

1.4 Interaction

openlayers預設包含了拖拽，點選等常用的互動行為，如果要定製複雜的互動，可以自定義並註冊到Map中就可以實現

1.5 Overlay

高元件可以將dom節點與地圖座標系位置繫結，將dom顯示在繫結的地理座標，該dom將被openlayer控制顯示

使用openlayers在網頁中展示地理資訊

2. 實踐

實現一個簡單的Map

// 建立貼圖層顯示底圖，這裡使用本地的WMS服務
var imageLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        params: {
            LAYERS: '_all_', // 圖層名稱
            FORMAT: 'image/png', // 圖片格式
            VERSION: '1.1.1' // 服務版本號
        },
        projection: 'EPSG3857', //投影座標系
        url: URL // WMS地址
    });
});
// 建立一個向量圖層，顯示一些向量資料
var vectorLayer = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    style: styleInstance //設定向量資料的顯示樣式
});
// 建立View，設定檢視
var view = new ol.View({
    center: [75, 30], //當前投影座標系下中心點的座標
    zoom: 15 //縮放等級
});
var map = new ol.Map({
    target: 'map_container', // 將地圖掛在到id為map_container的dom上
    view: view,
    layers: [// 圖層順序與列表順序相反
        imageLayer,
        vectorLayer
    ]
});複製程式碼

相關文章