为什么 openlayers 地图在 vue-cli 3 中不起作用

Question

我已经通过 ol 包添加到我的 vue-cli 项目中

npm install ol

但地图无法加载。没有错误，我只是在结果源中找到了一个空 div。

这是我的代码 =>

html部分：

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

js部分：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';

export default {
    name: "page",
    data() {
        return {
            ...
        }
    },
    methods: {

        initMap: function () {
            new Map({
                target: 'map-container',
                view: new View({
                center: [0, 0],
                zoom: 2
            })
        });
    },
    mounted: function () {
            this.initMap();
    },
}

注意 => 在某些地方我发现我必须调用 init 函数：

this.$nextTick(function () {
            initMap();
        })

但这并没有什么不同。

各位，我的时间不多了，请帮帮我。 感谢所有愿意帮助的人

Answer 1

您似乎缺少 TileLayer。像这样的：

new Map({
  target: "map-container",
  layers: [
    new TileLayer({
      source: new XYZ({
        url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});