Question

我需要围绕用户点击的点创建一个圆圈。我该怎么做？每个教程都显示从geojson源提取一个圆而不创建一个圆。也需要能够编辑半径。

Answer 1

你自己尝试过一些东西吗？按照mapbox示例，您应该能够了解如何构建类似的东西。

你需要做三件事：

创建包含数据的来源
创建一个类型＆＃34; circle＆＃34;用于将数据显示为圆圈
每次点击该用户，都会提取＆＃34;纬度，经度＆＃34;并为数据列表添加一个点。然后在地图上将所有这些点显示为圆圈。

这是我如何编码：https://jsfiddle.net/andi_lo/495t0dx2/

的示例

希望能帮到你

＆＃13;

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

＆＃13;

#map {
  height: 500px;
}

＆＃13;

<div id="map"></div>

＆＃13;

mapbox-gl-js在lat / lng周围创建一个圆圈？

1 个答案: