前端学习openLayers配合vue3（简单的创建一个地图）

首先搭建一个vue工程化环境，首先我们先来创建一个地图吧

首先我们需要下载

npm i ol

其次我们需要在main.js里面引入相关的css

import 'ol/ol.css'

到现在我们就可以开始敲击我们的代码了，直接复制就可以展示出一个简单的地图啦，相关备注已经在代码中标注，有什么不懂的可以留言哦

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { XYZ } from "ol/source";
import { fromLonLat } from "ol/proj";
defineProps({
  msg: String,
});
let map = reactive("");
onMounted(() => {
  initMap();
});
let initMap = () => {
  map = new Map({
    target: "map",//挂载视图的容器
    layers: [
      //图层
      new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          wrapX: false,//是否在x方向多次渲染
        }),
      }),
    ],
    //视图两种方式都可以来进行转为我们常用的经纬度
    view: new View({
      // center:[114.305469,30.592876],
      // center: fromLonLat([114.08, 30.59]),//转为经纬度
      zoom: 10,//缩放
      center:[114.305469,30.592876],
      projection:'EPSG:4326'// 经纬度

    }),
  });
};

</script>

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

<style scoped>
.read-the-docs {
  color: #888;
}
#map {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
</style>