Rails target.addEventListener 上的 OpenLayers 6 不是函数

Question

我从头开始用 Openlayers 6.1.1 构建一个 Rails6 应用程序。使用 Webpacker 和 Turbolinks。很多事情都运行良好，使用 turbolinks 也是如此。但是有一件事不能正常工作：Openlayers。我用 yarn 添加了 openlayers，它基本上可以正常工作。所以我可以按预期创建地图，但我无法添加 VectorLayer。如果我这样做，我将收到一条控制台消息：

 target.addEventListener is not a function

我的意思是我正在导入所有必需的库。在我的 application.js

require("@openlayers/pepjs")
require("ol")

在我的map.js

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import MVT from 'ol/format/MVT';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import Circle from 'ol/geom/Circle';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
//import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

我的地图对象：

var vectorLayer = new VectorLayer({
    source: new VectorSource({
        url: 'v1/track/journey',
        format: new GeoJSON()
    }),
});


var OSMMap = new TileLayer({
    source: new OSM({
        attributions: [
            '(c) OpenStreetMap'
        ],
        opaque: false,
        url: 'http://10.232.200.17/tiles/osm/{z}/{x}/{y}.png'
    })
});

// OL Test
var map = new Map({
    layers: [
        OSMMapHLC1,
        VectorLayer
    ],

    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

我在没有 turbolinks 的情况下试过了
我添加了pepjs
我手动添加了jquery
我试过传单。结果 VectorLayers 实时插件工作正常。

提示。我必须使用 Openlayers 而不是 Leaflet。

非常感谢所有能提供帮助的人。

Stacktrace

问候马可

Answer 1

尝试在您的代码中替换它：

var map = new Map({
layers: [
    OSMMap,
    vectorLayer
],

Answer 2

非常感谢您的回答。我认为这是我这边的复制粘贴失败。我尝试了很多东西，以至于我的代码搞砸了。所以我从头开始，现在它正在工作，所以我将在这里展示我的代码：

必须将所有导入放在 turbolinks 之外，其他所有内容都应放在 turbolinks load() 函数内：

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import Circle from 'ol/geom/Circle';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
//import { toPng } from 'html-to-image';



$(document).on('turbolinks:load', function() {


    var exportOptions = {
        filter: function(element) {
            return element.className ? element.className.indexOf('ol-control') === -1 : true;
        }
    };

    document.getElementById('export-png').addEventListener('click', function() {
        map.once('rendercomplete', function() {
            toPng(map.getTargetElement(), exportOptions)
                .then(function(dataURL) {
                    var link = document.getElementById('image-download');
                    link.href = dataURL;
                    link.click();
                });
        });
        map.renderSync();
    });

    var image = new CircleStyle({
        radius: 5,
        fill: null,
        stroke: new Stroke({ color: 'red', width: 1 })
    });

    var styles = {
        'Point': new Style({
            image: image
        }),
        'LineString': new Style({
            stroke: new Stroke({
                color: 'green',
                width: 1
            })
        }),
        'MultiLineString': new Style({
            stroke: new Stroke({
                color: 'green',
                width: 1
            })
        }),
        'MultiPoint': new Style({
            image: image
        }),
        'MultiPolygon': new Style({
            stroke: new Stroke({
                color: 'yellow',
                width: 1
            }),
            fill: new Fill({
                color: 'rgba(255, 255, 0, 0.1)'
            })
        }),
        'Polygon': new Style({
            stroke: new Stroke({
                color: 'blue',
                lineDash: [4],
                width: 3
            }),
            fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        'GeometryCollection': new Style({
            stroke: new Stroke({
                color: 'magenta',
                width: 2
            }),
            fill: new Fill({
                color: 'magenta'
            }),
            image: new CircleStyle({
                radius: 10,
                fill: null,
                stroke: new Stroke({
                    color: 'magenta'
                })
            })
        }),
        'Circle': new Style({
            stroke: new Stroke({
                color: 'red',
                width: 2
            }),
            fill: new Fill({
                color: 'rgba(255,0,0,0.2)'
            })
        })
    };

    var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
    };



    var vectorLayer = new VectorLayer({
        source: new VectorSource({
            format: new GeoJSON(),
            url: 'v1/track?journey=#####'
        }),
        style: styleFunction
    });



    var map = new Map({
        layers: [
            new TileLayer({
                source: new OSM()
            }),
            vectorLayer
        ],
        target: 'map',
        view: new View({
            center: [0, 0],
            zoom: 2
        })
    });

});

Rails target.addEventListener 上的 OpenLayers 6 不是函数

OpenLayers 6 on Rails target.addEventListener is not a function

ruby-on-rails

webpack

turbolinks

openlayers-6