mapbox标牌、弹窗

mapbox的标牌除了可以使用图片外，也可以用marker，其实就是把html片段追加到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;
  mapFlyToEventHandler: Function;
  popup: any;
  constructor() {}
  ngOnInit(): void {
    mapboxgl.accessToken = 'xxx';
    this.map = new mapboxgl.Map({
      container: 'mapboxDiv', // container id
      style: 'mapbox://styles/mapbox/light-v11',

      center: [116.39880632, 38.90487972],
      minZoom: 0,
      maxZoom: 17,
    });

    this.popup = new mapboxgl.Popup({
      closeButton: false,
    });

    this.map.on('load', () => {
  
      this.createMark();
    });

    this.map.on('styledata', () => {
      this.map.resize();
    });
  }
  flyToMarker(e) {
    const element = e.originalEvent.srcElement;
    if (element && element.className === 'marker-paint') {
      const coordinates = JSON.parse(element.getAttribute('coordinates'));

      this.map.flyTo({
        center: coordinates,
        zoom: 17,
      });
    }
  }
  createMark() {
    const coords = [
      [119.21130631999984, 36.506275846202314],
      [121.00349131114814, 30.930795135835453],
      [114.76271882485861, 23.576463798311664],
    ];
    for (let i = 0; i < coords.length; i++) {
      const coordinates: any = [coords[i][0], coords[i][1]];
      const el: any = document.createElement('div');
      el.className = 'my-marker';

      el.innerHTML = `<div class="marker-paint" coordinates="${JSON.stringify(
        coordinates
      )}">地点名称${i + 1}</div>`;
      
      el.addEventListener('mouseenter', () => {
        this.showDetail(coordinates);
      });
      el.addEventListener('mouseleave', () => {
        this.hideDetail();
      });
      new mapboxgl.Marker(el).setLngLat(coordinates).addTo(this.map);
    }

    this.mapFlyToEventHandler = this.flyToMarker.bind(this);
    this.map.on('click', this.mapFlyToEventHandler);
  }


  showDetail(coordinates) {
    this.popup
      .setLngLat(coordinates)
      .setHTML(
        `<div>经度:${coordinates[0]}<div><div>纬度:${coordinates[1]}</div>`
      )
      .addTo(this.map);//dom片段可以使用setDOMContent方法
  }
  hideDetail() {
    this.popup.remove();
  }
}

这里还需要注意mapbox的样式引入问题。默认样式是：node_modules/mapbox-gl/dist/mapbox-gl.css，这个样式我们可以在angular.json配置文件中引入，如果需要修改默认样式，可以在最后一个styles.css中修改覆盖前面的样式即可。

...
 "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
    "node_modules/mapbox-gl/dist/mapbox-gl.css",
    "src/styles.css"
],