Question

我正在尝试使用vue-cli-3实现Openlayers，但似乎我无法正确完成它，我缺少了一些东西。

首先，我安装了vue cli

npm install @vue/cli -g

然后，我添加了其他依赖项，或更准确地说是OpenLayers库。

npm install ol.

但是我无法在全局注册ol中添加/注册依赖项（在main.js文件中）

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

[Vue警告]：nextTick中出现错误：“ ReferenceError：未定义ol”

ReferenceError：未定义ol

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中包含脚本和链接标记时，以上代码将正常工作。

<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

2 个答案: