openlayers 6【二】Map地圖詳解，初始化一個map地圖官方文檔：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

官方文檔：

https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

地圖map是由圖層layers、一個可視化視圖view、用于修改地圖内容的互動interaction以及使用UI元件的控件control組成的。

controls:：最初添加到地圖的控件。如果未指定，

module:ol/control~defaults

則使用。

layers：圖層。如果未定義，則将渲染沒有圖層的地圖。請注意，層是按提供的順序渲染的，是以，例如，如果要使矢量層出現在圖塊層的頂部，則它必須位于圖塊層之後。

target：地圖的容器，元素本身或

id

元素的。如果在構造時未指定，則module:ol/Map~Map#setTarget必須調用渲染地圖。

view：地圖的視圖。除非在構造時或通過指定，否則不會擷取任何層源 module:ol/Map~Map#setView。

1. 效果圖。

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

2.1 npm 安裝 openlayers

cnpm i -S ol
           

 2.2 完整代碼

<template>
    <div id="map"></div>
</template>
<script >
import { defineComponent, onMounted, reactive, toRefs, nextTick, ref } from "vue";
import { Map, View, Feature } from "ol";  // 地圖,視圖
import OSM from "ol/source/OSM";  // 可以了解為資料源,就是一張圖檔  OSM⽡⽚【OSM不能在實際開發中使⽤，因為OSM⾥中國地圖的邊界有點問題】
import TileLayer from 'ol/layer/Tile';    // ⽡⽚渲染⽅法 可以了解為圖層
import 'ol/ol.css'  // 地圖樣式
import { fromLonLat } from "ol/proj"; 

export default defineComponent({
    setup() {
        
        const datas:any = reactive({
            map : {}  // 存放地圖執行個體
            
        })

        // 初始化一個 openlayers 地圖
        let createMap = (()=>{
            datas.map = new Map({
                target: "map", // 對應頁⾯⾥ id 為 map 的元素
                // 配置地圖資料源
                layers: [   // 圖層
                    new TileLayer({
                        source: new OSM() 
                    })
                ],
                //配置地圖顯示的options配置（坐标系，中心點，縮放級别等）
                view: new View({
                    center: fromLonLat([104.912777, 34.730746]), // 地圖中心坐标
                    minZoom: 1, // 地圖縮放最小級别
                    maxZoom: 18, // 地圖縮放最大級别
                    zoom: 4.5, // 地圖縮放級别（打開頁面預設級别） 
                }),
    
            }); 
        })


        onMounted(() => {
            nextTick(()=>{
                // 建立初始化
                createMap()
            })
        });

        return {
            ...toRefs(datas),
        }
    },
    components: {

    },
});
</script>
<style scoped >
    ...
</style>