基于vue框架的openlayers学习，加载地图（一）

---

安装ol依赖

提示：我用的是在node环境下的vue的框架，然后使用的开发工具是idea。所以第一个我是直接安装依赖，学过vue的人应该都懂

---

一、创建vue项目

vue create mapBox

二、添加依赖ol

npm i ol -S

1.新建一个vue组件，我的是mapBox.vue

mapBox.vue代码如下：

<template>
    <div id="mapDiv" ref="rootmap"> </div>
</template>
<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import TileLayer from "ol/layer/Tile";
    import OSM from "ol/source/OSM";
    export default {
        name: "mapBox",
        mounted() {
            var mapcontainer = this.$refs.rootmap;
            this.map = new Map({
                target: mapcontainer,

                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                view: new View({       //地图缩放级别
                    projection: "EPSG:4326",    //使用这个坐标系
                    center: [114.064839,22.548857],  //深圳
                    zoom: 15
                })
            });
        }
    }
</script>

<style scoped>
    #mapDiv{
        width: 100%;
        height: 100%;
        position: absolute;
    }
</style>

2.在App.vue加上mapBox.vue组件

App.vue代码：

<template>
  <div id="app">
   <mapBox />
  </div>
</template>
<script>
import MapBox from "./components/mapBox";
export default {
  name: 'App',
  components: {
    MapBox
  }
}
</script>

<style>
  html,body{
height: 100%;
      width: 100%;
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

}
</style>

总结之我遇到的问题

我是刚开始学习vue和openlayers的，然后发现在main.js中不可以通过引用ol，达到全局引用的效果，暂时也还不知道，后续再看。
我的地图不显示，我的mapBox组件成功的加在了app.vue中，控制台也没有报错，但是我的地图还是不显示，后面问了开发群里的同行。是我的位置position:absolute没有的问题，然后我在mapBox.vue中的style设置了position.absolute后，地图就显示了，然后就是这样啦

参考文章:这两个的比较细致

https://blog.youkuaiyun.com/qq_43066675/article/details/108149536
https://blog.youkuaiyun.com/MagicMHD/article/details/104962747