专栏首页前端加油站⭐Mapbox GL JS学习探索系列(3) - Layer

⭐Mapbox GL JS学习探索系列(3) - Layer

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/j_bleach/article/details/102636838

简介

地图上大部分的动态显示效果吗,如图标,区域点,线,面等都是基于layer来实现的, mapbox中的layer主要存在以下几种类型:background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。其中只有background的显示不依赖source。

background

map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
// Throw an error if something went wrong
            if (err) throw err;

// Declare the image
            map.addImage('pattern', image);

// Use it
            map.addLayer({
                "id": "pattern-layer",
                "type": "background",
                "paint": {
                    "background-pattern": "pattern"
                }
            });
        });

background 类型的图层,不需要传入source,background-pattern接受一个地图加载好的图片,可以将地图铺满。

fill

fill 同样可以做图案填充,区别在于可以通过source来确定区间。即

map.addSource('source', {
	"type": "geojson",
	"data": {
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "Polygon",
	"coordinates": [[
		[-30, -25],
		[-30, 35],
		[30, 35],
		[30, -25],
		[-30, -25]
		]]
		}
	}
});
 map.addLayer({
                "id": "pattern-layer",
                "type": "fill",
				"source": "source",
                "paint": {
                    "background-pattern": "pattern"
                }
            });
        });

fill-sort-key 用来改变不同填充层之间的上下级关系。

symbol

symbol可以展示图标和文字 文字: 其中控制布局的属性是symbol-placement,这个属性的选项是控制文字布局。

map.addLayer({
"id": "poi-labels",
"type": "symbol",
"source": "places",
"layout": {
"text-field": "文字填充",
"text-variable-anchor": ["top", "bottom", "left", "right"],
"text-radial-offset": 0.5,
"text-justify": "auto",
"icon-image": ["concat", ["get", "icon"], "-15"]
}
});

text-field 作用是填充label的值。

可以通过\n 来对字符串主动换行,如 "text-field": "文字\n填充",

也可以通过访问source属性来给地图上的坐标点批量增加文字,即"text-field": ["get", "description"]

symbol 中增加图标的方法,也是将图标资源载入地图,然后通过传入图片id在地图上显示,即"icon-image":'imgId'

heatmap

热力图通过获取的geojson中的值,来匹配热力图的样式属性。 heatmap-intensity 根据缩放级别来调整热力图强度

"heatmap-intensity": [
"interpolate",
["linear"],
["zoom"],
0, 1,
9, 3
],

当缩放级别,有9=>3 的时候,linear 按照9=>3的比例关系,在0=>1 之间渐变,此时配合heatmap-color,可配置在不能线性渐变的条件下,显示不同的颜色,即

"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0, "rgba(33,102,172,0)",
0.2, "rgb(103,169,207)",
0.4, "rgb(209,229,240)",
0.6, "rgb(253,219,199)",
0.8, "rgb(239,138,98)",
1, "rgb(178,24,43)"
],

同理,如透明度,半径等属性,也可以通过缩放来进行不同程度的匹配。

addLayer

添加图层接受两个参数,一个是当前图层配置,另一个是图层ID(非必填),填写后会放置填写图层ID的前一层,默认放置在图层列表最后。

moveLayer

map.moveLayer(‘label’, ‘beforeId’); 可以达到同样的效果,在添加图层后2次操作图层位置。

Filter

关于图层,主要配置项有paint ,layout 和filter这三种。paint,layout 与浏览器的重绘,回流的概念有点像,不展开叙述。本次主要介绍filter这个属性。

Comparison Filters

这种filter,主要是以比较符号开头,通过比较source中的properties 属性中的键值,来对图层进行筛选。 如:

map.addLayer({
"id": layerID,
"type": "symbol",
"source": "places",
"layout": {
"icon-allow-overlap": true
},
"filter": ["==", "icon", "music"]
});

会将source当中 properties 下icon等于music的资源筛选出来。通过增加$符号,可以将source中的非properties下的特殊属性,筛选过滤。

Existential Filters

["has", key]

可以将source中是否存在某种key,筛选出来。

Set Membership Filters

["in", "class", "street_major", "street_minor", "street_limited"]

接受一组筛选目标。

Combining Filters

[
    "all",
    ["==", "class", "street_limited"],
    [">=", "admin_level", 3],
    ["!in", "$type", "Polygon"]
]

组合筛选。有all,any,none。all和any类似于js数组方法中的every和some,全部满足条件为真,和满足任意一项为真,none 与 all相反。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从0到1打造一款react-native App(二)Navigation+Redux

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • ES6知识库汇总一

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 使用nodejs自动生成前端项目组件

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • Go语言中反射的正确使用

    介绍 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型。 反射有两个问题...

    李海彬
  • Go语言中反射的正确使用

    介绍 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型。 反射有两个问题...

    李海彬
  • Go语言中反射的正确使用

    介绍 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型。 反射有两个问题...

    李海彬
  • 设计模式之中介者模式

    提供一个中介对象出来,用于封装一系列对象的交互,从而使各对象不需要直接交互,进一步降低了对象间的耦合度。这是一种行为型设计模式。

    Edison.Ma
  • JSDoc支持_TypeScript笔记19

    因此,对于.js文件,需要一种被 JavaScript 语法所兼容的类型标注方式,比如JSDoc:

    ayqy贾杰
  • 通俗易懂设计模式解析——中介者模式

      今天我们一起看看中介者模式,怎么去理解这个模式呢?说起来也简单、好理解。生活中我们租房经常都是通过中介来实现的。一般租房要么是房东直租要么是中介。那么今天要...

    小世界的野孩子
  • [PHP] 商品类型规格属性后台管理(代码流程备忘)

    涉及到四张表,type(商品类型表),type_spec(商品类型规格关联表),attribute(商品属性表),attribute_value(商品属性值表)

    陶士涵

扫码关注云+社区

领取腾讯云代金券