0

我试图mouseover在地图上添加图像。我正在使用 Mapbox MapLibre GL。这是我到目前为止所做的。

var map = new maplibregl.Map({
      container: 'map',
      style: 'assets/data/basic/style.json',
      antialias: true,
      center: [-0.42, 8.22],
      zoom: 0,
      attributionControl: false,
      maxBounds: [[-171.87, -83.65], [188.31, 83.55]]
    });

    map.on('load', function () {

      map.addSource('earthquakes', {
        'type': 'geojson',
        'data': 'assets/data/earthquakes.geojson'
      });

      map.addLayer({
        'id': 'earthquakes-heat',
        'type': 'heatmap',
        'source': 'earthquakes',
        'maxzoom': 9,
        'paint': {
          // Increase the heatmap weight based on frequency and property magnitude
          'heatmap-weight': [
            'interpolate',
            ['linear'],
            ['get', 'mag'],
            0,
            0,
            6,
            1
          ],
          // Increase the heatmap color weight weight by zoom level
          // heatmap-intensity is a multiplier on top of heatmap-weight
          'heatmap-intensity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            0,
            1,
            9,
            3
          ],
          // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
          // Begin color ramp at 0-stop with a 0-transparancy color
          // to create a blur-like effect.
          'heatmap-color': [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,
            'rgba(33,102,172,0)',
            0.2,
            'rgb(226,41,68)',
            0.4,
            'rgb(226,41,68)',
            0.6,
            'rgb(226,41,68)',
            0.8,
            'rgb(226,41,68)',
            1,
            'rgb(226,41,68)'
          ],
          // Adjust the heatmap radius by zoom level
          'heatmap-radius': [
            'interpolate',
            ['linear'],
            ['zoom'],
            0,
            2,
            9,
            20
          ],
          // Transition from heatmap to circle layer by zoom level
          'heatmap-opacity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            1,
            9,
            0
          ]
        }
      }
      );

      map.addLayer({
        'id': 'earthquakes-point',
        'type': 'circle',
        'source': 'earthquakes',
        'minzoom': 7,
        'paint': {
          // Size circle radius by earthquake magnitude and zoom level
          'circle-radius': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            ['interpolate', ['linear'],
              ['get', 'mag'], 1, 1, 6, 4
            ],
            16,
            ['interpolate', ['linear'],
              ['get', 'mag'], 1, 5, 6, 50
            ]
          ],
          // Color circle by earthquake magnitude
          'circle-color': [
            'interpolate',
            ['linear'],
            ['get', 'mag'],
            1,
            'rgba(33,102,172,0)',
            2,
            'rgb(103,169,207)',
            3,
            'rgb(209,229,240)',
            4,
            'rgb(253,219,199)',
            5,
            'rgb(239,138,98)',
            6,
            'rgb(178,24,43)'
          ],
          'circle-stroke-color': 'white',
          'circle-stroke-width': 1,
          // Transition from heatmap to circle layer by zoom level
          'circle-opacity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            0,
            8,
            1
          ]
        }
      }
      );
      map.on('mousemove', function (e) {
        // debugger
        var coor = e.lngLat.wrap()
        var ord = []
        ord[0] = coor["lat"]
        ord[1] = coor["lng"]
        map.loadImage(
          'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
          (error, image) => {
            if (error) throw error;

            // Add the image to the map style.
            map.addImage('cat', image);

            // Add a data source containing one point feature.
            map.addSource('point', {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': [
                  {
                    'type': 'Feature',
                    'geometry': {
                      'type': 'Point',
                      'coordinates': ord
                    }
                  }
                ]
              }
            });

            // Add a layer to use the image to represent the data.
            map.addLayer({
              'id': 'points',
              'type': 'symbol',
              'source': 'point', // reference the data source
              'layout': {
                'icon-image': 'cat', // reference the image
                'icon-size': 0.25
              }
            });
          }
        );
      });
    });

当我尝试添加此代码时，它显示错误，

错误：同名的图像已存在。

和

未捕获（承诺）错误：无法加载图像，因为已经有一个具有此 ID 的源。请确保使用支持的图像类型，例如 PNG 或 JPEG。请注意，不支持 SVG。

如果有人可以帮助我如何从本地添加图像，那将非常有帮助。

4

1 回答 1

0

你的问题是每次鼠标移动时，你都在做这三件事：

  • 添加图像
  • 添加源
  • 添加图层

您应该将大部分内容移到map.on('mousemove', ...)处理程序之外。

当地图加载时，您不会在 GeoJSON 源中添加特定坐标，但您可以像这样创建一个空白源：

map.addSource('point', {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': [
                  
                ]
              }
            });

然后，在鼠标处理程序中，您只需要设置数据，如下所示：

map.getSource('point').setData({
    'type': 'geojson',
    'data': {
    'type': 'FeatureCollection',
    'features': [
        {
        'type': 'Feature',
        'geometry': {
            'type': 'Point',
            'coordinates': ord
        }
        }
    ]
    }
});
于 2021-08-19T01:03:37.240 回答