VUE安装OpenLayers

vue的安装我就不说了，可以查看我的相关文章，下面说一下OpenLayers的安装和配置

一、安装OpenLayers

cnpm i -S ol
#或者
npm install ol

二、修改Router地址路径

1. 进入 router/index.js 修改 import Home from "../views/Home.vue"; 的路径。
2. 将 import Home from "../views/Home.vue"; 修改为 import Home from "../views/MapView.vue";

三、在 views/ 下面创建文件 MapView.vue 并且加入下列代码

<template>
    <div id="mapDiv"></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 {
    mounted() {
        const map = new Map({
            target: "mapDiv",
            layers: [
                new TileLayer({
                    source: new OSM(),
                }),
            ],
            view: new View({
                center: [0, 0],
                zoom: 0,
            }),
        });
    },
};
</script>

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

四、启动项目

npm run serve