Question

我有一个系统，每个单独的坐标将有各自的图标。

最初，我尝试了以下操作来添加带有单个图标图像的标记，并且它可以正常工作。但是我意识到尽管位置发生了变化，但以前创建的标记坐标仍然存在。示例A在X的10.10PM。晚上10：20，A移至Y。地图创建了一个新标记，而不是覆盖旧标记。

var geojsonurl = '****.php';
  var geojson;


  var x = function (){
  $.ajax({
    url: geojsonurl,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        geojson = data;
        geojson.features.forEach(function(marker) {
            // create a DOM element for the marker
            var el = document.createElement('div');
            el.className = 'marker';
            el.style.backgroundImage = 'url(http://****images/avatars/' + marker.properties.imagename+ '.png';
            el.style.width = marker.properties.iconSize[0] + 'px';
            el.style.height = marker.properties.iconSize[1] + 'px';
        
            el.addEventListener('click', function() {
                window.alert(marker.properties.message);
            });
                // add marker to map
                new mapboxgl.Marker(el)
                .setLngLat(marker.geometry.coordinates)
                .addTo(map);
                
         
        
        });
   
        
    }, error: function () {
        
    }
});
};

我也尝试使用以下方法解决了上面代码中遇到的问题。但是现在我只能检索相应的Icon图像和必要的信息（例如弹出窗口等）

var url = '****.php';
map.on('load', function () {
    window.setInterval(function() {
        map.getSource('drone').setData(url);
    }, 2000);




    map.addSource('drone', { type: 'geojson', data: url });
    
    map.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
            "icon-image": 
        }
    });
});

Answer 1

您需要确定要使用标记层还是符号层。标记的外观更加灵活，使您可以完全访问HTML，因此可以轻松显示所需的任何图像。符号层更容易直接链接到数据，并且与其他层更好地交互（例如，隐藏而不是相互冲突）。

现在让我们来谈谈标记。第一种方法的问题在于，您每次都创建新标记，而不是删除或更新旧标记。如果要更新它们，则需要先存储它们：

  var geojson;
  var markers = [];

  // ...

  geojson.features.forEach(function(marker, markerIndex) {
        // Check if we have made this marker before
        var marker = markers[markerIndex];
        var el = marker && marker.getElement();
        if (!el) {
            // create a DOM element for the marker
            el = document.createElement('div');

            el.addEventListener('click', function() {
                // we refer to geojson.features[] rather than this particular marker, so it will update properly when the data changes

window.alert(geojson.features[markerIndex].properties.message);
            });

            // add marker to map
            markers[markerIndex] = new mapboxgl.Marker(el);
            marker
                .setLngLat(marker.geometry.coordinates)
                .addTo(map);

        }

        // Either update existing marker, or set up new one, it's the same.
        el.className = 'marker';
        el.style.backgroundImage = 'url(http://****images/avatars/' + marker.properties.imagename+ '.png';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';

        marker.setLngLat(marker.geometry.coordinates);

    // ....

如果使用符号图层，则可能更简单。您只需要在开始时加载一次自定义图像：

map.loadImage('image1', 'http://****images/avatars/image1.png';

然后：

map.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
            "icon-image": "image1"
        }
    });

需要帮助来添加自定义图标标记和从geojson源加载的弹出窗口

1 个答案: