Javascript 是否可以将OpenLayers库添加到vue cli 3_Javascript_Vue.js_Openlayers_Vue Cli

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

javascript vue.js openlayers

Javascript 是否可以将OpenLayers库添加到vue cli 3,javascript,vue.js,openlayers,vue-cli,Javascript,Vue.js,Openlayers,Vue Cli,我试图用vue-cli-3实现Openlayers，但似乎我做不好，我遗漏了一些东西首先，我安装了vue cli npm install @vue/cli -g 然后我添加了额外的依赖项，或者更精确地说是OpenLayers库 npm install ol. 但我在全局注册ol时（在main.js文件中）添加/注册依赖项失败了在我的App.vue文件中，当我导入这样的文件时，它不起作用。我有两个错误 [Vue warn]：下一步中出现错误：“ReferenceError:未定义ol” R

我试图用vue-cli-3实现Openlayers，但似乎我做不好，我遗漏了一些东西

首先，我安装了vue cli

npm install @vue/cli -g

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

npm install ol.

但我在全局注册ol时（在main.js文件中）添加/注册依赖项失败了

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

[Vue warn]：下一步中出现错误：“ReferenceError:未定义ol”

ReferenceError:未定义ol

但当我在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基础

我的问题是。是否可以使用模块只导入推荐的元素，是否可以在我的main.js文件中全局注册ol包

您永远不会导入

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,
    })
  })
}

我在一个quick Vue项目中试用了它，该函数运行时没有任何引用错误

好的，经过进一步咨询，我终于找到了答案。这里是一个很好的例子，希望能对大家有所帮助

// 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
    })
  }

嗯，我在家试试这个。但如果我理解正确，您只能导入您需要的模块，因为这是官方网站上推荐的，当然，感谢您的努力和时间：）如果您想这样做，您也可以导入您需要的模块<代码>从“ol”导入{Map，tillelayer，OSM，View}

// 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
    })
  }