mapbox中加载geojson的线型调整

最新推荐文章于 2024-08-16 09:07:30 发布
最新推荐文章于 2024-08-16 09:07:30 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： JavaScript GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011435933/article/details/109220866
版权
博客记录了如何在paint中通过添加'line-dasharray'字段来设置虚实线效果，该字段接受一个数列作为参数，如[5,5]，表示虚实线间隔。虽然官方API是英文且描述不详，但通过实践和代码示例，成功实现了这一功能，并附带了效果图。
摘要由CSDN通过智能技术生成

其实是个很小的功能，但是也记录一下，方便后续查找，其实方法很简单，我就是去翻了官方的api，但是是英文的，而且参数描述的不够详细，也没给demo，所以还是记录一下。就是在paint里面，添加“line-dasharray”字段，字段值为一个数列，譬如[5,5]表示虚实线分别为5米。具体看以下几张图应该就能明白：

这张是官方api说明

这张是代码：

最后是一张效果图：

JaedongXue
关注
专栏目录
050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例
大剑师兰特的GIS世界
10-16 546
演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。
022：Mapbox GL 加载geojson数据，形成热力图，自定义样式
大剑师兰特的GIS世界
04-23 1067
第022个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，形成热力图. paint设置的参数：heatmap-color,heatmap-intensity,heatmap-opacity,heatmap-radius,heatmap-weight,visibility，具体请参考下面的api链接。
mapbox 显示数据
weixin_46243213的博客
10-11 356
mapbox 显示数据
mapbox利用geojson数据来渲染点线面
荣默默的博客
09-27 8518
//针对的是mapbox加载geojson的数据格式去渲染点线面 首先说说source的类型有哪些： source的类型有： 1.type: "geojson" （点（circle）线（line）面（fill）图标（symbol））【map.getSource('geojson').setData(geojson)给数据源赋值】 2.type: "image"（图片）【map.getS...
Mapbox 故事叙述开源项目教程
最新发布
gitblog_00990的博客
08-16 658
Mapbox 故事叙述开源项目教程 storytellingStorytelling with maps template项目地址:https://gitcode.com/gh_mirrors/st/storytelling 项目介绍 Mapbox Storytelling 是一个基于Mapbox平台的开源项目，旨在为开发者和内容创作者提供强大的工具，使他们能够通过地图和交互式故事讲述的方式来...
[Mapbox GL]添加GeoJSON线
每天写一点，进步一点点
12-20 4999
在地图上添加GeoJSON线          body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } /* 用来放置map的div容器 */ mapb
MapBox-gl绘制点及点线
chubu3218的博客
03-15 2063
1.数据来源 setTargets(targets) { this.targets = []//所有目标对象数组 this.tgtID = new Map()//不同ID对应颜色不同 for (let key of this.tgtIdLineData.keys()) { let newArr = [] this.tgtIdLineData.set(key,newArr) }
Mapbox添加动态线条
ssy001128的博客
06-07 889
【代码】Mapbox添加动态线条。
mapbox样式规范(style)
Mozifei73的博客
01-16 9641
mapbox样式规范(style)
017：Mapbox GL加载geojson数据，显示Polygon，自定义填充色、边框等
大剑师兰特的GIS世界
04-21 1257
第017个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示Polygon，自定义填充色、边框等。fill的参数：fill-antialias,fill-color,fill-opacity,fill-outline-color,fill-pattern,fill-sort-key,fill-translate,fill-translate-anchor,visibility。具体请参考下面的api链接。
Mapbox-GL样式参考
热门推荐
wyy的博客
09-15 2万+
MapboxGL最近发布了新的版本（0.11.0），其样式文件也由版本7升级到了版本8，如果升级了mapbox-gl模块，那么以前版本的样式文件已经无法使用，对于新的版本主要更改有以下几个方面： ①地图初始化时，地图中心坐标由以前的[纬度，经度]变成了[经度，纬度]，可能是为了保持与Geojson格式的统一； ②样式表升级到8，取消了常量constants属性； ③线和面的layout属性以及
mapbox 绘制虚线
qq_34870529的博客
08-30 2648
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>添加 GeoJSON 线</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.t.
016：Mapbox GL加载geojson数据，显示line，自定义颜色、宽度等
大剑师兰特的GIS世界
04-20 1336
第016个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示线条。
基于MapboxGL的样式文件自动生成图例
wyy的博客
09-14 8612
MapboxGL是一个基于WebGL的地图绘制引擎，其地图样式采用一个json格式的文件进行描述，但是对于渲染的地图，Mapbox并没有提供图例的生成方法，因此需要自己根据这个样式描述文件来生成地图图例。 MapboxGL中数据与样式是分开的，地图的所有样式都是由这个唯一的样式描述文件来描述。并不是地图中的所有样式都需要图例，例如简单的文字注记就不需要生成图例，而且MapboxGL的样式中对同一个
使用mapbox 绘制台风风圈、台风路径
m0_46478007的博客
09-15 2204
计算台风风圈范围，使用mapbox添加台风播放动画
进阶mapbox GL之paint和filter
LZUGIS
03-28 6131
概述 通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识，本节结合一些示例，重点讲述一下mapbox GL里面的filter和paint的用法。 说明 本文中的示例数据源是北京的区边界数据，格式为geojson，数据字段与详情如下： filter filter是layer里面的一个属性，通过一些条件表达式实现仅显示与过滤器匹配的要素，即图层的过滤显示，其官方说...
mapbox-gl 实现铁路线黑白交替样式
我哎GIS博客
07-18 596
白色线图层放到下面，上面图层放line-dasharray样式的黑色虚线图层。希望对您有帮助，点点关注不迷路~
Mapbox: style样式规范——图层篇
weixin_48189070的博客
06-24 8564
Mapbox的style是定义地图视觉效果的文档，决定了地图绘制什么样的数据，以怎样的顺序绘制，以及以怎样的样式绘制。 本文详细解释了样式文件中常用图层属性的参数以及使用方法。
mapbox总结
zx960103的博客
12-26 5504
mapbox
mapboxgl 中对于geojson进行筛选
11-29
mapboxgl 对于 geojson 进行筛选的实现是通过使用 Mapbox GL JS 库提供的 `setFilter` 方法来设置过滤器。过滤器可以根据特定的条件来筛选和显示地图上的要素。 使用 `setFilter` 方法需要提供两个参数：图层的名称和过滤器的条件。图层名称可以通过在创建地图时定义或获取地图的 `layernames` 属性来获取。 过滤器的条件是一个数组，其元素由两部分组成：要筛选的属性和筛选条件。通常，要筛选的属性是要素属性的名称，如 "type" 或 "name"，筛选条件可以是比较运算符（如等于、不等于、大于、小于等）或逻辑运算符（如和、或、非等）。 例如，如果我们有一个名为 "cities" 的图层，并且我们想要筛选出所有名称为 "New York" 的城市要素，我们可以使用以下代码： ```javascript map.setFilter('cities', ['==', 'name', 'New York']); ``` 上述代码中，`setFilter` 方法将名为 "cities" 的图层的过滤器设置为一个数组，数组的第一个元素是比较运算符 "=="，表示要筛选的属性值等于后面的值。第二个元素是要筛选的属性名称 "name"，第三个元素是筛选的条件值 "New York"。 除了等于运算符，`setFilter` 方法还支持其他比较运算符，如"!="（不等于）、">"（大于）、">="（大于等于）、"<"（小于）和"<="（小于等于）等。 通过设置过滤器，我们可以根据特定的条件对地图上的要素进行筛选，并根据筛选结果来显示或隐藏特定的要素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值