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();
})