👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：mapbox 从入门到精通
文章目录
- 一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
- 1.2 ☘️mapboxgl.Map style属性
- 1.3 ☘️symbol符号图层样式
- 1.4 ☘️addImage地图添加标注图片
- 二、🍀使用点类型geojson加载symbol符号图层，标注带图标的注记
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于mapbox-gl v3.*.* 版本，使用点类型geojson加载symbol符号图层，用于标注带图标的注记，且文字居中在图标内，图标大小自适应文字，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️mapboxgl.Map 地图对象
mapboxgl.Map 地图对象。
构造函数：
new Map class(options: Object)
本例使用属性：
1.2 ☘️mapboxgl.Map style属性
本例使用属性：
- version：版本号，当前固定值为8。
- sources：数据源集合（必填，用于包含一系列数据源
source，这些数据源提供了在地图上显示的数据）。值为{}对象。{}中的属性名是数据源的名称。
每个数据源 source 有的属性：
type：数据源类型
tiles：数据源地址
tileSize：数据源切片大小 - layers：图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
每个layer的属性（当前示例用到的）：
id：图层id
type：图层类型
source：数据源名称
1.3 ☘️symbol符号图层样式
"layers": [
{
"id": "symbol-id", // 唯一 id （必填）
"type": "symbol", // 类型（必填）
"metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）
"mapbox:name": "test"
},
"source": "source-name", // 数据源的名称（除了 layer 的 type 为 background 外，source 必填）
"source-layer": "source-layer-name", // 数据源的图层（只有数据源 source 的 type 为 vector 时，才能设置 source-layer，其他类型的不可以设置）
"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
"maxzoom": 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
"filter": [], // 过滤（可选，用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expression）
"layout": { // 布局类属性
"visibility": "visible", // 可见性（可选，可选值为 none、visible，默认值为 visible）
"symbol-placement": "point", // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
// --- point：符号在几何形状的点上
// --- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
// --- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
"symbol-spacing": 250, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
"symbol-avoid-edges": false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
"symbol-sort-key": 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
"symbol-z-order": "auto", // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
// 图标类属性（需要设置 icon-image）
"icon-image": "", // 图标的图片（可选，这里填写在 sprite 雪碧图中图标名称）
"icon-size": 1, // 图标的大小（可选，值 >= 0，默认值为 1。这里实际上是图标对应的原始图片的大小的缩放比例。值为 1 表示图标大小为原始图片的大
"icon-padding": 2, // 图标的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
"icon-offset": [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
"icon-anchor": "center", // 图标与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
"icon-rotation": 0, // 图标的顺时针旋转角度（可选，默认值为 0，单位：角度）
"icon-allow-overlap": false, // 是否允许图标重叠（可选，默认值为 false。当值为 true 时，图标即使和其他符号触碰也会显示）
"icon-ignore-placement": false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
"icon-optional": false, // 图标是否可不显示（可选，默认值为 false。当值为 true 时，如果图标与文本标签碰撞，则显示文本标签）
"icon-text-fit": "none", // 图标与文本的大小适应关系（可选，可选值为 none、width、height、both，默认值为 none）
// --- none：图标按其本身的比例显示
// --- width：图标在 x 轴上缩放以适应文本的宽度
// --- height：图标在 y 轴上缩放以适应文本的高度
// --- both：图标在 x 和 y 轴上缩放以适应文本的宽高
"icon-text-fit-padding": [0, 0, 0, 0], // 图标与文本的内边距（可选，默认值为 [0,0,0,0]，单位：像素）
"icon-keep-upright": false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免图标
"icon-rotation-alignment": "auto", // 地图旋转时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
// --- map：当 symbol-placement 为 point 时，图标与地图的东西方向对齐；当 symbol-placement 为 line 时，图标的 x 轴和线对齐
// --- viewport：图标的 x 轴和视口的 x 轴对齐
// --- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
"icon-pitch-alignment": "auto", // 地图倾斜时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
// --- map：图标的 x 轴与地图平面对齐
// --- viewport：图标的 x 轴和视口的 x 轴对齐
// --- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
// 文本类属性（需要指定 text-field）
"text-rotation-alignment": "auto", // 与 icon-rotation-alignment 类似
"text-pitch-alignment": "auto", // 与 icon-pitch-alignment 类似
"text-field": "", // 文本所对应的字段（可选，默认值为 ""）
"text-font": ["Open Sans Regular","Arial Unicode MS Regular"], // 文本的字体集合（可选，默认值为 ["Open Sans Regular","Arial Unicode MS Regul
"text-size": 16, // 文本的大小（可选，默认值为 16，单位：像素）
"text-max-width": 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
"text-line-height": 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
"text-letter-spacing": 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
"text-justify": "center", // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
"text-anchor": "center", // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
"text-variable-anchor": "center", // 与 text-anchor（优先级更高） 类似，有点不懂
"text-max-angle": 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
"text-rotate": 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
"text-padding": 2, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
"text-keep-upright": false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
"text-transform": "none", // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
"text-offset": [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
"text-radial-offset": 0, // 文本的径向偏移量，优先级比 text-offset 高
"text-allow-overlap": false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
"text-ignore-placement": false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
"text-optional": false // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
},
"paint": { // 绘制类属性
// 图标类属性（需要设置 icon-image）
"icon-opacity": 1, // 图标的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
"icon-color": "#000000", // 图标的颜色（可选，默认值为 #000000）
"icon-halo-color": "rgba(0,0,0,0)", // 图标的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
"icon-halo-width": 0, // 图标的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
"icon-halo-blur": 0, // 图标的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
"icon-translate": [0, 0], // 图标的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
"icon-translate-anchor": "map", // 图标的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
// 文本类属性（需要设置 text-field）
"text-opacity": 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
"text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
"text-halo-color": "rgba(0,0,0,0)", // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
"text-halo-width": 0, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
"text-halo-blur": 0, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
"text-translate": [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
"text-translate-anchor": "map", // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
}
}
]
symbol_API
turf_API
1.4 ☘️addImage地图添加标注图片
self.map.loadImage(require('@/assets/buildlabel.png'), function (error, image) {
if (!error && !self.map.hasImage('label')) {
self.map.addImage('label', image, {
stretchX: [[26, 50], [82, 104]], // [[x1, x2], ...] 如果在图层的图像中使用了“icon-text-fit”（图标文本适应）功能，此选项定义了图像中可以水平拉伸的部分。
content: [25, 12, 104, 47], // [x1, y1, x2, y2] 如果在图层的图像中使用了“icon-text-fit”（图标文本适应）功能，此选项定义了图像中可以被文本字段内容覆盖的部分。这里的(x1, y1)表示该区域的左上角坐标，而(x2, y2)表示该区域的右下角坐标。
pixelRatio: 2, // 图像中的像素与屏幕上的物理像素之间的比例。
sdf: false, // 是否应将图像解释为SDF（Signed Distance Field，有符号距离场）图像。默认false
stretchY: [[0, 0], [0, 0]] // [[y1, y2], ...] 如果在图层的图像中使用了“icon-text-fit”（图标文本适应）功能，此选项定义了图像中可以垂直拉伸的部分。这里的每个[y1, y2]对表示图像中可垂直拉伸区域的起始和结束纵坐标。
})
}
})
二、🍀使用点类型geojson加载symbol符号图层，标注带图标的注记
1. ☘️实现思路
- 1、引入’mapbox-gl’、'mapbox-gl/dist/mapbox-gl.css’、‘@turf/turf’、‘lodash’文件
- 2、添加id为map的html页面要素，定义map样式。
- 3、定义initMap初始化地图方法，方法内创建mapboxgl.Map地图对象map。map绑定‘style.load’事件，在load回调事件内部，调用loadImage和addImage方法加载’@/assets/buildlabel.png’图片，使用turf随机生成200个点位geojson数据points，循环points，循环体内部，元素point属性icon赋值‘label’图片名、属性name赋值为’gis分享者’或者’gis分享者欢迎您的订阅！'。使用points作为数据源添加载symbol符号图层，设置symbol图层相关样式，使用points的的属性icon作为标注图片的名称、name值作为标注的文本。在mounted钩子函数中调用initMap方法。
2. ☘️代码样例
<template>
<div id='map'></div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import _ from 'lodash'
import * as turf from '@turf/turf'
export default {
name: 'MapboxLoadSymbolIconFontLayer',
data () {
return {
map: null
}
},
mounted () {
this.$nextTick(() => {
this.initMap()
})
},
methods: {
initMap () {
mapboxgl.accessToken = 'mapbox官网注册'
this.map = new mapboxgl.Map({
container: 'map',
zoom: 14,
minZoom: 0,
center: [116.4, 39.9],
pitch: 45,
style: 'mapbox://styles/mapbox/light-v10'
})
let self = this
this.map.on('load', function () {
let points = turf.randomPoint(200, { bbox: [116.35432847,39.88637483,116.43224041,39.93922276] })
self.map.loadImage(require('@/assets/buildlabel.png'), function (error, image) {
if (!error && !self.map.hasImage('label')) {
self.map.addImage('label', image, {
stretchX: [[26, 50], [82, 104]],
content: [25, 12, 104, 47],
pixelRatio: 2
})
}
})
_.forEach(points.features, (point, index)=> {
point.properties.icon = 'label'
if (index%2 == 0) {
point.properties.name = 'gis分享者'
} else {
point.properties.name = 'gis分享者欢迎您的订阅！'
}
})
self.map.addLayer({
'id': 'symbol_id',
'type': 'symbol',
'source': {
'type': 'geojson',
'data': points
},
'layout': {
'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
'symbol-placement': 'point', // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
// --- point：符号在几何形状的点上
// --- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
// --- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
'symbol-spacing': 250, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
'symbol-avoid-edges': false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
'symbol-sort-key': 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
'symbol-z-order': 'auto', // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
// 文本类属性（需要指定 text-field）
'text-rotation-alignment': 'auto', // 与 icon-rotation-alignment 类似
'text-pitch-alignment': 'auto', // 与 icon-pitch-alignment 类似
'text-field': '{name}', // 文本所对应的字段（可选，默认值为 ''）
'text-font': ['Open Sans Regular','Arial Unicode MS Regular'], // 文本的字体集合（可选，默认值为 ['Open Sans Regular','Arial Unicode MS Regul
'text-size': 16, // 文本的大小（可选，默认值为 16，单位：像素）
'text-max-width': 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
'text-line-height': 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
'text-letter-spacing': 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
'text-justify': 'center', // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
'text-anchor': 'center', // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
'text-max-angle': 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
'text-rotate': 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
'text-padding': 2, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
'text-keep-upright': false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
'text-transform': 'none', // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
'text-offset': [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
'text-radial-offset': 0, // 文本的径向偏移量，优先级比 text-offset 高
'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
'text-optional': false, // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
// 图标类属性（需要设置 icon-image）
'icon-image': '{icon}', // 图标的图片（可选，这里填写在 sprite 雪碧图中图标名称）
'icon-size': 1, // 图标的大小（可选，值 >= 0，默认值为 1。这里实际上是图标对应的原始图片的大小的缩放比例。值为 1 表示图标大小为原始图片的大
'icon-padding': 2, // 图标的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
'icon-offset': [0, 0], // 图标的偏移量（可选，默认值为 [0, 0]）
'icon-anchor': 'center', // 图标与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
'icon-rotation': 0, // 图标的顺时针旋转角度（可选，默认值为 0，单位：角度）
'icon-allow-overlap': false, // 是否允许图标重叠（可选，默认值为 false。当值为 true 时，图标即使和其他符号触碰也会显示）
'icon-ignore-placement': false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
'icon-optional': false, // 图标是否可不显示（可选，默认值为 false。当值为 true 时，如果图标与文本标签碰撞，则显示文本标签）
'icon-text-fit': 'both', // 图标与文本的大小适应关系（可选，可选值为 none、width、height、both，默认值为 none）
// --- none：图标按其本身的比例显示
// --- width：图标在 x 轴上缩放以适应文本的宽度
// --- height：图标在 y 轴上缩放以适应文本的高度
// --- both：图标在 x 和 y 轴上缩放以适应文本的宽高
'icon-text-fit-padding': [0, 0, 0, 0], // 图标与文本的内边距（可选，默认值为 [0,0,0,0]，单位：像素）
'icon-keep-upright': false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免图标
'icon-rotation-alignment': 'auto', // 地图旋转时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
// --- map：当 symbol-placement 为 point 时，图标与地图的东西方向对齐；当 symbol-placement 为 line 时，图标的 x 轴和线对齐
// --- viewport：图标的 x 轴和视口的 x 轴对齐
// --- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
'icon-pitch-alignment': 'auto' // 地图倾斜时图标的对齐方式（可选，可选值为 map、viewport、auto，默认值为 auto）
// --- map：图标的 x 轴与地图平面对齐
// --- viewport：图标的 x 轴和视口的 x 轴对齐
// --- auto：当 symbol-placement 为 point 时，和 viewport 一致；当 symbol-placement 为 line 时，和 map 一致
// 文本类属性（需要指定 text-field）
},
'paint': {
// 文本类属性（需要设置 text-field）
'text-opacity': 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
'text-color': '#000000', // 文本的颜色（可选，默认值为 #000000）
'text-halo-color': '#FF0000', // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
'text-halo-width': 0, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
'text-halo-blur': 0, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
// 图标类属性（需要设置 icon-image）
'icon-opacity': 1, // 图标的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
'icon-color': '#000000', // 图标的颜色（可选，默认值为 #000000）
'icon-halo-color': 'rgba(0,0,0,0)', // 图标的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
'icon-halo-width': 0, // 图标的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
'icon-halo-blur': 0, // 图标的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
'icon-translate': [0, 0], // 图标的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
'icon-translate-anchor': 'map', // 图标的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
}
})
})
}
}
}
</script>
<style scoped>
#map{
height: 100vh;
width: 100vw;
}
</style>
效果如下：
