使用OpenLayers库展示高德瓦片地图

1.安装OpenLayers库

npm i -s ol

2.使用ol库

在src目录下新建hooks文件夹，创建useMap.js文件

import {Map,View} from 'ol';
import * as olProj from 'ol/proj'
import  TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ';
 
 
 
 
var gaoDeMapLayer = new TileLayer({
    //数据来源
    source : new XYZ({
        url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    })
});
 
 
 
 
export default function(){
//创建地图实例
    const gaoDeMap = new Map({
       // 图层
        layers : [
            gaoDeMapLayer,
        ],
        view : new View({
// 手动设置展示的地图的中心点  这里应该是滁州
            center : olProj.fromLonLat([118.3061,32.274]),
            zoom : 8,
            minZoom : 0,
            maxZoom : 13,
        }),
        target : 'map' 显示的容器的id选择器
    })   
    return {gaoDeMap}
}

3.调用useMap.js文件展示地图

在views文件中新建vue组件，其中地图展示在id为 useMap.js文件中 target的属性值的标签中

<el-main style="padding : 0px;">
        <div id="map" class="home-map"></div>
      </el-main>

<script setup>
import useMap from '../hooks/useMap'
import { ref , onMounted } from 'vue'
 
let gaoDeMap = ref(null)
// 渲染地图
onMounted(() =>{
    gaoDeMap = useMap();
})

4.大功告成