时间戳

首页 > 解决方案 > Mapbox 圆形颜色的数据驱动属性

mapbox - Mapbox 圆形颜色的数据驱动属性

问题描述

我在 mapboxgl 的实例上有圆圈，我想通过属性通知其颜色：“num_asc_properties”，它是一个整数。我正在使用有条件的“案例”来根据返回的整数设置颜色。然而，圆圈出现了，但没有改变，全是黑色的。我的功能来源是我在 github 上托管的 geoJSON 对象。

  'circle-color': [
            "case",
            [">=", ["get", 'num_asc_properties'], 100],
            color4,
            [">=", ["get", 'num_asc_properties'], 10],
            color3,
            [">=", ["get", 'num_asc_properties'], 3],
            color2,
            [">", ["get", 'num_asc_properties'], 0],
            color1,
            white
          ]

这是我的 geoJson 对象的示例：

{
        "type": "Feature",
        "properties": {
            "property_location": "344-348 DUNCAN AVE.",
            "owners_name": "HOUSING AUTHORITY OF JERSEY CITY",
            "owners_mailing_address": "400 ROUTE 1",
            "city_state_zip": "JERSEY CITY, NJ  07306",
            "Latitude": "40.730307",
            "Longitude": "-74.08450571428571",
            "property_full_address": "344-348 Duncan Ave., Jersey City, NJ",
            "owners_full_address": "400 ROUTE 1, JERSEY CITY, NJ  07306",
            "gcode": "344, Duncan Avenue, Jersey City, Hudson County, New Jersey, 07306, United States",
            "asc_properties": "['514 NEWARK AVE.', '88 ERIE ST.', '57 DALES AVE.', '547 MONTGOMERY ST.', '20 FLORENCE ST.', '194 CORNELISON AVE', '198 CORNELISON AVE', '200 CORNELISON AVE', '206 CORNELISON AVE', '214 CORNELISON AVE', '557 MONTGOMERY ST.', '62 FREMONT ST.', '16-134 WILMOT AVE.', '326 DUNCAN AVE.', '344-348 DUNCAN AVE.', '354 & 358 DUNCAN AVE.', '39-85 HARVEY AVE.', '229-235 FREEMAN AVE.', '349 WOODWARD ST.', '296 WOODWARD ST.', '306 WOODWARD ST.', '302-332 WOODWARD ST.', '340 WOODWARD ST.', '511 GRAND ST.', '507 GRAND ST.', 'VAN HORNE ST.', '471 PACIFIC AVE.', '52 CARBON ST.', '331 RANDOLPH AVE.', '380-390 ARLINGTON AVE.', '254 BERGEN AVE.', '140 STEGMAN ST.', '146 STEGMAN ST.', '148 STEGMAN ST.', '176 DWIGHT ST.', '125 DWIGHT ST.', '107 DWIGHT ST.', '103 DWIGHT ST.', '199 OCEAN AVENUE', '92 DANFORTH AVENUE', '71 CATOR AVE.', '72 DANFORTH AVE.', '82 DANFORTH AVE.', '15 OLD BERGEN RD.', '61 MERRITT ST.']",
            "num_asc_properties": "59",
            "units": "2"
        },

因此，对于此功能，我希望圆圈的颜色为 color3，因为 59 小于 100 但大于 10。我不确定自己做错了什么。

标签： mapboxmapbox-gl-js

解决方案

我没有做的是嵌套一个“to_string”表达式：

'circle-color': [
            "case",
              [">=", ["to-number", ["get", 'num_asc_properties']], 100],
              color4,
              [">=", ["to-number", ["get", 'num_asc_properties']], 10],
              color3,
              [">=", ["to-number", ["get", 'num_asc_properties']], 3],
              color2,
              [">", ["to-number", ["get", 'num_asc_properties']], 0],
              color1,
              white
          ]

推荐阅读