基于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.csdn.net/qq_43066675/article/details/108149536
https://blog.csdn.net/MagicMHD/article/details/104962747