Node.js 如何在codeigniter视图文件中使用Openlayers3库文件

我试图在我的codeigniter中使用openlayers在用户访问某个地方时显示一些地图信息

但我还停留在初级阶段。我知道这是个愚蠢的问题，但我真的需要用它

我可以使用Openlayer库，如Vector、GeoJSON等。。在main.js上运行node.js，正如他们的网站中提到的那样

但在codeignite中，我想在特定的视图页面中使用它。那么我如何在特定的视图页面中导入这些js文件呢

假设我在根文件夹中有我的openlayer模块

Like
Porject
-- Application
-- openlayers_modules 

//里面有ol文件夹。 --系统

通常，我们将其用作index.html和main.js，它们都位于根文件夹中

我有点困惑如何使用它

如果我在视图文件ex:lightning.php中使用这些js文件，那么它显示如下

<script type="text/javascript">
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Stroke, Style, Text} from 'ol/style.js';

从“ol/Map.js”导入地图；
从“ol/View.js”导入视图；
从“ol/format/GeoJSON.js”导入GeoJSON；
从'ol/layer/Vector.js'导入VectorLayer；
从“ol/source/Vector.js”导入VectorSource；
从“ol/Style.js”导入{Fill，Stroke，Style，Text}；

未捕获的语法错误：意外的标识符

因此，我的问题是，我们如何在有节点js或没有节点js的codeigniter应用程序中的特定视图页面上实现它

---

任何帮助都将不胜感激。谢谢

我帮不了你。但您可以在不使用节点的情况下执行此操作。只需将openalyer与cdn链接，就可以了

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>

---

使用此项查找所有示例

我无法帮助您使用节点。但您可以在不使用节点的情况下执行此操作。只需将openalyer与cdn链接，就可以了

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>

---

用这个查找所有示例

如果我想使用vector JS怎么办<代码>从'ol/layer/Vector.js'导入VectorLayercdn打开openalyer js链接后，您不必为openlayer导入任何内容，所有内容都显示在该js文件中。只需遵循示例。如果我想使用vector JS呢<代码>从'ol/layer/Vector.js'导入VectorLayercdn打开openalyer js链接后，您不必为openlayer导入任何内容，所有内容都显示在该js文件中。只需遵循示例。

 var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });