search

cieloazul310 / ol-gsi-vt

国土地理院ベクトルタイルのOpenLayers用プリセット
https://cieloazul310.github.io/ol-gsi-vt/
2 stars 0 forks source link

宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

Closed kenzkenz closed 2 months ago

kenzkenz commented 2 months ago

初めましていつもお世話になっております。宮崎県の落合というものです。さて、ol-gsi-vtをインストールしたのですが、「You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.」というエラーメッセージが出てしまいました。なにか良い解決方法はありませんでしょうか。Vue CLIを使って開発しております。何卒よろしくおねがいします。

cieloazul310 commented 2 months ago

ご連絡ありがとうございます。検証いたします。

cieloazul310 commented 2 months ago

@kenzkenz 明確に検証できたわけではないのですが、Vue設定ファイルのtranspileDependenciesオプションに@cieloazul310/ol-gsi-vtを追加する方法を試してもらえないでしょうか。

// vue.config.cjs
module.exports = {
  transpileDependencies: [
    // "ol",
    // "color-parse",
    "@cieloazul310/ol-gsi-vt",
  ],
};

自分が試した環境ではolを動かすのにolとcolor-parseをtranspileDependenciesに追加する必要があり、更に@cieloazul310/ol-gsi-vtを追加すると先のエラーは回避できたのですが、新たに依存先のol-pmtilesに関するエラーが発生し、ol-gsi-vtを表示するには至っていません。 https://github.com/openlayers/openlayers/issues/15031

kenzkenz commented 2 months ago

ありがとうございます。試してみたのですが、やはり「You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file」のエラーが出てしまいます。

cieloazul310 commented 2 months ago

@kenzkenz 使用しているVueやolのバージョンを教えていただけますか

kenzkenz commented 2 months ago

ありがとうございます。 "vue": "^2.5.21", "ol": "^6.15.1", です。お手数をおかけして申し訳ありません。

cieloazul310 commented 2 months ago

1.最初に試していただきたい方法と、1が失敗した場合の2.代替案を提示します。2の代替案で正常に動作しました。

1. 最初に試していただきたい方法

Vue CLIの設定ファイルのtranspileDependenciesオプションに、@cieloazul310/ol-gsi-vtの他に @cieloazul310/ol-gsi-vt-style, @cieloazul310/ol-gsi-vt-style-utilsの3種類を設定してください。

// vue.config.js
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  transpileDependencies: [
    "@cieloazul310/ol-gsi-vt",
+   "@cieloazul310/ol-gsi-vt-style",
+   "@cieloazul310/ol-gsi-vt-style-utils",
  ],
};

この方法で今まで通り「You may need an appropriate loader...」という表示が出るかどうか教えていただきたいです。

This dependency was not found:
* ol-pmtiles in ./node_modules/@cieloazul310/ol-gsi-vt/lib/layers/gsi-opt-vt.js
To install it, you can run: npm install --save ol-pmtiles

自分が試したときは上記のエラーメッセージが表示され、ol-gsi-vtを表示することはできませんでした。 追加でol-pmtilesをインストールしても同様に表示されたため、この場合ol-pmtilesまたはVue CLIのどこかに起因している可能性があります。 https://github.com/protomaps/PMTiles/tree/main/openlayers

2. 代替案 (pbfに切り替える)

国土地理院の最適化ベクトルタイルをPMTiles版ではなく従来版(pbf)に切り替える方法でol-gsi-vtの表示が可能でした。 https://github.com/gsi-cyberjapan/optimal_bvmap

npm uninstall @cieloazul310/ol-gsi-vt
npm install @cieloazul310/ol-gsi-vt-style
// vue.config.js
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  transpileDependencies: [
-   "@cieloazul310/ol-gsi-vt",
    "@cieloazul310/ol-gsi-vt-style",
    "@cieloazul310/ol-gsi-vt-style-utils",
  ],
};

レイヤの設定を以下のように変更することで、同環境でol-gsi-vtの表示が可能となりました。

+ import VectorTileLayer from "ol/layer/VectorTile";
+ import VectorTileSource from "ol/source/VectorTile";
+ import MVTFormat from "ol/format/MVT";
- import { gsiOptVtLayer } from '@cieloazul310/ol-gsi-vt';
+ import { gsiOptVtStyle } from "@cieloazul310/ol-gsi-vt-style";

- const layer = gsiOptVtLayer();
+ const layer = new VectorTileLayer({
+   source: new VectorTileSource({
+     url: "https://cyberjapandata.gsi.go.jp/xyz/optimal_bvmap-v1/{z}/{x}/{y}.pbf",
+     maxZoom: 16,
+     minZoom: 4,
+     format: new MVTFormat(),
+   }),
+   style: gsiOptVtStyle(),
+   declutter: true, // 任意
+ }),

以上、お試しくださいませ。

kenzkenz commented 2 months ago

ありがとうございます！ １ですが、次のエラーが出ました。 error in ./node_modules/@cieloazul310/ol-gsi-vt-style/lib/opt-vt/index.js

Module parse failed: Unexpected token (7:42) File was processed with these loaders:

２ですが、同じようにエラーが出てしまいました。 error in ./node_modules/@cieloazul310/ol-gsi-vt-style/lib/opt-vt/index.js

Module parse failed: Unexpected token (7:42) File was processed with these loaders:

いろいろと試してみようと思います。

cieloazul310 commented 2 months ago

@kenzkenz 恐らく原因が特定できました。結論を先に言うと、Null合体演算子とオプショナルチェーンをトランスパイルできるようにBabelのプリセットのバージョンを上げる、またはプラグインを追加する、という形で解決できると思います。

ol-gsi-vtはESNextをターゲットにTSからJSにトランスパイルしていますが、Vue CLIに組み込まれているBabelがESNextに対応しておらず、モジュールを解析できない、という状態になっていると考えられます。OpenLayersのバージョンを最新版のv10に上げると同じように「You may need an appropriate loader...」というエラーが発生するのも同様の理由だと思われます。

したがって、Null合体演算子とオプショナルチェーンを解析できるようにBabelのプリセットのバージョンを上げる、またはプラグインを追加することで対応できるのではないかと思います。 https://github.com/vuejs/vue-cli/issues/7209

Null 合体演算子 (??) https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing オプショナルチェーン (?.) https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

ol-gsi-vt側の問題ではないため、これでIssueを閉じて宜しいでしょうか。

kenzkenz commented 2 months ago

ありがとうございます。どうしても次のエラーが出てしまいます。私の環境のせいのようなので閉じてもらって結構です。

error in ./node_modules/@cieloazul310/ol-gsi-vt-style-utils/lib/theme/index.js

Module parse failed: Unexpected token (12:28) File was processed with these loaders:

Module parse failed: Unexpected token (37:57) File was processed with these loaders:

kenzkenz commented 2 months ago

お世話になっております。あの後、試行錯誤して表示に成功しました！いろいろありがとうございました！ 以下はその成果です。津波浸水想定を載せています。 https://kenzkenz.xsrv.jp/open-hinata/#sB8BTKt

2024年8月14日(水) 18:12 cieloazul310 @.***>:

Closed #120 https://github.com/cieloazul310/ol-gsi-vt/issues/120 as completed.

— Reply to this email directly, view it on GitHub https://github.com/cieloazul310/ol-gsi-vt/issues/120#event-13876898540, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADNSDXVMG52PXMSROVCK3YDZRMNQDAVCNFSM6AAAAABMMAKAZGVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJTHA3TMOBZHA2TIMA . You are receiving this because you were mentioned.Message ID: @.***>

cieloazul310 commented 2 months ago

@kenzkenz それは良かったです。open-hinataの制作応援しています。