openlayers 6【二】Map地圖詳解，初始化一個map地圖

目錄

1. map 參數詳情參考

2. 話不多說，先看渲染出來的效果​

2. 在vue環境下，創建一個Map地圖

3. 代碼分析

4. 說在後面

---

1. map 參數詳情參考

官方文檔：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

• layers 瞭解更多
• view 瞭解更多

controls	module：ol / Collection〜Collection。< 模塊：ol / control / Control〜Control > | Array。< 模塊：ol / control / Control〜Control >	最初添加到地圖的控件。如果未指定， module:ol/control~defaults則使用。
pixelRatio	數字 （默認爲window.devicePixelRatio）	設備上物理像素與設備無關像素（dip）之間的比率。
interactions	module：ol / Collection〜Collection。< module：ol / interaction / Interaction〜Interaction > | Array。< 模塊：ol / interaction / Interaction〜Interaction >	最初添加到地圖的互動。如果未指定， module:ol/interaction~defaults則使用。
keyboardEventTarget	HTMLElement | 文件 | 串	監聽鍵盤事件的元素。這決定了KeyboardPan和 KeyboardZoom互動的觸發時間。例如，如果將此選項設置爲 document鍵盤，則交互將始終觸發。如果未指定此選項，則庫在其上偵聽鍵盤事件的元素是地圖目標（即用戶爲地圖提供的div）。如果不是 document，則需要集中目標元素以發射關鍵事件，這要求目標元素具有tabindex屬性。
layers	Array。< 模塊：ol / layer / Base〜BaseLayer > | module：ol / Collection〜Collection。< module：ol / layer / Base〜BaseLayer > | 模塊：ol / layer / Group〜LayerGroup	圖層。如果未定義，則將渲染沒有圖層的地圖。請注意，層是按提供的順序渲染的，因此，例如，如果要使矢量層出現在圖塊層的頂部，則它必須位於圖塊層之後。
maxTilesLoading	數字 （默認爲16）	同時加載的最大瓦片數。
moveTolerance	數字 （默認爲1）	光標必須移動的最小距離（以像素爲單位）才能被檢測爲地圖移動事件，而不是單擊。增大此值可以使單擊地圖更容易。
overlays	module：ol / Collection〜Collection。< module：ol / Overlay〜Overlay > | Array。< module：ol / Overlay〜Overlay >	疊加層最初添加到地圖中。默認情況下，不添加任何覆蓋。
target	HTMLElement | 串	地圖的容器，元素本身或id元素的。如果在構造時未指定，則module:ol/Map~Map#setTarget必須調用渲染地圖。
view	模塊：ol / View〜View	地圖的視圖。除非在構造時或通過指定，否則不會獲取任何層源 module:ol/Map~Map#setView。

 

場景：爲了方便我們在瀏覽器中實現可交互的操作，基於一些政府單位工作場景，常常會涉及到對地理地圖需求的項目。我們已此爲依託，使用OpenLayers便是一個減輕你的工作量的框架，利用它可以輕鬆地加載一幅動態可交互的地圖到瀏覽器中！達到可交換的功能。

下面便是一個利用OpenLayers加載地圖的小例子，我們先看看運行結果，並分析一下原理！

2. 話不多說，先看渲染出來的效果​

2. 在vue環境下，創建一個Map地圖

2.1 npm 安裝 openlayers

cnpm i -S ol

2.2 完整代碼

<template>
    <div id="content">
        <div id="map" ref="map"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";

export default {
    name: "tree",
    data() {
        return {
            map: null
        };
    },
    methods: {
        /**
         * 初始化一個 openlayers 地圖
         */
        initMap() {
            let target = "map"; //跟頁面元素的 id 綁定來進行渲染
            let tileLayer = [
                new Tile({
                    source: new OSM()
                })
            ];
            let view = new View({
                center: fromLonLat([104.912777, 34.730746]), //地圖中心座標
                zoom: 4.5 //縮放級別
            });
            this.map = new Map({
                target: target, //綁定dom元素進行渲染
                layers: tileLayer, //配置地圖數據源
                view: view //配置地圖顯示的options配置（座標系，中心點，縮放級別等）
            });
        }
    },
    mounted() {
        this.initMap();
    }
};
</script>
<style lang="scss" scoped>
// 非核心已刪除
</style>

 

3. 代碼分析

3.1 首先頁面需要先創建一個 div，用來綁定 map 地圖上

<div id="map" ref="map"></div>

3.2 下面是一個初始化地圖的方法

/**
 * 初始化一個 openlayers 地圖
 */
initMap() {
    let target = "map"; //跟頁面元素的 id 綁定來進行渲染
    let tileLayer = [
        new Tile({
            source: new OSM()
        })
    ];
    let view = new View({
        center: fromLonLat([104.912777, 34.730746]), //地圖中心座標
        zoom: 4.5 //縮放級別
    });
    this.map = new Map({
        target: target, //綁定dom元素進行渲染
        layers: tileLayer, //配置地圖數據源
        view: view //配置地圖顯示的options配置（座標系，中心點，縮放級別等）
    });
}

 

我們可以看到，前面的聲明瞭三個變量分別是 容器（target），圖層（tileLayer），view（視圖）。通過實例化了一個OpenLayers的Map對象，於是就顯示了地圖！Map是何許人也？它是OpenLayers中最主要的對象！要初始化一幅地圖，需要一個target，view，layers。

• target 主要是用來跟頁面的元素進行綁定顯示
• tileLayer 我們看到，他其實是一個數組形式，那就說明它可以存在多個圖層，這也是openlayers強大之處，非常實用。通過new Tile() 創建了一個圖層，但是單單創建圖層也是不行，圖層裏面必須要有數據，於是就有了 source: new OSM() 創建了一個OpenStreetMap提供的切片數據
• view 同理，通過new View() 創建了一個視圖對象，設置一些視區的參數，
  • center 設置默認地圖中心點位置 ，fromLonLat 函數是將給定的座標從4326轉到3857座標系下，4326即是WGS84座標系！（後面單獨講解 4326 和3857 座標系的區別）
  • zoom  設置縮放等級

4. 說在後面

最後，地圖已經成功加載到網頁中，並且可以進行縮放，平移及拖動操作（map默認此功能），想實現更多功能後面再寫哈。