是否可以将 OpenLayers 库添加到 vue-cli 3

Question

我正在尝试使用 vue-cli-3 实现 Openlayers，但似乎不知何故我做不到，我遗漏了一些东西。

首先，我安装了vue cli

npm install @vue/cli -g

然后我添加了额外的依赖项，或者更准确地说是 OpenLayers 库。

npm install ol.

但我在 adding/registering 全局注册 ol 的依赖项中以某种方式失败（在 main.js 文件中）

在我的 App.vue 文件中，当我导入这样的文件时，它不起作用。我收到这两个错误

[Vue warn]: Error in nextTick: "ReferenceError: ol is not defined"

ReferenceError: ol is not defined

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

export default {

  data() {
    return {
      testing: 'SomeTests',
    }
  },
  mounted() {
    this.$nextTick(function () {
      initMap();
    })
  }
}
function initMap() {
  var myMap = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
    })
  })
};

但是当我在 index.html 中包含脚本和 link 标签时，上面的代码可以正常工作。

<head>
  <link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
  <title>ol-basic</title>
</head>

我的问题是这样的。是否可以按照 ol page 上的建议使用模块导入元素，是否可以以某种方式在我的 main.js 文件

中全局注册 ol 包

Answer 1

您永远不会导入 ol，因为它是未定义的，因此会给您带来这些错误。尝试以下操作：

// Import everything from ol
import * as ol from 'ol';

// The OSM and TileLayer API is taken from the OpenLayers API.
function initMap() {
  var myMap = new ol.Map({
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
    })
  })
}

我在快速的Vue项目中试了一下，函数运行没有任何引用错误

Answer 2

好的，经过进一步的咨询，我终于弄明白了。这是工作示例，希望它对某人有所帮助。

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

function initMap() {
  new Map({
    target: 'map',
    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

Is it possible to add OpenLayers library to vue-cli 3

javascript

openlayers

vue.js

vue-cli