基于MapboxGL的样式文件自动生成图例

最新推荐文章于 2024-05-28 14:23:58 发布
最新推荐文章于 2024-05-28 14:23:58 发布
阅读量8.5k 收藏 15
点赞数 2
分类专栏： mapbox 文章标签： 图例 MapboxGL Mapbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wan_yanyan528/article/details/52538686
版权

MapboxGL是一个基于WebGL的地图绘制引擎，其地图样式采用一个json格式的文件进行描述，但是对于渲染的地图，Mapbox并没有提供图例的生成方法，因此需要自己根据这个样式描述文件来生成地图图例。
MapboxGL中数据与样式是分开的，地图的所有样式都是由这个唯一的样式描述文件来描述。并不是地图中的所有样式都需要图例，例如简单的文字注记就不需要生成图例，而且MapboxGL的样式中对同一个数据源（例如：铁路）会有多个样式图层（style layer）描述其样式（例如：灰色的实线图层加白色的虚线图层）。因此基于该样式文件绘制图例至少要先解决两个难题：
1. 从众多的样式中筛选出哪些样式需要绘制图例；
2. 从筛选出的样式中提取哪些样式描述的是同一个数据源。

一、 筛选需要绘制图例的图层

首先我们需要将所有的样式图层进行分类，按照要素类型分为点、线、面三类，分别为pointLayers、lineLayers、polygonLayers。
其次分别从中筛选出需要绘制图例的图层，删掉不需要绘制图例的图层。筛选规则很简单，对于所有要素都需要满足以下条件：
1、当前地图的级别必须在样式图层的可见级别范围之内。例如当前地图为第8级，而某一个样式的可见范围是9-12，那么这个样式是可以被忽略的。
2、图层的visibility属性设置的为“visible”，即必须可见。
理论上来说只要满足以上两个条件，那么这个图层在当前地图级别就是可见的，但是对于点状要素来说还有一个条件：
3、如果为点状要素的样式，则该样式必须具有“icon-image”属性。即该点状符号具有图标，而不是纯文字。

二、 合并同一数据源的图层

经过以上筛选后，上下的样式都是需要绘制图例的，但是有些样式可能描述的是同一个数据源，对于这些样式应该属于一个要素，因此需要合并。怎样判断哪些样式是属于统一数据源呢，基本原则如下：
1、type必须相同，都是线状或都是面状。
2、source属性必须相同，即同一数据源。
3、source-layer属性必须相同，即同一数据图层。
4、filter必须相同，具有相同的数据过滤条件。
满足以上要求被认为是描述的同一个数据要素。

三、 绘制图例

经过以上步骤得到的应该就是所有需要绘制图例的样式了，而要对图例进行可视化就需要选择对应的渲染引擎对图例进行渲染，目前我使用过的有两种渲染方法：
1、采用WebGL渲染
考虑到MapboxGL本身就是基于WebGL渲染的，而现在筛选后的图例的样式正好与地图的样式具有相同的格式，可以考虑直接用MapboxGL渲染到地图上，这时就需要创建geojson数据源。根据点线面三种类型分别创建三种geojson的模板，然后根据筛选出的图例样式的类型，分别获取对应的geojson，并利用图例样式对其进行符号化。
2、采用svg渲染
采用WebGL的方法渲染缺点是不方便编辑，而且采用的经纬度的坐标，相当于重新建立一个map。而svg则更加轻量，并且可以缩放和编辑。
但是svg的样式描述采用的dom属性的方式，因此与不能直接使用筛选的图例样式，而要转换成svg支持的属性。
附件（图例自动生成实例）：
① 一个完整的Style Json文件如下：

{
  "name": "新闻",
  "version": 8,
  "sources": {
    "data2012": {
      "type": "vector",
      "url":"http://192.9.105.205:8090/api/v1/tilesets/foxgis/admin"
    }
  },
  "sprite": "http://192.9.105.205:8090/api/v1/sprites/foxgis/Hk6NFtw8/sprite",
  "glyphs": "http://192.9.105.205:8090/api/v1/fonts/foxgis/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "背景",
      "type": "background",
      "paint": {
        "background-color": "#87c2e4"
      }
    },
    {
      "id": "亚洲面",
      "type": "fill",
      "source": "data2012",
      "source-layer": "asia_a",
      "paint": {
        "fill-color": "#ebecec",
        "fill-opacity": 1,
        "fill-outline-color": "#ebecec"
      }
    },
    {
      "id": "国界",
      "type": "line",
      "source": "data2012",
      "source-layer": "china_l",
      "maxzoom": 11,
      "paint": {
        "line-color": "#e8ae59",
        "line-width": 5
      }
    },
    {
      "id":"国界光晕",
      "type":"line",
      "source":"data2012",
      "source-layer":"china_l",
      "minzoom":3,
      "maxzoom": 11,
      "paint":{
        "line-offset":-3,
        "line-color":"rgba(255, 214, 211, 0.98)",
        "line-width":{
          "stops":[[3,4],[4,6],[6,8]]
        }
      }
    },
    {
      "id": "省界线",
      "type": "line",
      "source": "data2012",
      "source-layer": "boua_prov",
      "minzoom": 4,
      "maxzoom": 9,
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "rgb(150,150,150)",
        "line-width": 1,
        "line-dasharray": [1.5,3]
      }
    },
    {
      "id": "县界",
      "source": "data2012",
      "source-layer": "boua",
      "metadata": {
        "replaceLayer": true
      },
      "minzoom": 7,
      "maxzoom": 11,
      "type": "line",
      "filter": ["==","pac",320111],
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "rgb(0,0,255)",
        "line-width": 2,
        "line-dasharray": [3,3]
      }
    },
    {
      "id":"铁路（实线）",
      "source":"data2012",
      "source-layer":"lrrl",
      "minzoom":7,
      "maxzoom":11,
      "filter":["any",
        ["==","gb",410101],
        ["==","gb",410102],
        ["==","gb",410103],
        ["==","gb",410200]
      ],
      "type":"line",
      "paint":{
        "line-width": 2.4,
        "line-color":"#949494"
      }
    },
    {
      "id":"铁路（虚线）",
      "source":"data2012",
      "source-layer":"lrrl",
      "minzoom":7,
      "maxzoom":11,
      "filter":["any",
        ["==","gb",410101],
        ["==","gb",410102],
        ["==","gb",410103],
        ["==","gb",410200]
      ],
      "type":"line",
      "paint":{
        "line-width":1.2,
        "line-color":"#fff",
        "line-dasharray":[10,10]
      }
    },
    {
      "id": "省名注记",
      "source": "data2012",
      "source-layer": "prov_label",
      "type": "symbol",
      "minzoom": 4,
      "maxzoom": 5,
      "layout": {
        "text-size": 12,
        "text-font": [
          "STXinwei Regular"
        ],
        "symbol-placement": "point",
        "text-field": "{name}",
        "text-max-width": 8
      },
      "paint": {
        "text-color": "rgb(250,0,0)",
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 1.5,
        "text-halo-blur": 1
      }
    },
    {
      "id": "首都注记",
      "type": "symbol",
      "source": "data2012",
      "source-layer": "agnp",
      "filter": ["==","capname","北京"],
      "minzoom": 3,
      "maxzoom": 11,
      "layout": {
        "text-size": 14,
        "icon-image": "star-15",
        "text-font": ["SimHei Regular"],
        "symbol-placement": "point",
        "text-allow-overlap": false,
        "text-offset": [0,1],
        "text-anchor": "top",
        "text-field": "{capname}",
        "text-letter-spacing": 0.02,
        "text-max-width": 8
      },
      "paint": {
        "text-color": "rgb(255,0,0)",
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 1.5,
        "text-halo-blur": 1
      }
    },
    {
      "id": "省会城市注记",
      "type": "symbol",
      "source": "data2012",
      "source-layer": "agnp",
      "filter": ["==","class","AB"],
      "minzoom": 5,
      "maxzoom": 8,
      "layout": {
        "text-size": 15,
        "icon-image": "circle-11",
        "text-font": [
          "SimHei Regular"
        ],
        "symbol-placement": "point",
        "text-offset": [0,0.7],
        "text-anchor": "top",
        "text-field": "{capname}",
        "text-letter-spacing": 0.02,
        "text-max-width": 8
      },
      "paint": {
        "icon-color": "#ff0000",
        "text-color": "rgb(20,20,20)",
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 1.5,
        "text-halo-blur": 1
      }
    },
    {
      "id": "地级市注记",
      "type": "symbol",
      "source": "data2012",
      "source-layer": "agnp",
      "minzoom": 7,
      "maxzoom": 11,
      "layout": {
        "text-line-height": 1.2,
        "text-size": 13,
        "symbol-avoid-edges": true,
        "icon-image": "circle-11",
        "text-ignore-placement": false,
        "text-max-angle": 38,
        "text-font": [
          "SimHei Regular"
        ],
        "symbol-placement": "point",
        "visibility": "visible",
        "text-offset": [0,0.7],
        "icon-optional": false,
        "text-rotation-alignment": "viewport",
        "text-anchor": "top",
        "text-field": "{name}",
        "text-letter-spacing": 0.02,
        "text-max-width": 8
      },
      "paint": {
        "icon-color": "#ff0000",
        "text-color": "#fe001f",
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 1.5,
        "text-halo-blur": 1
      }
    },
    {
      "id": "县注记",
      "source": "data2012",
      "source-layer": "agnp",
      "filter": ["any",["==","class","AE"],["==","class","AF"]],
      "minzoom": 8,
      "maxzoom": 11,
      "type": "symbol",
      "layout": {
        "text-size": 13,
        "icon-image": "circle-stroked-11",
        "text-max-angle": 38,
        "text-font": ["SimHei Regular"],
        "symbol-placement": "point",
        "text-anchor": "top",
        "text-field": "{name}",
        "text-letter-spacing": 0.02,
        "text-max-width": 7
      },
      "paint": {
        "text-color": "rgb(60,60,60)",
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 1.5,
        "text-halo-blur": 1
      }
    }
  ]
}

② 经过第一步筛选后
从中筛选出需要绘制图例的图层，例如其中的“县注记”、“省名注记”等纯文字注记就被剔除掉了，得到的结果如下图，共有10个图层：
共有10个图层
这里我是打算采用svg的绘制方式，所以对其样式进行了转换，只保留了svg需要用到的样式：
这里写图片描述

③ 经过第一步筛选后
以上得到的图例样式有些样式描述的是同一要素，例如铁路有虚线和实线两个图层，国界有边线和光晕两个图层，因此需要进行合并。合并后的结果如下图所示：
这里写图片描述
可以发现合并后剩下8个图层，铁路和国界的两个样式合并到一个数组。

④ SVG绘制

剩下的就是根据这个图例数组绘制svg了，绘制效果如下图：
这里写图片描述

这些图例只是地图上可能需要展示的所有图例，考虑到在实际制图中，可能有些不太重要的要素并不一定需要绘制在地图上，因此我在自动生成图例的基础上加入了人工控制，用户可以自行选择显示哪些图例，并且可以设置图例的列数、顺序、文字内容、字体、字号等属性。
这里写图片描述

这里写图片描述

山上九头鸟
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
篇2：Mapbox Style Specification
席木木的博客
06-03 90
接《篇1：Mapbox Style Specification》，继续解读Mapbox Style Specification。
025：Mapbox GL加载栅格高程模型raster-dem文件
大剑师兰特的GIS世界
04-24 917
第025个本示例的目的是介绍演示如何在vue+mapbox中加载image图像文件。栅格 DEM 源。仅支持 Mapbox Terrain-DEM，您可以将 Terrain-DEM 用于各种视觉和分析应用程序，从样式化地形坡度和山体阴影到为视频游戏生成 3D 地形网格。
mapboxgl-legend:插件可从地图样式添加自动生成的图例
03-28
mapboxgl-legend 通过解析图层绘制表达式，将图例添加到mapbox-gl地图。 当前支持的属性： fill-color circle-color circle-radius 当前支持的表达式： match interpolate step 开始吧 安装npm软件包 npm install mapboxgl-legend 将图例控件添加到地图 import LegendControl from 'mapboxgl-legend' ; const legend = new LegendControl ( ) ; map . addControl ( legend , 'bottom-left' ) ; 像往常一样添加图层，图例将自动生成 map . addLayer ( { id : 'density' , type : 'circle' , sour
Python生成个人CSDN历史博客文章列表及目录
qq_40985985的博客
01-15 2171
# 使用Python构建CSDN历史博客文章列表，并生成目录
基于VUE + Echarts 实现可视化数据大屏效果展示大数据
HTML网页设计
08-16 4232
🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.
基于PG与PostGIS的实时矢量瓦片服务——百万级要素优化
小刘的博客
07-19 4076
上一篇文章介绍了如何使用PG与PostGIS搭建实时矢量瓦片服务，但未介绍如何做优化，对于日常项目使用基本可以满足，这篇文章介绍一下如何浏览百万级要素。示例为300万点要素。 对于不知道如何使用PG与PostGIS搭建实时矢量瓦片服务的小伙伴，可以参考我上一篇文章。传送门 背景介绍 对于某些应用场景，数据量很容易达到百万级要素，数据每天都在改变。而且还要考虑在1-6级这种小级别时候的数据展示，那么这个时候仅仅是PG与PostGIS简单的矢量瓦片服务比较困难达到客户想要的效果，这个时候就要考虑做一些优.
SuperMap GIS基础产品FAQ集锦(20240401)
SuperMap技术控
04-01 1023
SuperMap GIS基础产品FAQ集锦(20240401)
SuperMap GIS基础产品云GIS FAQ集锦（5）
SuperMap技术控
08-09 667
【解决方法】关于web请求创建数据集可以参帮助文档的下面部分，通过post请求新建数据集http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/mergedProjects/SuperMapiServerRESTAPI/root/data/datasources/datasource/datasets/datasets.htm#POST%20%E8%AF%B7%E6%B1%82。不支持刷新数据集的修改以及字段的增加、删除和修改。
SuperMap GIS基础产品FAQ集锦(20240527)
最新发布
SuperMap技术控
05-28 1646
SuperMap GIS基础产品FAQ集锦(20240527)
map-mapbox-gl:Mapbox GL 测试
06-30
Mapbox GL 是一款基于 WebGL 的地图渲染库，它允许开发者创建交互式的、高性能的地图。Mapbox GL 使用矢量数据，可以动态调整地图的样式和缩放级别，提供流畅的缩放和平移体验，而且在不同分辨率和设备上都能保持...
mapbox-layer-control:具有组和过滤器功能的Mapbox GL JS的图层控件
05-25
映射框层控制这是受Gartrell Group图例控件启发的Mapbox GL JS / MapLibre地图的简单图层控件。 图层需要已经存在于地图中。 每层仅应添加到控件一次。 该控件不影响地图图层索引。 应当按照将图层添加到地图的相同...
labs-layers-api:用于提供复杂的mapboxGL样式的API
05-13
这是用于服务图层组的Web API，这是用于Mapbox GL图层的命名组及其关联图例和源数据的自定义数据模型。 这些应用程序使用了此API： 要求 您需要在计算机上正确安装以下物品。 （带有NPM） 当地发展 克隆此git ...
mapnik-legendary:Mapnik样式表的图例生成器
05-16
是一个小型实用程序，可帮助您从Mapnik样式表生成图例（又名地图键）。 您可以在配置文件中描述想要图像的属性和缩放级别，然后读取样式表并吐出.png文件。 它使用ruby-mapnik绑定加载样式表并弄乱数据源，因此您...
cesium 获取圆形边界位置_更新日志
weixin_36031047的博客
12-30 447
(2019-03-26)GeoGlobe JavaScript API (html5) V2019.03.26版本发布。NEW!功能和改进(二维)：1、在线配图增加Web墨卡托矢量瓦片配图支持。2、新增蒙板填充多边形特效示例，及其素材生产辅助工具。3、统一可视化图层的visible一致性。4、新增百度底图叠加GeoGlobe.Visuals.DeckGL.ScatterplotLayer图层示例。...
Mapbox-GL样式参考
热门推荐
wyy的博客
09-15 2万+
MapboxGL最近发布了新的版本（0.11.0），其样式文件也由版本7升级到了版本8，如果升级了mapbox-gl模块，那么以前版本的样式文件已经无法使用，对于新的版本主要更改有以下几个方面： ①地图初始化时，地图中心坐标由以前的[纬度，经度]变成了[经度，纬度]，可能是为了保持与Geojson格式的统一； ②样式表升级到8，取消了常量constants属性； ③线和面的layout属性以及
MapboxGL前端代码生成方法及调试方法
wyy的博客
09-15 9476
最近利用MapboxGL进行前端地图可视化的相关研究，对MapboxGL的源码研究了一两个月，终于弄清楚其数据模型及程序结构。MapboxGL在前端运行的只是一个js文件，但实际上它包括大量的后端代码和模块。 1、MapboxGL的安装 对于一般使用者而言直接下载官网的mapbox-gl.js引入到浏览器就可以了，不过该代码为压缩和简化过的代码。对于开发者而言一般需要查看和调试其源码，有两种方
使用Tippecanoe工具处理大数据量的矢量数据切片
wyy的博客
03-01 6731
Tippecanoe是Mapbox的一个开源切片工具，项目地址：https://github.com/mapbox/tippecanoe，Mapbox常规的切片方法tilelive-copy参见另一篇博客。Tippecanoe主要在处理大数据量时有很大的优势，具有很高的效率，并且有很多参数可以控制。Tippecanoe只能处理GeoJSON，因此在切片前需要将矢量数据转换为GeoJSON，推荐使用o
使用tilelive-copy命令进行矢量切片
wyy的博客
04-05 3046
切片命令：tilelive-copy bridge:///home/bygis/data/daolutest.xml "foxgis+mongodb://localhost/dbname?tileset_id=daolu&owner=foxgis" --timeout=200000000命令参数说明： “bridge://” 文件协议，指定文件类型 “/home/bygis/data/da
Matlab 怎么自动生成图例
09-16
总之，要在Matlab中自动生成图例，我们可以通过legend函数，并指定对应数据线条或图形对象的名称，然后使用legend('show')来自动生成图例。 ### 回答3： 在Matlab中，可以使用legend函数来自动生成图例。legend...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值