概述

mapboxGl中多图标的实现可以在style中指定sprite来实现，但是在实际使用的时候会出现sprite之外的图标需要引用，此时通过map.addImage()来实现，但是如果存在多个图标的时候，因为map.addImage()需要先通过map.loadImage()先加载图标，而map.loadImage()是一个异步的，使用起来就有点麻烦。本文希望通过再再加sprite来实现一次性添加图标。

实现效果

实现

测试的sprite如下图：

json文件如下：

{"zgyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":105,"height":32},
"jsyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":35,"height":32},
"nyyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":70,"height":32},
"gsyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":0,"height":32}
}

实现代码如下：

  map.on('load',() => {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const img = new Image()img.src = './lib/merge.png'img.onload =  async () => {canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0)fetch('./lib/merge.json').then(res => res.json()).then(res => {for (const k in res) {const { width, height, x, y } = res[k]const data = ctx.getImageData(x, y, width, height).datamap.addImage(k, { width, height, data })}map.addSource('points', {type: 'geojson',data: {type: 'FeatureCollection',features: [{"type": "Feature","properties": { icon: 'zgyh' },"geometry": { "type": "Point", "coordinates": [107.0132554, 22.1441921] }},{"type": "Feature","properties": { icon: 'jsyh' },"geometry": { "type": "Point", "coordinates": [107.0223554, 22.1443921] }},{"type": "Feature","properties": { icon: 'nyyh' },"geometry": { "type": "Point", "coordinates": [107.0344554, 22.1444921] }}]}});map.addLayer({'id': 'points-h','type': 'symbol','source': 'points','layout': {'icon-allow-overlap': true,'icon-image': ['get', 'icon'],'icon-size': ["interpolate",["exponential",1.5],["zoom"],5, 0.5,10, 0.8]},});})}})

mapboxGL中多图标加载的实现相关推荐

为什么我突然在Firefox中出现“阻止加载混合的活动内容”的问题？
本文翻译自:Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? ...
Swift - 使用addSubview()方法将StoryBoard中的视图加载进来
使用 Storyboard 我们可以很方便地搭建好各种复杂的页面,同时通过 segue 连接可以轻松实现页面的跳转. 但除了segue,我们还可以使用纯代码的方式实现Storyboard界面的跳转. ...
Pytorch中的数据加载
Pytorch中的数据加载 1. 模型中使用数据加载器的目的在前面的线性回归模型中,使用的数据很少,所以直接把全部数据放到模型中去使用. 但是在深度学习中,数据量通常是都非常多,非常大的,如此大量的 ...
c语言文件加载内存吗,把文件中的数据加载到内存进行查找C语言实现.docx
把文件中的数据加载到内存进行查找C语言实现 #define _CRT_SECURE_NO_WARNINGS#include#include#includechar **pp=NULL;void ini ...
Java虚拟机中类的加载过程
Java中类的加载过程例如下面的一段简单的代码 public class HelloWorld {public static void main(String[] args) {System.ou ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
word文档中添加mathtype加载项
教您在word文档中添加mathtype加载项发布时间:2019/08/12 mathtype安装完成后,正常情况下会在word文档中的菜单中自动添加mathtype加载项,但有时也会出现小意外,m ...
【Android 逆向】整体加固脱壳 ( DexClassLoader 加载 dex 流程分析 | DexPathList 中根据 File 加载 DexFile | loadDexFile 分析 )
文章目录前言一.根据 File 加载 DexFile 二.DexPathList.loadDexFile 函数分析前言上一篇博客 [Android 逆向]整体加固脱壳 ( DexClassLo ...

mapboxGL中多图标加载的实现

概述

实现效果

实现

mapboxGL中多图标加载的实现相关推荐

最新文章

热门文章