mapbox根据缩放等级显示图标上的文字说明

有玉微凉，是为樱琅

已于 2024-01-15 17:45:30 修改

阅读量738

点赞数

分类专栏： mapbox+leaflet 文章标签： mapbox webgis javascript 前端 vue.js

于 2023-04-20 20:31:52 首次发布

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/130275053

版权

mapbox+leaflet 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家。

成果图

请添加图片描述

笨笨的办法

搞两个图层，缩放等级低的时候，显示一个图层，缩放等级高的时候，显示另外一个有文字说明的图层

聪明的办法

利用mapbox的表达式，这里的意思是缩放等级在0-11级的时候，文字说明的size是0，然后从12开始，文字的size是12，完美解决~

    'text-size':{
        "type": "interval",
        "stops": [
            [0, 0],
            [11, 0],
            [12, 12]
        ]
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

有玉微凉，是为樱琅

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mapbox根据缩放等级显示图标上的文字说明

mapbox根据缩放等级显示图标上的文字说明
复制链接

扫一扫

专栏目录

mapbox添加symbol图层显示文字详情

qq_40567849的博客

01-12

3068

mapbox添加symbol文字图层

【MAPBOX基础功能】21、mapbox绘制自动旋转的图标

汪同学丶的博客

06-24

1356

mapbox绘制自动旋转的图标

参与评论您还未登录，请先登录后发表或查看评论

关于mapbox的一些学习

最新发布

Elaine20132014的博客

06-14

579

添加图层/删除图层/添加图片/删除图片/修改图层层级/图层显隐。“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。"GeometryCollection"：几何集合。"FeatureCollection"：特征集合。GeoJSON是一种对各种地理数据结构进行。"MultiLineString"：多线。"MultiPoint" ：多点。"MultiPolygon"：多面。"LineString"：线。"Feature"：特征。"Point" ：点。"Polygon"：面。

mapBox自动缩放地图到合适的视野级别。

03-21

1230

mapBox自动缩放地图到合适的视野级别。

百度地图添加label文字提示，根据缩放级别，显示label和改变文字大小

u013868665的博客

04-01

5119

直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>详情</title> </head> <body> <div> <div id="allmap" st...

《MapboxGL 基础知识点》- 放大/缩小/定位/级别

前端技术

07-31

1357

使用新旧值之间的动画转换更改中心、缩放、方位、俯仰和填充的任意组合。对于选项中未指定的任何详细信息，贴图将保留其当前值。：使用动画过渡将贴图缩放到指定的缩放级别。

mapbox控制缩放等级来显示隐藏视图里所有要素popup

Sakura1998gis的博客

04-20

1454

mapbox控制缩放等级来显示隐藏视图里所有要素popup

【WebGIS实例】（3）MapboxGL实现矢量要素点击高亮

ReBeX

11-23

1306

mapbox gl js 实现矢量要素点击高亮

从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能

tigerhhzz的博客

06-13

1417

/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${

mapbox低层级Symbol图层不显示问题

qq_44838329的博客

08-18

447

mapbox 低层级不显示

MapBoxGL.JS 画圆（半径以米或千米为单位）实现跟随地图缩放而缩放

qq_33950912的博客

10-20

2240

MapBoxGL.js 实现半径以固定单位画圆，跟随地图缩放而改变大小

mapbox实现线要素的文字标注功能

Sakura1998gis的博客

06-12

2115

mapbox实现线要素的文字标注功能

mapbox显示多种文本格式并设置其样式

weixin_44766633的博客

11-19

3317

这里需要用到几个方法。 setLayoutProperty 设置指定样式图层中布局属性的值。 Parameters layerId(string)需要在其中设置布局（layout）属性的图层 ID。 name(string)需要设置的布局属性名称。 value(any)布局属性的值。必须是一种符合 Mapbox Style Specification 规定的属性类型。 options(Object?)(default {}) eg: map.setLayoutProperty('my-layer', 'vi

MapBox实现要素点击高亮的几种思路（点击颜色变化）

lz5211314121的博客

11-14

2057

当点击要素的时候，会触发一个featureClick事件，在这个点击事件当中，我们重新设置B图层的过滤条件filter，使得我们选中的要素成为满足filter条件的要素，这样就会单独把我们选中的要素作为B图层所要展示的要素展示出来，进而叠加在A图层上，实现了高亮。实现思路是这样的，mapbox 中geojson图层展示的时候可以根据filter来进行局部的部分的展示，因此我们的思路就是准备一个和A图层一样的高亮图层B通过设置B的filter来单独展示某个要素。实际上高亮图层B就是专门为高亮而创建的。

map-box地图点击图标高亮事件

zx960103的博客

10-05

1120

【代码】map-box地图点击图标高亮事件。

Map创建自定义图片图层，图片会随着地图缩放而缩放，uniapp、高德、腾讯、百度

qq_39891453的博客

09-06

7770

Map创建自定义图片图层，图片会随着地图缩放而缩放

mapbox gl 3D建筑物高亮显示

SUN 的博客

06-11

1653

实现如上图效果，代码如下，同时可以获取要素属性 map.on('mousemove',function(e){ var features=map.queryRenderedFeatures(e.point,{layers:['park-boundary']}) if(features.length>0){ map.setPaintProperty('park-boundary','fill-extrusion-color','#faafee') }els..

使用mapboxgl 实现特定的地图效果

boke的博客

12-05

7007

使用mapboxgl 实现特定的地图效果最近完成的一个项目,dashboard 地图模块的需要和第三方对接，对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求，mapboxgl 库对我来说很陌生。学习研究一段时间，再基本实现了产品设计的地图交互功能后，我在这里写记录。先上张设计图：一、要求实现的功能 1.加载深圳地图瓦片、颜色采用暗色调 2.地图附有蓝色遮罩层，鼠标hover时，该区域高亮并展示相应的数据 3. 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要

mapbox 图标随地图缩放

06-01

要实现 Mapbox 图标随地图缩放，您需要使用 Mapbox SDK 提供的 `SymbolLayer` 和 `PropertyFactory`。以下是示例代码： ```java // 创建 SymbolLayer SymbolLayer symbolLayer = new SymbolLayer("symbol-layer-id", "source-id"); // 设置 SymbolLayer 的图标 symbolLayer.setProperties( PropertyFactory.iconImage("your-icon-image-id"), PropertyFactory.iconAllowOverlap(true), PropertyFactory.iconIgnorePlacement(true) ); // 添加 SymbolLayer 到 Mapbox 地图 mapboxMap.addLayer(symbolLayer); // 监听地图缩放事件 mapboxMap.addOnCameraMoveListener(new MapboxMap.OnCameraMoveListener() { @Override public void onCameraMove() { // 获取当前地图缩放级别 double zoomLevel = mapboxMap.getCameraPosition().zoom; // 根据当前地图缩放级别设置 SymbolLayer 的图标大小 symbolLayer.setProperties( PropertyFactory.iconSize((float) zoomLevel) ); } }); ``` 在这个例子中，我们首先创建一个 `SymbolLayer`，然后设置它的图标和一些属性。接着，我们将 `SymbolLayer` 添加到 Mapbox 地图中。最后，我们监听地图缩放事件，并根据当前地图缩放级别动态设置 `SymbolLayer` 的图标大小。请注意，这只是一个简单的示例，您可能需要根据自己的需求对代码进行调整。