如何将 openlayers 作为库添加到我的 oracle jet 项目中?
how do I add openlayers as a library to my oracle jet project?
我使用 ojet 创建、构建、服务命令创建了一个 oracle jet 项目。或者,我还使用 NetBeans 8.2 IDE 创建了项目。我无法将开放层添加为库。我想创建一个包含地图的网络应用程序。
不知道为什么你不能添加库,因为你没有指定如何
您尝试添加它,错误是什么(如果有)。
这就是我要做的:
- 在
ojet create
运行 命令之后 npm install --save ol
。这会将库添加到您的 node_modules 文件夹中,并将其添加到您的 package.json 中。如果您不想将它添加到您的 package.json,请仅使用 npm install ol
。
导航到脚本文件夹 -> 配置文件夹 -> oraclejet-build.js。看到注释的第 37 到 45 行了吗?取消注释这些行并添加您自己的库路径,如下所示:
copyCustomLibsToStaging: {
fileList: [
{
cwd:'node_modules/ol/',
src: ['*'],
dest: 'web/js/libs/ol'
}
]
},
- 您现在可以使用 require 模块访问您的库。假设您使用模板创建了一个 ojet 项目,您可以从 'main.js' 文件提供对该库的访问。
我的 main.js 文件看起来像这样..
/**
* Copyright (c) 2014, 2017, Oracle and/or its affiliates.
* The Universal Permissive License (UPL), Version 1.0
*/
'use strict';
/**
* Example of Require.js boostrap javascript
*/
requirejs.config(
{
baseUrl: 'js',
// Path mappings for the logical module names
// Update the main-release-paths.json for release mode when updating the mappings
paths:
//injector:mainReleasePaths
{
'knockout': 'libs/knockout/knockout-3.4.0.debug',
'jquery': 'libs/jquery/jquery-3.1.1',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0',
'promise': 'libs/es6-promise/es6-promise',
'hammerjs': 'libs/hammer/hammer-2.0.8',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
'ojs': 'libs/oj/v3.2.0/debug',
'ojL10n': 'libs/oj/v3.2.0/ojL10n',
'ojtranslations': 'libs/oj/v3.2.0/resources',
'text': 'libs/require/text',
'signals': 'libs/js-signals/signals',
'customElements': 'libs/webcomponents/CustomElements',
'proj4': 'libs/proj4js/dist/proj4-src',
'css': 'libs/require-css/css',
}
//endinjector
,
// Shim configurations for modules that do not expose AMD
shim:
{
'jquery':
{
exports: ['jQuery', '$']
}
}
}
);
/**
* A top-level require call executed by the Application.
* Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
* by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
* objects in the callback
*/
require(['ojs/ojcore', 'knockout', 'appController', 'ojs/ojknockout',
'ojs/ojmodule', 'ojs/ojrouter', 'ojs/ojnavigationlist', 'ojs/ojbutton', 'ojs/ojtoolbar','libs/ol'],
function (oj, ko, app) { // this callback gets executed when all required modules are loaded
$(function() {
function init() {
oj.Router.sync().then(
function () {
// Bind your ViewModel for the content of the whole page body.
ko.applyBindings(app, document.getElementById('globalBody'));
},
function (error) {
oj.Logger.error('Error in root start: ' + error.message);
}
);
}
// If running in a hybrid (e.g. Cordova) environment, we need to wait for the deviceready
// event before executing any code that might interact with Cordova APIs or plugins.
if ($(document.body).hasClass('oj-hybrid')) {
document.addEventListener("deviceready", init);
} else {
init();
}
});
}
);
我使用 ojet 创建、构建、服务命令创建了一个 oracle jet 项目。或者,我还使用 NetBeans 8.2 IDE 创建了项目。我无法将开放层添加为库。我想创建一个包含地图的网络应用程序。
不知道为什么你不能添加库,因为你没有指定如何 您尝试添加它,错误是什么(如果有)。
这就是我要做的:
- 在
ojet create
运行 命令之后npm install --save ol
。这会将库添加到您的 node_modules 文件夹中,并将其添加到您的 package.json 中。如果您不想将它添加到您的 package.json,请仅使用npm install ol
。 导航到脚本文件夹 -> 配置文件夹 -> oraclejet-build.js。看到注释的第 37 到 45 行了吗?取消注释这些行并添加您自己的库路径,如下所示:
copyCustomLibsToStaging: { fileList: [ { cwd:'node_modules/ol/', src: ['*'], dest: 'web/js/libs/ol' } ] },
- 您现在可以使用 require 模块访问您的库。假设您使用模板创建了一个 ojet 项目,您可以从 'main.js' 文件提供对该库的访问。
我的 main.js 文件看起来像这样..
/**
* Copyright (c) 2014, 2017, Oracle and/or its affiliates.
* The Universal Permissive License (UPL), Version 1.0
*/
'use strict';
/**
* Example of Require.js boostrap javascript
*/
requirejs.config(
{
baseUrl: 'js',
// Path mappings for the logical module names
// Update the main-release-paths.json for release mode when updating the mappings
paths:
//injector:mainReleasePaths
{
'knockout': 'libs/knockout/knockout-3.4.0.debug',
'jquery': 'libs/jquery/jquery-3.1.1',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0',
'promise': 'libs/es6-promise/es6-promise',
'hammerjs': 'libs/hammer/hammer-2.0.8',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
'ojs': 'libs/oj/v3.2.0/debug',
'ojL10n': 'libs/oj/v3.2.0/ojL10n',
'ojtranslations': 'libs/oj/v3.2.0/resources',
'text': 'libs/require/text',
'signals': 'libs/js-signals/signals',
'customElements': 'libs/webcomponents/CustomElements',
'proj4': 'libs/proj4js/dist/proj4-src',
'css': 'libs/require-css/css',
}
//endinjector
,
// Shim configurations for modules that do not expose AMD
shim:
{
'jquery':
{
exports: ['jQuery', '$']
}
}
}
);
/**
* A top-level require call executed by the Application.
* Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
* by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
* objects in the callback
*/
require(['ojs/ojcore', 'knockout', 'appController', 'ojs/ojknockout',
'ojs/ojmodule', 'ojs/ojrouter', 'ojs/ojnavigationlist', 'ojs/ojbutton', 'ojs/ojtoolbar','libs/ol'],
function (oj, ko, app) { // this callback gets executed when all required modules are loaded
$(function() {
function init() {
oj.Router.sync().then(
function () {
// Bind your ViewModel for the content of the whole page body.
ko.applyBindings(app, document.getElementById('globalBody'));
},
function (error) {
oj.Logger.error('Error in root start: ' + error.message);
}
);
}
// If running in a hybrid (e.g. Cordova) environment, we need to wait for the deviceready
// event before executing any code that might interact with Cordova APIs or plugins.
if ($(document.body).hasClass('oj-hybrid')) {
document.addEventListener("deviceready", init);
} else {
init();
}
});
}
);