vue中使用OpenLayers

（一）安装

1. cnpm i -s ol

（二）地图组件

 

 

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

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { Map, View } from "ol";

export default {
    data() {
        return {
            map: null, 
        };
    },
    created() {},
    mounted() {
        this.initMap();
    },
    methods: {
        // 初始化地图
        initMap() {
            this.map = new Map({
                target: "map", // 指向对象
                layers: [
                    // 图层
                    new TileLayer({
                        // 这里定义的是平铺图层
                        source: new OSM(),
                    }),
                ],
                view: new View({
                    projection: "EPSG:4326",
                    center: [118.792207, 32.133476],
                    zoom: 5,

                }),
            });
        },
    },
};
</script>

<style lang="less" scoped>
#map {
    width: 1000px;
    height: 600px;
}
</style>