typescript - 在 deno 中使用 mapbox-gl

我正在嘗試在 Deno 中使用 Mapbox

其實我正在嘗試這個：

import mapboxgl from 'https://dev.jspm.io/mapbox-gl';

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

基於：如何在 DENO 中使用 npm 模組？

使用 jspm 時，當我嘗試時有太多錯誤，我有一個：

esModuleInterop, module, target
error: TS2339 [ERROR]: Property 'accessToken' does not exist on type '{}'.
mapboxgl.accessToken =  "toto";
         ~~~~~~~~~~~
    at file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts:10:10

TS2339 [ERROR]: Property 'Map' does not exist on type '{}'.
var map = new mapboxgl.Map({
                       ~~~
    at file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts:12:24

我也試過：

import {  mapboxgl } from "./../../libs/mapbox/2_1_1/mapbox-gl.js";

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

但是我有一個：

Unsupported compiler options in "templateV2/source/deno/Mapbox/tsconfig.json".
  The following options were ignored:
    esModuleInterop, module, target
Bundle file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts
Emit "../compiled/map.js" (1.45MB)
error: Uncaught (in promise) RuntimeError: unreachable
    at <anonymous> (wasm://wasm/00247702:1:336403)
    at <anonymous> (wasm://wasm/00247702:1:341096)
    at <anonymous> (wasm://wasm/00247702:1:339419)
    at <anonymous> (wasm://wasm/00247702:1:339781)
    at <anonymous> (wasm://wasm/00247702:1:336272)
    at <anonymous> (wasm://wasm/00247702:1:268321)
    at minify (wasm://wasm/00247702:1:253183)
    at minify (https://deno.land/x/[email /wasm.js:98:14)
    at minify (https://deno.land/x/[email /mod.ts:27:10)
    at https://deno.land/x/[email /cli.ts:53:3

這是我的 tsconfig.json ：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom","es2015","DOM"],                    /* Specify library files to be included in the compilation. */
    
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "strictNullChecks": false,              /* Enable strict null checks. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
 
  }
}

有人成功在 Deno 上使用 mapbox-gl 嗎？

此致

答案＃1

在其 package.json 中，mapbox-gl-js 將自身描述為「一個 WebGL 互動地圖庫」。它預期在瀏覽器中運行，並可以訪問 DOM 和 WebGL（一種高效渲染圖形的技術）。

我能想到想用 Deno 來運行它的原因有兩個：

在已經使用 Deno 的 Web 應用程式中加入地圖視覺化。在這種情況下，很簡單。你不希望 Deno 運行 mapbox-gl。你真正想要的是 Deno 提供包含一些靜態 JavaScript 的網頁，這些 JavaScript 將在瀏覽器（而不是伺服器）上執行並運行 mapbox-gl。要達到這個目的，請將 Deno 配置為提供本範例中的 HTML：https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
以程式方式生成地圖的光柵圖像（PNG 等）。例如，你可能想要根據城市的緯度和經度自動保存地圖，並包含 mapbox-gl 提供的所有樣式和選項。這通常被稱為「靜態地圖 API」。你不一定需要自己運行，這裡是 Mapbox 的此 API 文檔（每月 50,000 次免費）。如果你真的想自己運行，請參見下文。

在伺服器上運行 `mapbox-gl`

在沒有瀏覽器的情況下使用 mapbox-gl-js，你需要模擬 DOM 和 WebGL。但實際上有一個更簡單的方式來生成靜態地圖：mapbox-gl-native。它需要的渲染庫在伺服器上提供起來更簡單（並且性能可能更好？）。

一個實現這一點的專案是 tileserver-gl。它的源代碼相當小，你可以從中獲得指導。使用 mapbox-gl-native 的部分問題將是安裝和配置其依賴項。可以從 tileserver-gl 的依賴項中了解這些資訊。

你可以在 Deno 中重現 tileserver-gl，甚至可以重用它的一些源文件，如果授權允許的話。但你可能不需要這麼做！視你想要達成的目標而定，你也可以直接使用 Docker 啟動 tileserver-gl，並使用 Deno 從它的 API 端點請求靜態地圖影像。

typescript - 在 deno 中使用 mapbox-gl

答案＃1

在伺服器上運行 mapbox-gl

在伺服器上運行 `mapbox-gl`