Mapbox GL JS提供了强大的查询检索功能,我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。
例如:我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值,我们可以用mapbox的map.querySourceFeatures()方法搞定。
该方法可以查询出某一图层的所有要素(包括要素的属性值),如果你想筛选部分要素,只需要在参数中设置Filter即可。
使用方法如下:
var relatedFeatures = map.querySourceFeatures('counties', {
sourceLayer: 'original',
filter: ['in', 'COUNTY', feature.properties.COUNTY]
其中 counties 为某一个source的id
'source-layer': 'original'与所要查询的图层相同
filter为选择器,后面是要查询的条件,很多时候,filter选择器用的好可以省掉后台很多工作。
官方文档https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures
官方Demo https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/
Mapbox GL JS提供了强大的查询检索功能,我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。例如:我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值,我们可以用mapbox的map.querySourceFeatures()方法搞定。该方法可以查询出某一图层的所有要素(包括要素的属性值),如果你想筛选部分要素,只需要在参数中设置Filter即可。使用方法如下:var relatedFeatures = map.querySourceFeatures('c
import mapboxgl from 'mapbox-gl'
import * as THREE from 'three'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader';
import {Threebox} from 'threebox-map';
/*Load gltfdraco model*/
let data = {
id: "",
背景分析:采用Layer绘制方案中存在很多情况下需求在一张地图绘制n个属性显示的问题,例如行政区划面,边界等等。例如如下场合
未知多个元素汇集在同一张地图实例上去做显示,编辑等效果。
处理方案:
1.第一反应是N个layer叠加显示
优点:数据处理简单,执行编辑方案简单
缺点:需要使用存储全局变量多,绘制性能占用大,内存占用大,后续清理图层,清理数据麻烦
2.单图N元素的显示
核心利用 数据组装时 组装 features=[];
优点:需要使用存储变量少,绘制性能占用低,图层唯一,数据,图层清理简单。整体
地图上大部分的动态显示效果吗,如图标,区域点,线,面等都是基于layer来实现的,
mapbox中的layer主要存在以下几种类型:background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。其中只有background的显示不依赖source。
background
map.loadI...
queryForMap执行结果为空或数据大于一条时会抛异常,封装queryForMap的源码中规定了它的执行结果只能且必须是一条数据,否则就抛异常,所以只有在确定查询结果有且只有一条数据的时候使用;因为此方法的局限性太大,而且很容易就会犯这种错,所以建议使用queryForList 比如可以这样写
public Map<String, Object> aaa(String ord_...
映射框层控制
这是受Gartrell Group图例控件启发的Mapbox GL JS / MapLibre地图的简单图层控件。 图层需要已经存在于地图中。 每层仅应添加到控件一次。 该控件不影响地图图层索引。 应当按照将图层添加到地图的相同顺序将图层添加到控件(这意味着最上面的图层最后添加)。 该控件只是调整图层的可见性布局属性。 在分组控件中,组名可切换组中的所有图层。 控件可以具有与其他图层一样切换的隐藏图层。 如果图层是直线,圆形或单色填充,则图层会自动添加图例。 他们也可以用HTML编写图例。
理想情况下,层控制和操作层的配置应相同。 该控件将为打开的任何图层添加url参数,从而允许共享地图状态。 如果需要此功能,则最好先关闭所有图层(“可见性”:“无”),然后让控件使用查询参数将其打开,因为此功能不会关闭最初可见的图层。
图例使用超棒的字体。
这是一个很大的发展中,可能会
Mapbox 的图层样式可以通过设置图层的样式属性来修改。
要修改 Mapbox 地图上的图层样式,您需要使用 Mapbox 的地图可视化工具,例如 Mapbox Studio 或者使用 Mapbox 的地图开发库,如 Mapbox GL JS。
在 Mapbox Studio 中,您可以使用地图可视化工具来创建和编辑地图。您可以选择图层,并在图层属性面板中设置图层的样式属性,如颜色、线宽、图标等。
在使用 Mapbox GL JS 开发地图应用程序时,您可以使用 setPaintProperty() 方法来设置图层的样式属性。例如,您可以使用以下代码来修改图层的颜色:
map.setPaintProperty('my-layer', 'fill-color', 'red');
请注意,您需要确保图层存在并且已添加到地图中,才能对其进行样式修改。