Есть ли способ добавить изображения в каждую точку многоугольника с помощью mapbox draw? - PullRequest
Новая
       9

Есть ли способ добавить изображения в каждую точку многоугольника с помощью mapbox draw?

0 голосов
/ 17 марта 2020

Я использую Mapbox Draw, и мне хотелось бы знать, есть ли способ добавить изображения в каждую точку (координаты) многоугольника?

Это мой код для многоугольника: 

var draw = new MapboxDraw({
   displayControlsDefault: false,
   controls: {
    line_string: true,
    polygon:true,
    trash: true,
},
userProperties: true,

изменить стиль точек и линий. 

styles: [
      {
      "id": "gl-draw-polygon-stroke-active",
      "type": "line",

      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "#D20C0C",
        "line-dasharray": [0.2, 2],
        "line-width": 2
      }
    },
    {
      "id": "gl-draw-polygon-and-line-vertex-active",
      "type": "circle",
      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
      "paint": {
        "circle-radius": 10,
        "circle-color": "#3c33ff",
      }
    }
   ]
});

map.addControl(draw)

Обновить Я нашел способ вот мой код:

сначала я загружаю и добавляю изображение с помощью var img, затем я создаю щелчок функция, чтобы взять координаты с карты с lnglat, и теперь я могу поместить изображение везде, где я нажал. 

var img = 'photo';

            map.on('load', function() {
                map.loadImage('https://image.shutterstock.com/image- photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg', function(error, image) {
                if (error) throw error;
                map.addImage('photo', image); // donner un nom à image

            map.on('click', function (e) {
              var imageId = e.lngLat.lng + e.lngLat.lat + "";
              map.addLayer({
                "id": imageId,
                "type": "symbol",
                "source": {
                  "type": "geojson",
                  "data": {
                  "type": "FeatureCollection",
                  "features": [{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [e.lngLat.lng, e.lngLat.lat]
                    }
                  }]
                }
               },
               "layout": {
                 "icon-image": img,
                 "icon-size": 0.1
               }
              });
        });

    });
  });
};
...