使用 Mapbox-GL 和 Deno。

Question

我正在尝试使用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/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'. */
 
  }
}

有人成功在deno中使用mapbox-gl吗？

谢谢！

- Bussiere

---

Deno是一个服务器端运行时，而mapbox-gl是用于渲染到DOM的浏览器包。即使您可以让类型正常工作，我也不相信您会有任何运气实际上使用结果做任何事情。 - superhawk610

就此而言，当使用JSPM时出现的错误是在Deno 1.5.0中引入的，很可能是由于内部切换到新的tsc基础设施和/或默认启用isolatedModules所致（请参见changelog）。您可以使用1.4.0或更早版本运行该代码，只需执行deno upgrade --version 1.4.0即可。 - superhawk610

Answer 1

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

我可以想到两个原因希望在Deno上运行它：

1. 在已经使用Deno的web应用程序中添加地图可视化。在这种情况下很容易实现。您不想让Deno运行mapbox-gl，您真正想要的是使Deno提供一些静态JavaScript来在浏览器（而不是服务器）中执行并运行mapbox-gl。要实现此目标，请配置Deno以在此示例中提供HTML：https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ 2. 以编程方式生成地图的光栅图像（PNG等）。例如，您可能希望从其纬度和经度自动保存城市地图，包括mapbox-gl提供的所有样式和选项。这通常称为“静态地图API”。您不一定需要自己运行它，这里是Mapbox的文档介绍了这个API（每月50000次免费使用）。如果您真的想自己运行它，请参见下文。

在服务器上运行mapbox-gl 在没有浏览器的情况下使用mapbox-gl-js需要模拟DOM和WebGL。但是实际上有一种更简单的方法可以生成静态mapx：mapbox-gl-native。它期望在服务器上提供更易于（且更高效？）的呈现库。

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

您可以在Deno中复制tileserver-gl并重用其某些源文件（如果许可证适用）。但是，您可能不需要这样做！根据您要完成的任务，您只需使用Docker启动tileserver-gl，并使用Deno从其API endpoints请求静态地图图像即可。

- Caerbannog