mapbox-gl实现 2.5D 图层高度编辑器

原创

已于 2023-03-03 10:07:33 修改 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webgis #mapbox

于 2023-03-02 20:55:28 首次发布

文章介绍了如何创建一个2.5D高度图层编辑器，核心是理解Mapbox表达式规则并使用递归算法进行转换。编辑器将复杂的Mapbox表达式转化为直观的数学表达式，反之亦然，便于编辑和应用到地图样式中，支持2.5D建筑物高度的编辑。

文章目录

前言
表达式逻辑
- mapbox表达式转数学表达式
- 数学表达式转mapbox表达式
实现效果

前言

mapbox-gl 支持表达式编辑 2.5D 建筑物高度，但是 style 文件原生的表达式很不直观，本文实现一个简单的 2.5D高度图层编辑器，核心是理解mapbox表达式规则与递归算法。界面如下：

在这里插入图片描述

表达式逻辑

mapbox 表达式规则建议认真参考官网，复杂表达式的组装方式需要自己去 mapbox-studio 官网配图，下载style文件查看。这里列举两个输入式与mapbox表达式的关系：

const input1 = ['F1', '*', 'F2', '/', 'F3']
const result1 =
  [
    "/",
    [
      "*", ["get", "F1"], ["get", "F2"]
    ],
    ["get", "F3"]
  ]

const input2 = ['F1', '*', 'F2', '/', 'F3', '-', '10']
const result2 = [
  "-",
  [
    "/",
    [
      "*", ["get", "F1"], ["get", "F2"]
    ],
    [
      "get",
      "F3"
    ]
  ],
  10
]