Нужна помощь в добавлении пользовательского маркера значка и всплывающего окна, которое загружается из источника геоджон - PullRequest
Новая
       10

Нужна помощь в добавлении пользовательского маркера значка и всплывающего окна, которое загружается из источника геоджон

0 голосов
/ 04 января 2019

У меня есть система, в которой каждая отдельная координата будет иметь соответствующую иконку.

Изначально я попробовал следующее, чтобы добавить маркер с отдельным изображением значка, и это работает. Но я понял, что ранее созданная координата маркера все еще присутствует, несмотря на изменение местоположения. Пример А был в X в 10.10 вечера. В 10.20 вечера А переместился на 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 () {
        
    }
});
};

Я также попытался использовать следующее, что решило проблему, с которой я столкнулся в приведенном выше коде. Но теперь я застрял при получении соответствующего изображения значка и необходимой информации (например, всплывающее окно и т. Д.) 

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": 
        }
    });
});

1 Ответ

0 голосов
/ 05 января 2019

Вам необходимо решить, используете ли вы маркеры или слои символов. Маркеры более гибки по внешнему виду, предоставляя вам полный доступ к 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"
        }
    });
...