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

news2024/11/14 18:31:04

文章目录

  • 前言
  • 表达式逻辑
    • 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
]

mapbox表达式转数学表达式

mapbox转换变为直观的数学表达式,用于表达式回显

function flat(arr) {
  const isDeep = arr.some(item =>  //判断是否包含需要拍平的数组
    item instanceof Array
  )

  if (!isDeep) {
    return arr    //不需要拍平,返回
  }
  const res = Array.prototype.concat.apply([], arr)  //需要拍平,拍平第一层
  return flat(res)  //递归

}

// 由mapbox支持的表达式转换为普通表达式
export function express2formula(input) {
  const _arr = flat(input).filter(item => item !== 'get')
  const sign_arr = _arr.filter(item => ['+', '-', '*', '/'].includes(item)).reverse().map(item => ` ${item} `)
  const data_arr = _arr.filter(item => !['+', '-', '*', '/'].includes(item))
  return (data_arr.reduce((r, a, i) => r.concat(a, sign_arr[i]), [0]).slice(1, -1)).join("")
}

数学表达式转mapbox表达式

直观的数学表达式经过转换变为mapox可识别的表达式,用于更改地图样式

// 递归判断条件
function notFlatten(arr) {
  const res = arr.filter((item) =>
    ['+', '-', '*', '/'].includes(item)
  )
  return res.length > 1
}

function reSort(arr) {
  return [arr[1], arr[0], arr[2]]
}

// 将get拼装给非数字和计算符 ['+', '-', '*', '/']
export function pickGet(arr) {
  return arr.map((item) => {

    if (['+', '-', '*', '/'].includes(item)) {
      return item
    }
    if (!isNaN(item)) {
      return Number(item)
    }
    // if (Array.isArray(item)) {
    //   getExpression(item)
    // }
    return ['get', item]
  })
}


// 拼装获取mapbox支持的表达式
export function formula2express(arr) {
  console.log(reSort(arr))
  const l = arr.length
  if (l === 3) return reSort(arr)

  let last = arr[l - 1]
  let first = arr[l - 2]
  const rest = arr.slice(0, l - 2)
  const data = [first, last]
  data.splice(1, 0, rest.length === 3 ? reSort(rest) : rest)
  if (notFlatten(data[1])) {
    const _arr = formula2express(data[1])
    data.splice(1, 1, _arr)
  }
  return (data)

}

实现效果

  • 属性字段从下拉框自选,不可手动输入
  • 表达式由输入框负责展现,可以删除字段或者输入数字,不可输入属性字段
  • 运算支持 + - * /,由左向右运算
  • 点击应用效果时会改变样式,若表达式有误则会提示错误

设置图层高
在这里插入图片描述

错误提示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/383381.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Sentence Simplification via Large Language Models 论文精读】

Sentence Simplification via Large Language Models 论文精读InformationAbstract1 Introduction2 Related Work3 Sentence Simplification via LLMs4 Experiments4.1 Evaluation Settings4.2 Automatic Evaluation4.3 Human Evaluation4.4 Qualitative Study4.5 Ablation Stu…

开发同城外卖系统源码时应配置哪些功能?外卖系统源码分析

外卖系统大家都不会陌生,我们都会想到某团、某饿这两个行业top,他们已经成为了年轻人手机必备软件之一,而且除了app端外,他们还很贴心开发了微信小程序的版本,免去了下载app的繁琐,打开微信就能使用。那么&…

阿里开源自研高性能核心搜索引擎 Havenask

去年12月,阿里开源了自研的大规模分布式搜索引擎 Havenask(内部代号 HA3)。  Havenask 是阿里巴巴内部广泛使用的大规模分布式检索系统,支持了淘宝、天猫、菜鸟、优酷、高德、饿了么等在内整个阿里的搜索业务&#…

点击糖化学试剂361154-30-5,Ac4ManNAz,1,3,4,6-四-O-乙酰基-N-叠氮乙酰基氨基甘露糖

Ac4ManNAz产品描述:N-叠氮乙酰基甘露糖胺-三酰化(AC4MANAZ)可用作标记试剂,点击糖化学试剂,叠氮化物基团允许它与炔烃反应,是一种含叠氮的代谢糖蛋白标记试剂,叠氮化物修饰的蛋白质可以通过与炔…

webman apidoc安装、生成接口文档

1 npm install apidoc -g 2 apidoc -h 3 新建 apidoc.json { "name": "demo", "version": "1.0.0", "description": apidoc demo", "title": "demo",…

如何提高大数据传输的安全性

面对大数据传输安全相关的挑战和威胁,业界针对安全防护技术进行了针对性的实践和调研。本文主要从平台安全、数据安全、隐私保护三个方面对大数据传输安全技术的发展进行阐述。 如何安全地改进大数据传输? 平台安全、数据安全、隐私保护等相关技术不断完…

springboot原项目配置文件迁移至nacos

目录一、配置文件迁移nacos1.安装nacos2.添加依赖3.改造service-product3.改造server-gateway一、配置文件迁移nacos 1.安装nacos 1,如果之前安装过nacos,nacos数据保存至mysql,先删除已安装的nacos,再安装 docker stop nacos …

自动化测试——多窗口切换和切换frame

这里写目录标题一、多窗口切换1、base.py:公共代码2、切换句柄的方式1,通过for循环3、切换句柄的方式2,通过索引切换4、源代码二、frame窗口1、什么是frame?2、Frame 分类3、判断要定位的元素在不在frame中两种方式方式一:鼠标选…

【Linux】P1 Linux 基础命令(3月3日完成)

Linux 基础命令Linux 目录结构Linux 命令ls 展示命令cd 目录切换命令pwd 查看当前工作目录mkdir 创建新的文件夹其他补充知识前言 本节内容: Linux 基本命令 下节内容: Linux vi 编辑器。 链接: 正文 Linux 目录结构 在耳熟能详的 Windows …

openpnp - error - 吸嘴没下降到板子上, 就将元件松开

文章目录openpnp - error - 吸嘴没下降到板子上, 就将元件松开概述笔记ENDopenpnp - error - 吸嘴没下降到板子上, 就将元件松开 概述 以前用过国内一家openpnp厂家出的设备, 他们家的openpnp是自己改过的. 贴片流程已经走过一遍. 这次还是按照以前记录的笔记, 按照国内那家的…

认识JavaScript中的防抖函数

👨 作者简介:大家好,我是Taro,前端领域创作者 ✒️ 个人主页:唐璜Taro 🚀 支持我:点赞👍📝 评论 ⭐️收藏 文章目录前言一、防抖是什么?1. deounce-v1的基本…

营业执照注册资本是什么意思

一、营业执照注册资本是什么意思 营业执照上的注册资本是指合营企业在登记管理机构登记的资本总额,是合营各方已经缴纳的或合营者承诺一定要缴纳的出资额的总和。我国法律、法规规定,合营企业成立之前必须在合营企业合同、章程中明确企业的注册资本&…

计算机网络安全基础知识2:http超文本传输协议,请求request消息的get和post,响应response消息的格式,响应状态码

计算机网络安全基础知识: 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得去找开发,测开 测开的话,你就得学数据库,sql,oracle,尤…

三周爆赚千万 电竞选手在无聊猿游戏赢麻了

如何用3个星期赚到1千万?普通人做梦都不敢想的事,电竞职业选手Mongraal却用几把游戏轻易完成,赚钱地点是蓝筹NFT项目Bored Ape Yacht Club(BAYC无聊猿)出品的新游戏Dookey Dash。 这款游戏类似《神庙逃亡》&#xff0…

【python】python-socketio+firecamp使用踩坑指南

server.py: import eventlet import asyncioeventlet.monkey_patch()import socketio import eventlet.wsgisio socketio.Server(async_modeeventlet, cors_allowed_origins*) # 指明在evenlet模式下sio.event def connect(sid, environ):print(f"connect, sid{sid}, e…

个人网站如何集成QQ快捷登录功能?

目录 一、网站集成QQ快捷登录的好处 二、网站接入QQ快捷登录具体步骤 (1)登录到QQ互联官网 (2)进行个人开发者认证 (3)创建网站应用 (4)填写网站资料 三、如何在本地开发环境…

ERP原理与应用教程(作业1)

1.请对下图中所述的各管理理念和方法,分别用2-3句话对其进行解释说明。(答案不唯一,可自行补充) MRP(Material Requirements Planning)是物料需求规划的英文缩写。它是一种应用于生产管理的计划系统&#x…

入职字节测试岗外包一个月,我离职了...

有一种打工人的羡慕,叫做“大厂”。真是年少不知大厂香,错把青春插稻秧。但是,在深圳有一群比大厂员工更庞大的群体,他们顶着大厂的“名”,做着大厂的工作,还可以享受大厂的伙食,却没有大厂的“…

多元统计方法众多,分类还是排序?约束排序还是非约束排序?哪种方法或技术更适合我的研究目的或数据?

生态环境领域研究中常常面对众多的不同类型的数据或变量,当要同时分析多个因变量(y)时需要用到多元统计分析(multivariate statistical analysis)。多元统计分析内容丰富,应用广泛,是非常重要和…

【Git】git命令(全)

Git1、本地操作2、版本管理3、远端仓库4、分支管理5、缓存stash6、遗留rebase7、标签管理8、解决冲突9、参考教程10、示例代码1、本地操作 Linux安装git:yum install git查看git版本 git version查看git设置 git config --list设置git属性 git config --global初始…