首页 > 解决方案 > MapBox GL - 基于客户端中的数据以主题方式渲染 GeoJson

问题描述

我有一个显示美国各州的 geoJson 图层,只有一个 ID,没有其他属性。

我在内存中还有一个本地数据数组,其中包含许多关于这些州的属性:人口、农田英亩数、销售税率等。其中一个属性是 geoJson 层中的 ID。所以我应该能够将本地数组与 geoJson 层中的特征连接起来。

我希望能够根据这些属性中的任何一个对状态进行主题样式化,从而允许用户选择属性。我在 MapBox 中看到的有关 GeoJson 图层主题样式的所有示例都要求(1)属性存在于 geoJson 本身中,以及(2)您提前定义属性和样式规则(我不确定是否有稍后更改此设置的方法)。

在其他地图库中,我认为包括Leaflet,您可以定义一个绘制函数,并传入该特征。MapBox GL中有这样的东西吗?

谢谢。

标签: mapbox-gl-js

解决方案


您可以通过将 geojson 数据与您的“属性”数据连接到单个 geojson 功能集合中来让您的生活更轻松。

完成后,您可以使用map.setPaintProperty(layerId, ...)基于用户交互更新图层样式:https ://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

从文档开始:

value(any) 要设置的绘制属性的值。必须是适合该属性的类型,如 Mapbox Style Specification 中所定义。

您可以设置样式规范支持的任何内容,甚至是插值数据驱动的属性,这意味着您可以设置和更新在新添加该图层时可以配置的图层的任何属性。当然,您不能通过一次调用设置多个绘制/布局属性,但您可以轻松地将其抽象出来。

这可能有点牵强,但假设您所谓的“主题”只是您从用户交互中派生的绘画属性和值的集合。您可以将您的“主题”编码为有效的地图框样式,并通过map.setStyle(...)一次调用有效地更改多个属性。RemebersetStyle()可以接收一个样式 url,也可以接收一个完整的样式对象。


推荐阅读