mapbox-gl-js - 在地图框中的圆圈悬停时显示弹出窗口

Question

我目前在我的角度应用程序中使用 mapbox。在我使用的addSourcetype: geojson上，因为data.features是从 API 填充的。在addLayer上，我使用了type: circle和 用于圆形颜色条件的油漆。

我关注了文档，但它似乎无法识别圆圈。以下代码来自 MapService。

this.map.addSource('cases', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [123, 123]
          },
          properties: {
            caseId: '200',
            status: 'IDENTIFIED',
            address: {
              barangay: 'ABCD',
              municipality: 'EFGH',
              province: 'IJKL'
            }
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [456, 456]
          },
          properties: {
            caseId: '201',
            status: 'CONFIRMED',
            address: {
              barangay: 'DCBA',
              municipality: 'HGFE',
              province: 'LKJI'
            }
          }
        }
      ]
    }
  });

  this.map.addLayer({
    id: 'population',
    type: 'circle',
    source: 'cases',
    paint: {
      'circle-radius': {
        base: 1.75,
        stops: [
          [10, 4],
          [12, 4]
        ]
      },
      'circle-color': [
        'match',
        ['get', 'status'],
        'IDENTIFIED',
        '#6c757d',
        'CLOSED',
        '#343a40',
        '#ccc'
      ]
    }
  });

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

  // tslint:disable-next-line: space-before-function-paren
  this.map.on('mouseenter', 'population', function (e) {
    this.map.getCanvas().style.cursor = 'pointer';

    const coordinates = e.features[0].geometry.coordinates.slice();
    const caseId = e.features[0].properties.caseId;

    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    popup.setLngLat(coordinates).setText(caseId).addTo(this.map);
  });

  // tslint:disable-next-line: space-before-function-paren
  this.map.on('mouseleave', 'population', function () {
    this.map.getCanvas().style.cursor = '';
    popup.remove();
  });

更新 mouseenter和mouseleave现在正在工作，但出现无法读取未定义的属性 getCanvas 的错误

标签： mapbox-gl-jsmapbox-gl

Answer 1

没有小提琴很难重现圆形层的问题，乍一看，您coordinates为 geojson 几何定义的不是 lnglat 有效值。我改变了它们，它的工作原理。

对于Mapbox 事件范围内 mouseenter 和 mouseleave 的错误“this”是地图本身......试试这个

    var map = (window.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 18,
        center: [-122.3512, 47.6202],
        pitch: 60,
        antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
    }));

    map.on('style.load', function () {
        map.addSource('cases', {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-122.3512, 47.6202]
                        },
                        properties: {
                            caseId: '200',
                            status: 'IDENTIFIED',
                            address: {
                                barangay: 'ABCD',
                                municipality: 'EFGH',
                                province: 'IJKL'
                            }
                        }
                    },
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-122.3513, 47.6202]
                        },
                        properties: {
                            caseId: '201',
                            status: 'CONFIRMED',
                            address: {
                                barangay: 'DCBA',
                                municipality: 'HGFE',
                                province: 'LKJI'
                            }
                        }
                    }
                ]
            }
        });

        map.addLayer({
            id: 'population',
            type: 'circle',
            source: 'cases',
            paint: {
                'circle-radius': {
                    base: 1.75,
                    stops: [
                        [10, 4],
                        [12, 4]
                    ]
                },
                'circle-color': [
                    'match',
                    ['get', 'status'],
                    'IDENTIFIED',
                    '#6c757d',
                    'CLOSED',
                    '#343a40',
                    '#ccc'
                ]
            }
        });

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

        // tslint:disable-next-line: space-before-function-paren
        map.on('mouseenter', 'population', function (e) {
            this.getCanvas().style.cursor = 'pointer';

            const coordinates = e.features[0].geometry.coordinates.slice();
            const caseId = e.features[0].properties.caseId;

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            popup.setLngLat(coordinates).setText(caseId).addTo(this);
        });

        // tslint:disable-next-line: space-before-function-paren
        map.on('mouseleave', 'population', function () {
            this.getCanvas().style.cursor = '';
            popup.remove();
        });

    });