首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用typescript反应映射gl

使用typescript反应映射gl
EN

Stack Overflow用户
提问于 2021-09-07 12:58:00
回答 1查看 483关注 0票数 0

大家好,我是比较新的React,但我选择了使用typescript (我也是新手),而不是原始的JS。话虽如此,我在向react-map-gl元素添加层时遇到了问题。下面是我得到的错误代码

代码语言:javascript
运行
复制
Type '{ id: string; type: string; paint: { 'sky-type': string; 'sky-atmosphere-sun': number[]; 'sky-atmosphere-sun-intensity': number; }; }' is not assignable to type 'LayerProps'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type '"symbol" | "sky" | "circle" | "line" | "fill" | "fill-extrusion" | "raster" | "background" | "heatmap" | "hillshade"'.ts(2322)

看起来像是它想要一个枚举?下面是提供的代码片段:

代码语言:javascript
运行
复制
const skyLayer = {
    id: 'sky',
    type: 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  };

这个是给我红色曲线的那个(在图层下面):

代码语言:javascript
运行
复制
<Layer {...skyLayer} />

我尝试遵循的示例代码是:https://github.com/visgl/react-map-gl/blob/6.1-release/examples/terrain/src/app.js

EDIT1:我按照代码中的建议进行了更改,但我似乎无法解决这个问题。下面是我得到的错误:

代码语言:javascript
运行
复制
Type '{ id: string; type: "sky"; paint: { "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }; }' is not assignable to type 'LayerProps'.
  Types of property 'paint' are incompatible.
    Type '{ "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }' is not assignable to type 'BackgroundPaint | FillPaint | FillExtrusionPaint | LinePaint | SymbolPaint | RasterPaint | CirclePaint | HeatmapPaint | HillshadePaint'.
      Type '{ "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }' has no properties in common with type 'HillshadePaint'.ts(2322)
EN

Stack Overflow用户

发布于 2021-09-07 13:00:41

在声明skyLayer时,应取消type的数据类型。因为默认的type将是字符串,并且不能传递给Layer。您可以使用as来完成此操作:

代码语言:javascript
运行
复制
  const skyLayer = {
    id: 'sky',
    type: 'sky' as 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  };
票数 3
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69088645

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档