为什么 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
  })
});

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

why openlayers map not working in vue-cli 3

javascript

npm

vue.js

openlayers-5

vue-cli-3