在 deno 中使用 mapbox-gl

Question

我正在尝试将 mapbox 与 deno 一起使用

其实我正在尝试这个：

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/minifier@v1.1.1/wasm.js:98:14)
    at minify (https://deno.land/x/minifier@v1.1.1/mod.ts:27:10)
    at https://deno.land/x/minifier@v1.1.1/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'. */
 
  }
}

有没有人设法将 mapbox-gl 与 deno 一起使用？

问候

Answer 1

在其 package.json 中将mapbox-gl-js自己描述为“一个 WebGL 交互式地图库”。它预计在浏览器中运行，可以访问 DOM 和 WebGL（一种有效渲染图形的技术）。

我想用 Deno 运行它可能有两个原因：

1. 将地图可视化添加到已使用 Deno 的 Web 应用程序。在这种情况下，这很容易。您不希望 Deno 运行 mapbox-gl。您真正想要的是 Deno 使用一些静态 javascript 提供网页服务，这些静态 javascript 将在浏览器（而不是服务器）中执行并运行mapbox-gl. 为此，请配置 Deno 以在本示例中提供 HTML： https: //docs.mapbox.com/mapbox-gl-js/example/simple-map/

2. 以编程方式生成地图的光栅图像（PNG，...）。例如，您可能希望根据纬度和经度自动保存城市地图，并使用 mapbox-gl 提供的所有样式和选项。这通常称为“静态地图 API”。您不一定需要自己运行它，这里是 Mapbox关于此 API 的文档（50,000 免费/月）。如果您确实想自己运行它，请参见下文。

mapbox-gl在服务器上运行

如果不使用mapbox-gl-js浏览器，则需要模拟 DOM 和 WebGL。但实际上有一种更简单的方法生成静态mapx mapbox-gl-native：。它期望在服务器上提供更容易（并且性能更高？）的渲染库。

实现这一目标的一个项目是tileserver-gl。它的源代码非常小，您可以从中获得指导。使用问题的一部分mapbox-gl-native是安装和配置其依赖项。从tileserver-gl依赖项中了解它 。

您可以tileserver-gl在 Deno 中进行复制，如果许可证合适，甚至可以重用它的一些源文件。但你可能不需要！根据您想要完成的任务，您可以tileserver-gl从 Docker 开始，然后使用 Deno 从其API 端点请求静态地图图像。