openlayers - 如何将 openlayers 作为库添加到我的 oracle jet 项目中？

Question

我使用 ojet create、build、serve 命令创建了一个 oracle jet 项目。或者，我还使用 NetBeans 8.2 IDE 创建了该项目。我无法将开放层添加为库。我想创建一个包含地图的 Web 应用程序。

Answer 1

不确定为什么您无法添加库，因为您没有指定尝试添加它的方式以及错误是什么（如果有）。

这就是我要做的：

1. ojet create运行命令后npm install --save ol。这会将库添加到您的 node_modules 文件夹中，并将其添加到您的 package.json 中。如果您不想将其添加到您的 package.json 中，请仅使用npm install ol.

2. 导航到脚本文件夹 -> 配置文件夹 -> oraclejet-build.js。看到注释的第 37 到 45 行了吗？取消注释这些行并添加您自己的库路径，如下所示：

   copyCustomLibsToStaging: {
     fileList: [
      {
        cwd:'node_modules/ol/',
        src: ['*'],
        dest: 'web/js/libs/ol'
      }
     ]
    },
   

3. 您现在可以使用 require 模块访问您的库。假设您使用模板创建了一个 ojet 项目，您可以从“main.js”文件中提供对该库的访问权限。

Answer 2

我的 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();
      }

    });

  }
);