mapbox加载本地图片

单张图片

import { Component } from '@angular/core';
import mapboxgl from 'mapbox-gl';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {
  map: any;
  constructor() {}
  ngOnInit(): void {
    mapboxgl.accessToken = 'xxxxxx';
    this.map = new mapboxgl.Map({
      container: 'mapboxDiv', // container id
      style: 'mapbox://styles/mapbox/light-v11',
      zoom: 11,
      center: [116.39880632, 38.90487972],
      minZoom: 0,
      maxZoom: 17,
    });
    this.map.on('load', async () => {
      const id = 'test';
      await this.init(id);
    });

    this.map.on('styledata', () => {
      this.map.resize();
    });

    this.map.on('zoomend', function () {
      const range = Math.floor(this.getZoom());
      console.log('range级数>>>', range);
    });
  }
  loadImage(url) {
    return new Promise((resolve, reject) => {
      //初始化
      const img = new Image();
      img.src = url;
      img.onload = () => {
        resolve(img);
        img.onerror = reject;
      };
    });
  }
  async init(id) {
    const img = await this.loadImage('/assets/a.png');
    const imgName = 'demo-img';
    this.map.addImage(imgName, img);
    this.map.addSource(id, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [],
      },
    });
    this.map.addLayer({
      id: id,
      type: 'symbol',
      source: id,
      layout: {
        'icon-image': imgName,
      },
    });
    this.drawImage(id);
  }
  drawImage(id) {
    const arr = [
      {
        type: 'Feature',
        geometry: {
          type: 'MultiPoint',
          coordinates: [
            [113, 31],
            [115, 32],
          ],
        },
      },
    ];
    this.map.getSource(id).setData({
      type: 'FeatureCollection',
      features: arr,
    });
  }
}

w.png

多张图片

load图片也可以使用mapbox提供的方法，原理都是一样的，都是返回一个Image对象。

import { Component } from '@angular/core';
import mapboxgl from 'mapbox-gl';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {
  map: any;
  constructor() {}
  ngOnInit(): void {
    mapboxgl.accessToken = 'xxx';
    this.map = new mapboxgl.Map({
      container: 'mapboxDiv', // container id
      style: 'mapbox://styles/mapbox/light-v11',
      zoom: 11,
      center: [116.39880632, 38.90487972],
      minZoom: 0,
      maxZoom: 17,
    });
    this.map.on('load', async () => {

      await this.init();
    });

    this.map.on('styledata', () => {
      this.map.resize();
    });

    this.map.on('zoomend', function () {
      const range = Math.floor(this.getZoom());
      console.log('range级数>>>', range);
    });
  }
  loadImage(url) {
    return new Promise((resolve, reject) => {
      //初始化
      this.map.loadImage(url,(err,image)=>{
        if(err){
          reject(err);
        }
        resolve(image);
      });
    });
  }
  async init() {
    const img1 = await this.loadImage('/assets/a.png');
    const img2 = await this.loadImage('/assets/dayanta2.jpg');
    const img3 = await this.loadImage('/assets/dayanta3.jpg');
    const imgName1 = 'demo-img1';
    const imgName2 = 'demo-img2';
    const imgName3 = 'demo-img3';
    this.map.addImage(imgName1, img1);
    this.map.addImage(imgName2, img2);
    this.map.addImage(imgName3, img3);

    this.drawImage(imgName1,[113,31]);
    this.drawImage(imgName2,[124,32]);
    this.drawImage(imgName3,[135,33]);
  }
  drawImage(imgName,coordinates) {
    const id = 'draw-' + imgName;
    const arr = [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates:  coordinates
        },
      },
    ];
    this.map.addSource(id, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: arr,
      },
    });
    this.map.addLayer({
      id: id,
      type: 'symbol',
      source: id,
      layout: {
        'icon-image': imgName,
      },
    });
  }
}

mapbox层级变小后，可能由于碰撞算法，有些位置的图标要素比较多时，会出现少绘制或不绘制的情况，怎么办呢？

  drawImage(imgName,coordinates) {
    const arr = [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates:  coordinates
        },
      },
    ];

    this.map.addLayer({
      id: 'draw-' + imgName,
      type: 'symbol',
      source: {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: arr,
        },
      },
      layout: {
        "icon-image": imgName,
        "icon-size": 0.5,
        "icon-ignore-placement": true,
        "text-allow-overlap": true
      },
    });
  }