在Yii2 Project中发布OpenLayers模块

如何解决在Yii2 Project中发布OpenLayers模块

我正在尝试在Yii2项目中使用OpenLayers，但是我不知道基于此示例OpenLayers Example

在JS中使用“导入”语法

我的资产文件：

namespace app\assets;

use yii\web\AssetBundle;

class AppAssetOl extends AssetBundle
{
    public $sourcePath = '@npm/ol';
    public $css = [
        'ol.css',];
    public $js = [
        'Feature.js','Map.js','Overlay.js','geom/Point.js','source/TileJSON.js','source/Vector.js','View.js','style.js','layer.js',];
}

我在视图文件中发布了资产：

$olAsset = \app\assets\AppAssetOl::register($this);

我的js导入上下文：

    import '<?= $olAsset->baseUrl.'/ol.css'?>';
    import Feature from '<?= $olAsset->baseUrl.'/Feature'?>';
    import Map from '<?= $olAsset->baseUrl.'/Map'?>';
    import Overlay from '<?= $olAsset->baseUrl.'/Overlay' ?>';
    import Point from '<?= $olAsset->baseUrl.'/geom/Point' ?>';
    import TileJSON from '<?= $olAsset->baseUrl.'/source/TileJSON' ?>';
    import VectorSource from '<?= $olAsset->baseUrl.'/source/Vector' ?>';
    import View from '<?= $olAsset->baseUrl.'/View' ?>';
    import {Icon,Style} from '<?= $olAsset->baseUrl.'/style' ?>';
    import {Tile as TileLayer,Vector as VectorLayer} from '<?= $olAsset->baseUrl.'/layer' ?>';

我收到此错误：

Uncaught SyntaxError: Cannot use import statement outside a module

我在main.js脚本标记中添加了type="module"，但是在导入的每个文件中我仍然收到错误提示。

解决方法

我意识到我需要Nodejs来运行模块，因此我更改了Asset文件以导入OpenLayers的CDN版本，并编辑了JS中的导入语法以使用ol变量声明常量：

资产文件：

class AppAssetOl extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css",];
    public $js = [
        "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js",];
    public $jsOptions = [
        'position' => View::POS_HEAD
    ];
}

基于OpenLayers example的新版JS文件：

    const Feature = ol.Feature;
    const Map = ol.Map;
    const Overlay = ol.Overlay;
    const Point = ol.geom.Point;
    const TileJSON = ol.source.TileJSON;
    const VectorSource = ol.source.Vector;
    const View = ol.View;
    const Style = ol.style.Style;
    const Icon = ol.style.Icon;
    const TileLayer = ol.layer.Tile;
    const VectorLayer = ol.layer.Vector;

现在该脚本不再需要成为模块，并且可以正常工作！