MapboxMap 之 Expression（四）

最新推荐文章于 2023-12-26 17:06:46 发布
最新推荐文章于 2023-12-26 17:06:46 发布
阅读量1.1k 收藏
点赞数
分类专栏： MapBoxMap 地图使用指南 文章标签： mapbox Expression
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_thesun/article/details/110392122
版权

系列文章目录

Types

Lookup

Decision

Math

String
Color
Zoom

Heatmap

Feature data
Variable binding
Ramps, scales, curves

目录

前言

一、基本运算

1. 加 （sum）

2. 减 （subtract）

3.乘 （product）

4.除 （division）

5.取余 （mod）

6.幂 （pow）

二、三角函数

1.sin

2.cos

3.tan

三、反三角函数

1.asin

2.acos

3.atan

四、普通函数

1.abs

2.ceil

3.floor

4.sqrt

5.round

6.min

7.max

五、数学常数

1.e

2.pi

六、对数

1.ln

2.ln2

3.log2

4.log10

七、distance

总结

前言

在上一篇中介绍了Expression的描述符操作，本篇是将的按照 Math区分，也可以理解为一些数学运算符,在一些需要动态计算显示的情景下还是很有需要的。

Expression可以按Math分类

一、基本运算

1. 加 （sum）

/**
* 返回输入的总和。
*
* ["+", number, number, ...]: number
*/
Expression sum(@Size(min = 2) Expression... numbers)
Expression sum(@Size(min = 2) Number... numbers)
Expression subtract(@NonNull Expression number) 

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
circleLayer.setProperties(
   circleRadius(sum(10.0f, ln2(), pi()))
 );

2. 减 （subtract）

/**
  * 对于两个输入，返回从第一个输入减去第二个输入的结果。对于单个输入，返回从0减去它的结果。
  *
  * ["-", number, number]: number
  * ["-", number]: number
 */
Expression subtract(@NonNull Number number)
Expression subtract(@NonNull Expression first, @NonNull Expression second) 
Expression subtract(@NonNull Number first, @NonNull Number second) 

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(subtract(10.0f, pi()))
 );

3.乘 （product）

/**
  * 返回输入的乘积。
  *
  * ["*", number, number, ...]: number
   */
Expression product(@Size(min = 2) Expression... numbers) 
Expression product(@Size(min = 2) Number... numbers) 

eg：

  CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(product(10.0f, 2.0f))
 );

4.除 （division）

/**
*返回第一个输入除以第二个输入的浮点数的结果。
*
* ["/", number, number]: number
*/
Expression division(@NonNull Expression first, @NonNull Expression second) 
Expression division(@NonNull Number first, @NonNull Number second)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
  circleLayer.setProperties(
  circleRadius(division(10.0f, 20.0f))
 );

5.取余 （mod）


/**
  * 返回第一个输入除以第二个输入的整数后的余数。
  *
  * ["%", number, number]: number
*/

Expression mod(@NonNull Expression first, @NonNull Expression second)
Expression mod(@NonNull Number first, @NonNull Number second)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
    circleLayer.setProperties(
    circleRadius(mod(10.0f, 10.0f))
);

6.幂 （pow）

/**
 * 返回将第一个输入提高到第二个指定的幂的结果。
 *
 * ["^", number, number]: number
*/

Expression pow(@NonNull Expression first, @NonNull Expression second)
Expression pow(@NonNull Number first, @NonNull Number second) 

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(pow(5.0f, 2.0f))
 );

二、三角函数

1.sin

/**
 * 返回输入的正弦值。
 *
 * ["sin", number]: number
*/   
Expression sin(@NonNull Expression number)
Expression sin(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
    circleRadius(sin(90.0f))
);

2.cos

/**
* 返回输入的余弦值。
*
* ["sin", number]: number
*/  
Expression cos(@NonNull Expression number)
Expression cos(@NonNull Number number)

eg:

 CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(cos(0))
);

3.tan

/**
 * 返回输入的正切值。
 *
 * ["sin", number]: number
*/  
Expression tan(@NonNull Expression number)
Expression tan(@NonNull Number number)

eg:
 
CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(tan(45.0f))
 );

三、反三角函数

1.asin

/**
 * 返回输入的反正弦值。
 *
 * ["asin", number]: number
*/   
Expression sin(@NonNull Expression number)
Expression sin(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(asin(90.0f))
);

2.acos

/**
* 返回输入的反余弦值。
*
* ["acos", number]: number
*/  
Expression acos(@NonNull Expression number)
Expression acos(@NonNull Number number)

eg:

 CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(acos(0))
);

3.atan

/**
 * 返回输入的反正切值。
 *
 * ["atan", number]: number
*/  
Expression atan(@NonNull Expression number)
Expression atan(@NonNull Number number)

eg:
 
CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(atan(90.0f))
 );

四、普通函数

1.abs

/**
*返回输入的绝对值。
*
* ["abs", number]: number
*/
Expression abs(Expression expression)
Expression abs(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(abs(-3.14159265359f))
  );

2.ceil

/**
 *返回大于或等于输入的最小整数。
 *
 * ["ceil", number]: number
 */

Expression ceil(Expression expression)
Expression ceil(@NonNull Number number)

eg：


CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(ceil(3.14159265359))
 );

3.floor

/**
 *返回小于或等于输入的最大整数。
 *
 * ["floor", number]: number
*/   
 Expression floor(Expression expression)
 Expression floor(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(floor(pi()))
 );

4.sqrt

/**
 *返回输入的平方根。
 *
 * ["sqrt", number]: number
*/
 Expression sqrt(Expression expression)
 Expression sqrt(@NonNull Number number)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(sqrt(25.0f))
 );
  

5.round

/**
 *将输入舍入到最接近的整数。中途值从零舍入。例如，[“ round”，-1.5]计算为-2。
 *
 * ["round", number]: number
*/    
Expression round(Expression expression)
Expression round(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
  circleRadius(round(3.14159265359f))
 );

6.min

/**
  *返回输入的最小值。
  *
  * ["min", number, number, ...]: number
*/
Expression min(@Size(min = 1) Expression... numbers)
Expression min(@Size(min = 1) Number... numbers)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(min(3.141, 3.14f, 3.15f))
);

7.max

/**
  *返回输入的最大值。
  *
  * ["max", number, number, ...]: number
*/
Expression max(@Size(min = 1) Expression... numbers)
Expression max(@Size(min = 1) Number... numbers)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(max(3.141, 3.14f, 3.15f))
);
 

五、数学常数

1.e

/**
 *返回数学常数e。
 *
 * ["e"]: number
*/

Expression.e()

eg:

CircleLayer circleLayer20 = new CircleLayer("layer-id", "source-id");
      circleLayer20.setProperties(
      circleRadius(product(literal(10.0f), e()))
);

2.pi

/**
* 返回数学常数pi。
*
* ["pi"]:number
*/
Expression.pi()

eg:

CircleLayer circleLayer21 = new CircleLayer("layer-id", "source-id");
      circleLayer21.setProperties(
      circleRadius(product(literal(10.0f), pi()))
);

六、对数

1.ln

/**
 *返回输入的自然对数。
 *
 * ["ln", number]: number
*/
Expression ln(Expression number)
Expression ln(@NonNull Number number)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(ln(10))
);

2.ln2

/**
  * 返回数学常数ln（2）。
  *
  * ["ln2"]: number
*/

Expression ln2(Expression number)
Expression ln2(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(product(literal(10.0f), ln2()))
);

3.log2

/**
  * 返回输入的以2为底的对数。
  *
  * ["log2", number]: number
*/
Expression log2(Expression number)
Expression log2(@NonNull Number number)

eg：

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
    circleLayer.setProperties(
    circleRadius(log2(2))
);

4.log10

/**
  *返回输入的以10为底的对数。
  *
  * ["log10", number]: number
*/
Expression log10(Expression number)
Expression log10(@NonNull Number number)

eg:

CircleLayer circleLayer = new CircleLayer("layer-id", "source-id");
   circleLayer.setProperties(
   circleRadius(log10(10))
);

七、distance

/**
 * 返回评估的要素和输入几何之间的最短距离（以米为单位）。
 * 输入值可以是Point，MultiPoint，LineString，MultiLineString，Polygon，MultiPolygon， 
   Feature
 * 或FeatureCollection类型的有效GeoJSON。
 * 由于编码几何的精度损失，返回的距离值的精度可能会有所不同，尤其是在缩放级别13以下。
 *
 * ["distance", object]: number
*/
Expression distance(@NonNull GeoJson geoJson) 
 

总结

  • 实现了常用数学运算符，可以让我们进行高度自定义。

mr_sunming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mapbox 代码专题--Expression--数组匹配
m0_37785454的博客
11-20 68
表达式在官网及搜索结果里是相对比较少的。
mapbox-gl-expressions:基于Web的工具，可帮助用户从“停止功能”迁移到表达式
05-12
mapbox-gl-expressions 基于Web的工具，可帮助用户从“停止功能”迁移到表达式。 发展 npm start && open http://localhost:1337/index.html
MapboxMap之Expression(一)
sunming的博客
11-25 2204
系列文章目录 前言 目录 系列文章目录 文章目录 前言 一、Expression是什么？ 二、Mapbox GL提供的Expression运算符集有哪些？ 1.元素类 2.读入数据 总结 Expression在mapbox中使用非常广泛，我们可以借助它高度自定义Layer属性的变化。此系列就介绍了Expression的一些常见使用方式与场景。 一、Expression是什么？ Expression是可以将任何布局属性，绘画属性或过滤器的值指定为表达式。 表达式定义..
MapboxMap 之 Expression（五）
sunming的博客
12-03 1131
系列文章目录 TypesLookupDecisionMath String Color Zoom Heatmap Feature data Variable binding Ramps, scales, curves 目录 系列文章目录 前言 一、String 1. concat 2. upcase 3.downcase 二、Color 1.rgb 2.rgba 3.toRgba 三、Zoom 四、heatmap-density 五、FeatureData 1.accumul
MapboxMap 之 Expression（二）
sunming的博客
11-27 993
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习..
【mapbox】使用Expressions实现同一layer不同图标
牧xin的博客
06-28 746
图标数据结构: markerImgs: [ { name: "camera1", url: "static/waterMarkerRed1.png" }, { name: "camera2", url: "static/waterMarkerRed2.png" }, { name: "camera3", url: "static/waterMarkerRed3.png" }, { name: "camera4", url: "static/..
C#之Expression表达式树实例
09-04
在C#编程中，Expression表达式树是一种强大的工具，它允许程序员以数据结构的形式表示代码。这种数据结构便于分析、修改和执行。本篇将深入探讨C#的Expression表达式树，包括其基本原理、使用技巧以及如何通过实例来...
CSS中使用expression表达式
09-25
CSS中的`expression`表达式是一种特定于Internet Explorer的特性，从IE5版本开始支持，它允许开发者使用JavaScript表达式来动态地计算和设置CSS属性。然而，由于其带来的性能问题和浏览器兼容性限制，`expression`...
expression.R
01-03
该资源为博文https://blog.csdn.net/weixin_46111814/article/details/112150509的完整代码。含有6部分的表达式的完整代码，有兴趣的欢迎下载收藏。
Spring实战之使用Expression接口进行表达式求值操作示例
08-25
Spring实战之使用Expression接口进行表达式求值操作示例 Spring框架中提供了一个强大的表达式语言Expression Language（EL），它允许开发者在应用程序中使用表达式来进行计算、赋值、方法调用等操作。Expression ...
056：mapboxGL中layer的layout，paint，filter的属性值表达式说明总结
大剑师兰特的GIS世界
10-19 795
mapbox中 Expressions 是什么 Expressions：表达式集合（并非 style 的属性，只是 layer 的任何 layout布局属性和 paint绘制属性，以及 filter 属性等，它们的值都可以指定成一个表达式 Expression）
MapboxMap 之 Expression（三）
sunming的博客
11-29 893
系列文章目录 TypesLookupDecision Math String Color Zoom Heatmap Feature data Variable binding Ramps, scales, curves 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 在上一篇中介绍了Expression的数组操作，本篇是将的按照 Decision区分，也可以理解为一些比较符，都是高频使用的。 Ex...
Mapbox Style Specification—Expressions
不平凡之路
11-21 2758
最近在弄mapbox的js框架，maobox的框架还是很不错的，把官方文档看了多遍也渐渐有了许多的感觉，之前弄是用android SDK，在android中利用mapbox框架，因为公司有业务牵扯到前台展示，之前的前端是用canvas，没用任何地图框架，这种办法无疑是很累的，而且实现的效果也一般，之前在搞android的时候就看了js的框架的例子，感觉效果很棒，最近就开始研究一下，将自己的需求动态...
mapbox-expressions复合表达式实战
最新发布
m0_37785454的博客
12-26 621
表达式运用在官网及搜索结果里是相对比较少的,这边记录几个比较复杂的业务场景需求，肯定对大家应用有所启发，甚至可以直接使用！
Mapbox GL JS 表达式概述
ScapeD的博客
03-03 3652
表达式（expressions)是Mapbox GL JS的一个高级功能，它为数据的添加和渲染展示提供了更多的灵活性。 表达式的功能包括： 数据驱动样式：根据一个或多个数据属性指定样式规则。 算术：对源数据进行算术运算，例如执行单位转换计算。 条件逻辑：使用基本的if-then逻辑，例如，根据要素中可用的属性甚至名称的长度，准确确定要为标签显示的文本。 字符串操作：使用大写，小写和标题大...
mapbox常用代码
我们一起学前端
06-15 316
123
MapBox 绘制方法
Passerby_OK的博客
07-31 673
MapBox 绘制图形
057：mapboxGL中layout，paint等属性的函数表达说明
大剑师兰特的GIS世界
10-20 592
函数 Function 可以作为其 layout布局类属性和 paint 绘制类属性的属性值。在使用 Function 作为属性值时，实际上是一个对象。
Mapbox常用表达式整理（1）
hequhecong10857的博客
03-30 3036
文章目录概述数据表达式相机表达式组合表达式类型系统 概述 可以将任何layout属性，paint属性或filter的值指定为表达式。Mapbox GL提供的表达式运算符包括： 数学运算符，用于对数值算术和其他运算 逻辑运算符，用于处理布尔值和做出条件判断 字符串运算符 数据运算符，提供对源要素属性的访问 相机运算符，可访问定义当前地图视图的参数 数据表达式 数据表达式允许要素的属性或状态确定其外观。常见的有：get，has，id，或feature-state。 { "circle-color":
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值