openlayers学习教程01：创建地图

MapMixin.js文件

import "ol/ol.css";
import {Map, View} from "ol";
import {TileArcGISRest} from "ol/source";
import {Tile as TileLayer} from "ol/layer";

export default {
    name: "MapView",
    data() {
        return {
            map: null,
        }
    },
    methods: {

        /***
         * 初始化地图
         */
        async initMap() {
            this.map = new Map({
                target: this.$refs.map,
                layers: [
                    //中国蓝黑底图
                    new TileLayer({
                        source: new TileArcGISRest({
                            url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
                        })
                    }),
                ],
                //视图
                view: new View({
                    center: [105.42491875, 25.321520214843755],
                    zoom: 9,
                    projection: 'EPSG:4326',
                })
            });
        },

    }
}

index.vue文件

<template>
    <div >
        <div class="map" ref="map">

        </div>
    </div>
</template>

<script>
    import MapMixin from "../components/mixin/MapMixin";
    export default {
        mixins: [MapMixin],
        name: "Index",
        data() {
            return {}
        },
        async mounted() {
            //初始化地图
            await this.initMap();
        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
    .map {
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }

</style>

效果图