环境

  • Mapbox v10.5.0
  • Xcode 14.3.1

基础的图形显示

标准的geojson矢量文件

在线生成展示geojson地址 https://geojson.io

shape
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              116.4578773269638,
              61.068686560065515
            ],
            [
              115.78931543914507,
              60.457089046558025
            ],
            [
              116.776240130686,
              60.58242789052406
            ],
            [
              116.4578773269638,
              61.068686560065515
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

通过线和面显示多边形

layer和source的添加，需要通过初始化json添加，或者在地图加载完毕后，再通过函数添加

//定义图层和数据源唯一id
let sourceId = "source"
let fillId = "layer-fill"
let lineId = "laayer-line"

var source = GeoJSONSource()
source.data = .empty
try? mapView.mapboxMap.style.addSource(source, id: sourceId)

// 添加面
var shapeFill  = FillLayer(id: fillId)
shapeFill.fillColor = .constant(StyleColor(.red.withAlphaComponent(0.5)))
shapeFill.source = sourceId
try? mapView.mapboxMap.style.addLayer(shapeFill)

//添加线
var shapeLine  = LineLayer(id: lineId)
shapeLine.source = sourceId
shapeLine.lineColor = .constant(StyleColor(.red))
shapeLine.lineWidth = .constant(2)
try? mapView.mapboxMap.style.addLayer(shapeLine)

//赋值图形数据
let geojson = ... //上面标准json字符串
try? mapView.mapboxMap.style.setSourceProperty(for: sourceId, property: "data", value: geojson)

动态修改图形样式（表达式）

相关表达式参考 STYLE SPECIFICATION

方法一

通过json包含颜色，表达式读取属性,添加颜色属性 color

shape
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "fillcolor": "rgba(255,0,0,0.5)",
        "linecolor": "rgba(255,0,0,1)"
      },
      "geometry": {
        "coordinates": [
          [
            [
              116.4578773269638,
              61.068686560065515
            ],
            [
              115.78931543914507,
              60.457089046558025
            ],
            [
              116.776240130686,
              60.58242789052406
            ],
            [
              116.4578773269638,
              61.068686560065515
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

修改显示代码

shapeFill.fillColor = .expression(Exp(.get){ "fillcolor" })
shapeLine.lineColor = .expression(Exp(.get){ "linecolor" })

方法二

通过表达式判断图形属性，修改颜色

shape
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "123456",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              116.4578773269638,
              61.068686560065515
            ],
            [
              115.78931543914507,
              60.457089046558025
            ],
            [
              116.776240130686,
              60.58242789052406
            ],
            [
              116.4578773269638,
              61.068686560065515
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

修改显示代码,选中显示颜色rgba(255,255,0,0.5)

let selectIds = ["123456"]
let selExp:[Any] = ["in", ["id"], ["literal", selectIds] as [Any]]
let fillcolor:[Any] = ["case",
                        ["==", selExp,true] as [Any], "rgba(255,255,0,0.5)",
                        "rgba(255,0,0,0.5)"
                      ]
let linecolor:[Any] = ["case",
                        ["==", selExp,true] as [Any], "rgba(255,255,0,1)",
                        "rgba(255,0,0,1)"
                      ]
try? mapView.mapboxMap.style.setLayerProperty(for:fillId , property: "fill-color", value:fillcolor)
try? mapView.mapboxMap.style.setLayerProperty(for:lineId , property: "line-color", value:linecolor)

通过feature-state属性修改图形样式

修改需要基于"id"修改

修改显示代码

shapeFill.fillColor = .expression(Exp(.featureState){ "fillcolor" })
shapeLine.lineColor = .expression(Exp(.featureState){ "linecolor" })

动态修改feature-state属性

mapView.mapboxMap.setFeatureState(sourceId: sourceId, featureId: "123456", state: ["fillcolor": "rgba(255,0,0,0.5)","linecolor": "rgba(255,0,0,1)"])