代码编织梦想

概述

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

实现效果

image.png

实现

测试的sprite如下图:
merge.png
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.width
        canvas.height = img.height
        ctx.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).data
            map.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
              ]
            },
          });
        })
      }
    })
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GISShiXiSheng/article/details/126885805

GIS开发:推荐Mapbox gl解决方案-爱代码爱编程

在二维地图的开发中,实现类似于百度、高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案。 https://docs.mapbox.com/mapbox-gl-js/api/ 类似于国内的地图,在开发时,需要先以开发者的身份,申请token,才能调用官网的数据服务等其他接口。当然,库是JavaScript的,意味着可以将源码都下载下来,

mapbox添加图标与图标注释-爱代码爱编程

注意看下面的代码和代码的注释 希望可以给您一些帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add an icon to the map</title> <meta na

mapbox-gl中精灵图的使用-爱代码爱编程

mapbox-gl使用官方的样式配置时,需要申请token才能够进行使用,同时,mapbox-gl也是开源的,支持离线部署,自己配置样式即可。 除去底图配置,样式配置中有两个属性:sprite和glyphs,glyphs是字体的网络路径配置,假如地图场景中有带文字的地方,没有这个配置,文字是不会显示出来的;sprite就是精灵图的配置,这里边配置了一些预置

MapBoxGL 加载echarts统计图表-爱代码爱编程

效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mapboxgl-echarts</title> <meta name="viewport" content="wi

mapboxgl实现带箭头轨迹线-爱代码爱编程

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例。经一番研究与尝试,最终解决,效果如下。 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { m

mapbox symbols 层级设置_mapboxgl实现带箭头轨迹线的代码-爱代码爱编程

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例。经一番研究与尝试,最终解决,效果如下。 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map

mapbox创建自定义marker图标绑定弹框展示信息-爱代码爱编程

/** * 创建自定义marker图标绑定弹框 */ let carMarker = [];//存放marker图标 for(let m= 0;m<gpsInfoList.length;m++){ let el = document.createElement("d

Mapbox gl tile瓦片渲染点以及图片Icon-爱代码爱编程

Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图2. 源码参考 1. 效果图 点效果图如下:以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示。 2. 源码 // 先把图片加载进来 mapObj.on('load', function () { // Add an image to use

mapbox gl本地化部署实践-爱代码爱编程

最近由于项目要求,需将mapbox gl部署在内网服务器中,经过分析后发现,需要本地化配置的主要包括 mapbox gl的js库、css库及其他依赖库(如turf等)mapbox gl调用的地图服务mapbox gl字体库mapbox gl图标库1.地图下载: 1.JS库资源下载              首先,mapbox gl的js库和css库等资

mapbox gl添加symbol图层-爱代码爱编程

话不多说,直接上代码,就是个小例子: <script> mapboxgl.accessToken = '';//mopbox 密钥 var map = new mapboxgl.Map({ container: 'map', // style: 'mapbox://styles/mapbox/street

mapbox-gl开发教程(九):加载符号图层(symbol)_地理信息技术杂谈的博客-爱代码爱编程

开发地图应用时,加载POI等点状数据,显示文字或者图标信息,mapbox-gl对应使用的是符号图层(symbol),下边讲一下如何加载符号图层数据。 mapbox-gl加载矢量数据,通过两种数据源,一种是矢量切片(vector),另一种是geojson数据,数据源加载完成后,再进行图层的设置。 以geojson数据为例: //添加geojson数据源,第

vue mapbox-gl 在地图中增加图标、线条、标记点击弹窗、地图平移_你若乘风丶的博客-爱代码爱编程

最近正在搞Mapbox-GL地图的一系列东西,按照公司的需求,要做成离线地图(点击这里),然后要在地图的基础上进行增加图标标记,线条连接、弹窗等等需求。ok废话不多,往下看。 如果还没有安装mapbox-gl的小伙伴请先看一下上篇的离线地图的文章,这里不再重复写安装步骤了,直接上代码: 一、在地图上增加图标 <template>

使用mapboxgl 实现特定的地图效果_mapboxgl 为指定区域添加地面模型-爱代码爱编程

使用mapboxgl 实现特定的地图效果 最近完成的一个项目,dashboard 地图模块的需要和第三方对接,对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求,mapboxgl 库对我来