mapbox-gl-js создать круг вокруг буквы / lng? - PullRequest
Новая
       10

mapbox-gl-js создать круг вокруг буквы / lng?

0 голосов
/ 26 апреля 2018

Мне нужно создать круг вокруг точки, где пользователь нажимает. Как бы я это сделал? В каждом уроке показано извлечение круга из источника геоджона, а не его создание. Необходимо иметь возможность редактировать радиус.

1 Ответ

0 голосов
/ 30 апреля 2018

Вы сами что-то пробовали? Следуя примерам картографии, вы сможете понять, как создать нечто подобное.

Вам нужно будет сделать 3 вещи:

  • Создать источник, содержащий данные
  • Создать слой типа «круг» для отображения данных в виде кругов
  • При каждом щелчке пользователя извлекайте «широту, долготу» и добавляйте точку в свой список данных. Затем отобразите все эти точки в виде круга на карте.

Это пример того, как я мог бы закодировать это: https://jsfiddle.net/andi_lo/495t0dx2/

Надеюсь, это поможет вам 

mapboxgl.accessToken = '####';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

map.on('load', () => {
  const points = turf.featureCollection([]);
 
  // add data source to hold our data we want to display
  map.addSource('circleData', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [],
    },
  });

  // add a layer that displays the data
  map.addLayer({
    id: 'data',
    type: 'circle',
    source: 'circleData',
    paint: {
      'circle-color': '#00b7bf',
      'circle-radius': 8,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#333',
   },
  });

  // on user click, extract the latitude / longitude, update our data source and display it on our map
  map.on('click', (clickEvent) => {
    const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
    points.features.push(turf.point(lngLat));
    map.getSource('circleData').setData(points);
  });
});
#map {
  height: 500px;
}
<div id="map"></div>
...