首页 > 其他分享 >Mapbox样式配置之过滤器表达式

Mapbox样式配置之过滤器表达式

时间:2023-06-03 10:06:20浏览次数:34  
标签:type data source Mapbox 过滤器 my your 表达式 icon

需求
如一个图层,有个属性字段m,值可能有1,2,3,我想等于1和2的时候给红色,等于3的时候给黄色。

解决办法
在 Mapbox 中,你可以使用样式表(Style)来配置图层的样式,包括根据属性字段值来设置不同的颜色。

以下是一个示例,演示如何根据属性字段 m 的值设置图层的颜色:

{
  "version": 8,
  "sources": {
    "my-data-source": {
      "type": "vector",
      "url": "your-data-source-url"
    }
  },
  "layers": [
    {
      "id": "my-layer",
      "type": "circle",
      "source": "my-data-source",
      "paint": {
        "circle-color": [
          "match",
          ["get", "m"],
          [1,2], "red",
          "yellow"
        ],
        "circle-radius": 6
      }
    }
  ]
}

如果想根据属性字段 m 的值设置图标,可以使用 Mapbox 的符号图层(Symbol Layer)和图标样式来实现。

{
  "version": 8,
  "sources": {
    "my-data-source": {
      "type": "vector",
      "url": "your-data-source-url"
    }
  },
  "layers": [
    {
      "id": "my-layer",
      "type": "symbol",
      "source": "my-data-source",
      "layout": {
        "icon-image": [
          "match",
          ["get", "m"],
          ["1", "2"], "your-red-icon",
          ["3"], "your-yellow-icon",
          "your-default-icon"
        ],
        "icon-size": 1
      }
    }
  ]
}

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



标签:type,data,source,Mapbox,过滤器,my,your,表达式,icon
From: https://blog.51cto.com/echohye/6407510

相关文章

  • Java 计算数学表达式(字符串解析求值工具)
    Java字符串转换成算术表达式计算并输出结果,通过这个工具可以直接对字符串形式的算术表达式进行运算,并且使用非常简单。这个工具中包含两个类Calculator和ArithHelperCalculator代码如下:importjava.util.Collections;importjava.util.Stack;/***算数表达式求值*......
  • Java8 Lambda表达式
    学习资料:https://www.bilibili.com/video/BV1ci4y1g7qD/?spm_id_from=333.337.search-card.all.click&vd_source=46d50b5d646b50dcb2a208d3946b1598......
  • 2015.4.28_正则表达式_正则表达式简易教程
    为什么使用正则表达式通过正则表达式,可以:测试字符串内的模式。例如,可以测试输入字符串,以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。替换文本。可以使用正则表达式来识别文档中的特定文本,完全删除该文本或者用其他文本替换它。基于模式匹配从字符串中提......
  • MySQL-正则表达式规范
     MySQL中的正则表达式采用的是PCRE的规范,匹配时按字符进行。RLIKE您可以使用RLIKE语句匹配正则表达式,支持的元字符如下表所示。元字符说明^行首。$行尾。.任意字符。*匹配前面的子表达式0次或多次。+匹配前面的子表达式1次或......
  • Mapbox样式配置之过滤器表达式
    需求如一个图层,有个属性字段m,值可能有1,2,3,我想等于1和2的时候给红色,等于3的时候给黄色。解决办法在Mapbox中,你可以使用样式表(Style)来配置图层的样式,包括根据属性字段值来设置不同的颜色。以下是一个示例,演示如何根据属性字段m的值设置图层的颜色:{"version":8,"so......
  • JSP的page指令+九大内置对象+El表达式
    1. JSP的指令  49  - 指令的作用:指导JSP的翻译引擎如何工作(指导当前的JSP翻译引擎如何翻译JSP文件。)1.1 指令包括哪些呢?  49    - include指令:包含指令,在JSP中完成静态包含,很少用了。    - taglib指令:引入标签库的指令。这个到JJSTL标签库的时候再学习。现在先......
  • Move Zeroes 移动零、Expression Add Operators 表达式增加操作符
    1.MoveZeroes移动零 Givenanarray nums,writeafunctiontomoveall 0'stotheendofitwhilemaintainingtherelativeorderofthenon-zeroelements.Forexample,given nums=[0,1,0,3,12],aftercallingyourfunction, nums shouldbe [1,3,12,......
  • C语言——运算符和表达式
    所谓表达式就是指由运算符、运算量和标点符号组成的有效序列,其目的是说明一个计算过程。表达式可以独立成语句:表达式;运算符按功能分为:算术运算、赋值运算、关系运算、逻辑运算、位运算以及其他运算符1.算术运算符:+-*/%++–(1)/:整数相除,向下取整。inta=3/2;floatb=3/2;fl......
  • python正则表达式之道
    Python使用正则表达式的步骤:1、导入正则表达式模块2、创建Regex对象re.compile(),传入正则表达式3、使用search()方法,传入字符串4、调用group()方法。举例:importre #1ne=re.compile(r'\d\d\d\-\d\d') #2mo=ne.search('yourdatasis456-11.') #3print(mo.gro......
  • 正则表达式原理及其简单实现
    本文从文件依赖依赖这个需求切入,详细阐述了文件依赖分析的实现过程,对于其中所使用到的正则表达式进行原理上的分析,说明了状态机的基本架构以及状态机的最小实现。文件依赖分析如果我想获取某个文件的所有依赖(如下图中的紫色部分),应该怎么做呢【方案1】利用webpack......