MapBox 在点击时绘制要素的多边形

Question

所以我的想法对我来说似乎很直接，但我仍然很挣扎。我想要做的基本上是点击我地图上的任何一点并在主要特征上绘制一个多边形，即如果我点击一个公园或建筑物，特定的多边形就会显示并突出显示。

我用了很多这个代码：https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/

但是我不想给它一组 geojson，而是希望我的 javascript 到 select 需要 mousover 上的 geojson 数据（尽管我不确定这是否普遍有效）。现在我的代码片段编译但没有显示任何内容。

在后面的步骤中，我想收集同一要素的所有多边形，即所有公园，并将它们显示为突出显示的多边形，然后将它们导出为 svg 文件，该文件仅包含所单击要素的地图表示.也许有人对此也有想法？

感谢:)

这是我现在的javascript：

//Set AccessToken from MapBox
mapboxgl.accessToken = 'pk.eyJ1IjoidG1pbGRuZXIiLCJhIjoiY2o1NmlmNWVnMG5rNzMzcjB5bnV3YTlnbiJ9.r0BCga0qhRaHh0CnDdcGBQ';

//Setup starting view point at Uni-Bremen campus
var map = new mapboxgl.Map({
 container: 'content-map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [8.85307, 53.10810],
    zoom: 16
});


//Add a search bar -> hidden for presentation
/*map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
}));*/

//Function to show all Features of a certian point
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point);
    document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
    console.log(JSON.stringify(features, null, 2));

    drawPolygon();
});



//Draw a Polygon
function drawPolygon () {

 //set boundary box as 5px rectangle area around clicked point
 var bbox = [[e.point.x - 5, e.point.y - 5], [e.pont.x + 5, e.point.y + 5]];

 //set the data on pointer using the bbox
 var data = map.queryRenderedFeatures(bbox);

 map.on('load', function() {
  
  var dataSource = 'school';

  //set school to the feature and use 'setJsonData' as data source.
  map.addSource(dataSource, {
   'type': 'geojson',
   'data': data
  });
  //adding a new layer for the general display
  map.addLayer({
   'id': 'dataSet',
   'type': 'fill',
   'source': dataSource,
   'source-layer': 'original',
   'paint': {
    'fill-outline-color': 'rgba(0,0,0,0.1)',
    'fill-color': 'rgba(0,0,0,0.1)'
   }
  }, 'place-city-sm' ); //place polygon under these labels

  
  //adding a new layer for the polygon to be drawn
  map.addLeyer({
   'id': 'dataSet-highlighted',
   'type': 'fill',
   'source': dataSource,
   'source-layer': 'original',
   'paint': {
             'fill-outline-color': '#484896',
             'fill-color': '#6e599f',
             'fill-opacity': 0.75
            },
            'filter': ['in', 'FIPS', '']
  }, 'place-city-sm'); //place polygon under these labels

  
  //action on click to show the polygon and change their color
  map.on('click', function (e) {
   
   //retrieve data from 'dataSource'
   var dataFromSource = map.queryRenderedFeatures(bbox, {layers: ['dataSource'] });


   // Run through the selected features and set a filter
         // to match features with unique FIPS codes to activate
         // the `counties-highlighted` layer.
   var filter = dataSource.reduce(function(memo, dataSource) {
    memo.push(dataSource, properties.FIPS);
    return memo;
   } ['in', 'FIPS'] );
   
   map.setFilter('dataSet-highlighted', filter);
  });


 });
}

Answer 1

我不是 100% 确定你在问什么，但我的解释是，当你将鼠标悬停在某些类型的几何图形上时，你希望专门设置它们的样式，例如 "parks"。您走在正确的道路上，使用 map.queryRenderedFeatures() 非常好。我已经使用相同的 Mapbox Streets 样式组合了一个示例，该样式仅查询 building 图层并在鼠标悬停时查找类型 university。

当交互遇到适当的特征时，它会使用新特征更新源数据，然后更新 school-hover 层。

在这里查看笔：https://codepen.io/mapsam/pen/oemqKb

In a later step I want to collect all polygons of the same feature, i.e. all parks, and display them as highlighted polygons and then export them as a svg file which only consists of the map representations of the feature clicked on.

我不会讨论文件导出，但请记住，从 map.queryRenderedFeatures 返回的所有结果都特定于您正在查询的单个矢量切片，这可能会导致多边形不存在的切片边界问题' 完全包含在您当前的查询中。

看看这个 example where we are highlighting features with similar data，它应该允许您获得所有必要的几何图形并导出到 SVG。

干杯！

MapBox 在点击时绘制要素的多边形

MapBox draw Polygon of Feature on Click

javascript

mapbox