mapBox添加本地图片

说在前面

相比较于leaflet，mapbox现在已经日益强大，他提供了很多应用的例子给我们，但是总会有些不能照顾到所有人的实际需求，所以今天来介绍一些mapbox加载本地图片的例子。

开门见山

<template>
  <div class="mapbox-container">
    <div class="mapbox-container" id="mapContainer">div>
  div>
template>
<script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
export default {
  name: "mapbox",
  data() {
    return {};
  },
  mounted() {
      mapboxgl.accessToken = '';
      var map = new mapboxgl.Map({
          container: "mapContainer",
          style: { // 加载空白底图
            version: 8,
            layers: [],
            sources: {},
          },
          center: [120.58823713531, 30.052169796647],
          zoom: 10,
    });
    map.on('load', () => {
        map.loadImage(require('./a.png')),function(error, image) {
            if (error) throw error;
            map.addImage('ref-name', image)  // 此时map已经存储了一个图片对象，后续需要的时候可直接调用
            map.addLayer({
                id: "points",
                type: "symbol",
                source: {
                  type: "geojson",
                  data: {
                    type: "FeatureCollection",
                    features: [{
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [120.58823713531, 30.052169796647], // 图片位置
                        },
                    }],
                  },
                },
                layout: {
                  "icon-image": "ref-name",
                  "icon-size": 0.9,
                },
            })
        }
    })
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

说到最后

最后发散一下思维，如果大家希望添加多张相同的图片在不同位置可以怎么做呢？ 大家可以看到features变量接收的是一个数组，所以我们可以传递多个{}，然后使用不同的坐标信息就可以啦。

以上。