OpenStreetMap OpenLayers в проекте require.js
Мне нужно подключить в проект OpenStreetMap с помощью библиотеки OpenLayers. Вот, что у меня уже написано. Файл index.jsp, в котором все нужные подключения:
<%@page import="java.util.Date"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
String fa = "6.4.2";
String bs = "5.3.1";
String app_version = "0.0.1";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--link rel="icon" href="favicon64.png?name=oemz" type="image/x-icon">
<link rel="shortcut icon" href="favicon64.png?name=oemz" type="image/x-icon"-->
<title>Welcome</title>
<link href="lib/fontawesome/<%= fa%>/css/fontawesome.min.css" rel="stylesheet">
<link href="lib/fontawesome/<%= fa%>/css/brands.min.css" rel="stylesheet">
<link href="lib/fontawesome/<%= fa%>/css/solid.min.css" rel="stylesheet">
<link href="lib/fontawesome/<%= fa%>/css/regular.min.css" rel="stylesheet">
<link href="lib/bootstrap/<%= bs%>/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/osm/ol.css" rel="stylesheet">
<link href="common/style/main.css?nc=<%= app_version%>" rel="stylesheet">
<script src="lib/requirejs/require-2.3.6.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
"use strict";
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
underscore: {exports: "_"},
bootstrap: {deps: ["jquery"]},
backbone: {
deps: [
"underscore",
"jquery"
],
exports: "Backbone"
}
},
paths: {
jquery: "lib/jquery/jquery-3.7.1.min",
underscore: "lib/underscore/underscore-umd-1.13.6.min",
backbone: "lib/backbone/backbone-1.5.0.min",
bootstrap: "lib/bootstrap/5.3.1/js/bootstrap.bundle.min",
text: "lib/requirejs/text-2.0.16.min",
ol: "lib/osm/ol",
modules: "app/modules"
},
urlArgs: function (id, url) {
var nc = "nc=<%= app_version%>";
;
if (url.indexOf("./lib/") !== -1) {
nc = "";
}
return nc == "" ? "" : ((url.indexOf("?") === -1 ? "?" : "&") + nc);
}
});
require(["jquery", "backbone", "app/router", "app/app"],
function ($, Backbone, Router, App) {
new App({el: "body"}).render();
new Router({$container: $("main")});
Backbone.history.start();
});
</script>
</body>
</html>
map-view.html:
<h1>Карта</h1>
<div id="mapContainer" class = "p-5 mb-4 bg-body-tertiary rounded-3"></div>
map-view.js:
define(["jquery", "backbone", "text!modules/map/map-view.html", "ol", "bootstrap"],
function ($, Backbone, html, ol) {
"use strict";
let Clazz = Backbone.View.extend({
$container: null,
initialize: function (p) {
p = p || {};
this.$container = p.$container || this.$container;
},
render: function () {
this.$el.html(html);
this.initMap();
return this;
},
initMap: function () {
// Создаем экземпляр объекта Map для загрузки карты
var map = new ol.Map({
target: 'mapContainer', // Идентификатор div контейнера карты
// Устанавливаем для загрузки слоя в контейнер карты
layers: [
// Загружаем тайловый слой
new ol.Tile({
// Источник данных, соответствующий слою, здесь для загрузки данных онлайн-сервиса листов OpenStreetMap
source: new ol.OSM()
})
],
// Настройки просмотра карты
view: new ol.View({
center: [32, 113], // Начальный центр отображения карты
zoom: 2 // Начальный уровень отображения карты
})
});
},
load: function () {
let defer = $.Deferred();
this.render();
this.$container.html(this.$el);
defer.resolve();
return defer.promise();
},
clear: function () {
this.remove();
}
});
return Clazz;
});
файлы ol.css, ol.js и ol.js.map взяты отсюда https://openlayers.org/download/
При запуске на странице карта не появляется, а в консоли вот такая ошибка:
map-view.js?nc=0.0.1:26 Uncaught TypeError: ol.OSM is not a constructor
at r.initMap (map-view.js?nc=0.0.1:26:17)
at r.render (map-view.js?nc=0.0.1:13:11)
at r.load (map-view.js?nc=0.0.1:133:11)
at router.js?nc=0.0.1:47:18
at Object.execCb (require-2.3.6.min.js:5:16727)
at e.check (require-2.3.6.min.js:5:10499)
at e.<anonymous> (require-2.3.6.min.js:5:12915)
at require-2.3.6.min.js:5:1542
at require-2.3.6.min.js:5:13376
at each (require-2.3.6.min.js:5:1020)
Вместо ol.OSM пробовала ol.source.OSM, тогда другая ошибка
map-view.js?nc=0.0.1:26 Uncaught TypeError: Cannot read properties of undefined (reading 'OSM')
at r.initMap (map-view.js?nc=0.0.1:26:31)
at r.render (map-view.js?nc=0.0.1:13:11)
at r.load (map-view.js?nc=0.0.1:133:11)
at router.js?nc=0.0.1:47:18
at Object.execCb (require-2.3.6.min.js:5:16727)
at e.check (require-2.3.6.min.js:5:10499)
at e.<anonymous> (require-2.3.6.min.js:5:12915)
at require-2.3.6.min.js:5:1542
at require-2.3.6.min.js:5:13376
at each (require-2.3.6.min.js:5:1020)