开发者问题收集

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

2018-09-11
1969
javascript vue.js openlayers vue-cli

我正在尝试使用vue-cli-3实现开放层，但看来我不能做对了，我缺少某些东西。

首先，我安装了vue cli

320555487

然后我添加了其他依赖项或要更精确的openlayers库。

502295898

，但我以某种方式添加/添加/在我的app.vue文件中注册全球注册的依赖项（在main.js文件中）

当我导入这样的文件时，它不起作用。我正在得到这两个错误

951419705 025340471

，但是当我在index.html中包含脚本和链接标签时，上面的代码正常工作。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< /p> 829223273

我的问题是。是否有可能仅导入元素，因为建议在 ol Page 使用模块，并且可以以某种方式在我的Main.js File

中以某种方式注册OL软件包

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
    })
  }
Svinjica
2018-09-12

您从未导入过 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 项目中尝试过，该函数运行时没有任何引用错误

Abid Hasan
2018-09-11