Mapbox GL JS
关注
分享
扫一扫
niewzh
QQ:1468619361 添加请说明来意
展开
-
mapbox加载turf.js创建的格网
turf.js是mapbox官方推荐的进行空间分析的包，其优点在于强大且全面的空间分析功能，且支持geojson格式的输入，因此与Mapbox GL JS集成效果很好。我们此处介绍Mapbox GL JS加载turf.js实时创建格网（渔网）的方法。其效果如下：turf.js能够指定格网大小、坐标等信息实时生成，其效率非常高，也可以在前端根据用户需求实时的生成格网了。生成结果为GeoJson格式，Mapbox根据其生成的结果直接加载。步骤如下：1、turf.js生成格网（渔网）tur原创 2020-10-29 18:38:29 · 1986 阅读 · 1 评论 -
mapbox获取图层中要素的属性值
Mapbox GL JS提供了强大的查询检索功能，我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。例如：我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值，我们可以用mapbox的map.querySourceFeatures()方法搞定。该方法可以查询出某一图层的所有要素（包括要素的属性值），如果你想筛选部分要素，只需要在参数中设置Filter即可。使用方法如下：var relatedFeatures = map.querySourceFeatures('c原创 2020-10-23 13:20:42 · 5882 阅读 · 0 评论 -
eCharts+mapbox获取mapbox实例
在项目中，我们常常需要动态设置底图样式，中心点等属性，mapbox设置属性的前提是获得底图实例。在echarts+mapbox开发时，mapbox是在eCharts的Options中定义的，因此获取mapbox实例要靠eCharts提供的方法获得。以eCharts图表命名为chart为例，获取底图的方法为： var map=chart.getModel().getCompone...原创 2018-10-27 16:36:29 · 4702 阅读 · 4 评论 -
Mapbox GL JS 表达式概述
表达式（expressions)是Mapbox GL JS的一个高级功能，它为数据的添加和渲染展示提供了更多的灵活性。表达式的功能包括：数据驱动样式：根据一个或多个数据属性指定样式规则。 算术：对源数据进行算术运算，例如执行单位转换计算。 条件逻辑：使用基本的if-then逻辑，例如，根据要素中可用的属性甚至名称的长度，准确确定要为标签显示的文本。 字符串操作：使用大写，小写和标题大...原创 2019-03-03 10:12:18 · 3811 阅读 · 0 评论 -
mapbox创建空白底图
通常在项目中我们会遇到需要空白底图的情况，如专题底图展示，特殊图层的展示等，效果如下图：mapbox可以很方便的创建各种底图包括空白底图，也可改变空白底图的背景色。除底图是空白的，其他交互与正常无异。以下为展示空白底图的代码：<!DOCTYPE html><html><head> <meta charset='utf-8' /...原创 2019-03-29 21:35:16 · 2335 阅读 · 0 评论 -
mapbox根据多边形选择点要素
Mapbox GL JS 对于按空间选择提供了 queryRenderedfeature函数，但是此函数仅支持按点选和标准矩形的框选，不支持按多边形选择。帮助文档中是这样说的：查询区域的几何图形：描述边界框的单个点或西南和东北点。因此，想要查询需要借助其他开源库，本文使用Mapbox推荐的turf.js实现本文实现效果如下：核心代码：map2.addControl(dra...原创 2019-04-09 19:14:57 · 4432 阅读 · 3 评论