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>