I am currently trying to integrate Openlayers with vue-cli-3, but it seems like I am missing something in the process.
Initially, I installed Vue CLI using the following command:
npm install @vue/cli -g
Next, I added additional dependencies, specifically the OpenLayers library:
npm install ol.
However, I am facing issues when it comes to including and registering these dependencies globally in my main.js file.
When I try to import files in my App.vue like this, I encounter two errors:
[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,
})
})
};
Interestingly, when I include script and link tags directly in my index.html file, the code mentioned above works without any issues.
<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>
My question revolves around whether it's possible to import elements as recommended on the OpenLayers page by utilizing modules, and if there is a way to globally register the OpenLayers package in my main.js file.