在VUE中使用OpenLayers

一、首先全局引入OpenLayers

import ol from 'openlayers'
// 将 ol 定义为 Vue 上的全局属性
Vue.prototype.$ol = ol

二、定义装载地图的容器

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

三、在方法里声明

let ol = this.$ol

// 引入图层
const layer1 = new VectorLayer({
    // 资源
    source: new VectorSource({
        // 格式
        format: new GeoJSON(),
        // 路径
        url: './data/countries.json',
    }),  
}),
const layer2 = new VectorLayer({
    // 资源
    source: new VectorSource({
        // 格式
        format: new GeoJSON(),
        // 路径
        url: './data/countries.json',
    }),  
}),
const map = new ol.Map({
    // 指定地图容器
    target:"map",
    // 视图层
    layers: [layer1, layer2]
    // 视图配置
    view: new ol.View({
        // 加载地图后的中心点(经纬度)
        center: [0, 0],
        // 缩放
        zoom: 2
    })
})