Question

我目前在我的角度应用程序中使用mapbox。在 addSource 上，我使用了type: geojson，因为 data.features 是通过API填充的。在 addLayer 上，我使用了type: circle并将 paint 用于圆形颜色条件。

我关注了文档，但似乎无法识别圆圈。以下代码来自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

的错误

Answer 1

不费吹灰之力很难解决圆形图层存在的问题，乍一看，您为geojson几何定义的coordinates不是有效的值。我更改了它们，并且有效。

对于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();
        });

    });

在地图框的圆圈悬停上显示弹出式窗口

1 个答案: