mapbox地图加载本地图片

jimjiayu

于 2024-03-28 10:56:03 发布

阅读量507

点赞数 1

分类专栏： mapbox 文章标签：前端 vue

本文链接：https://blog.csdn.net/zhongshijun521/article/details/137104680

版权

mapbox 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

mapbox地图加载本地图片

import rodeImg from '@/assets/rode.png'
 _this.map.on('load', () => {
        _this.map.loadImage(
            rodeImg,
            (error, image) => {
              _this.map.addImage('cat', image);
              _this.map.addSource('buildings', {
                type: 'geojson',
                data: {
                  type: 'FeatureCollection',
                  features: [
                    {
                      type: 'Feature',
                      geometry: {
                        type: 'Point',
                        coordinates: [
                          113.53074544385078, 34.78495896361274
                        ]
                      }
                    }
                  ]
                }
              });
              _this.map.addLayer({
                id: 'cat-on-building',
                source: 'buildings',
                slot: 'top',
                type: 'symbol',
                'layout': {
                  'icon-image': 'cat',
                  'icon-size': 0.1,
                  'symbol-placement': 'point',
                  'symbol-z-elevate': true
                }
              });
            }
        );

      })