MAPBOX在单击时绘制功能的多边形

Question

所以我的想法对我来说似乎很简单，但是我仍然在挣扎。我要做的是基本上单击地图的任何点，然后在主要功能上绘制多边形，即，如果我单击公园或该特定多边形的建筑物，则显示并突出显示。

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

但是，我没有给它一组Geojson，我希望我的JavaScript选择在 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街道样式组合了一个示例，该样式仅查询building层，并在MouseOver上寻找university。

当互动遇到适当的功能时，它将使用新功能更新源数据，然后更新school-hover层。

在此处查看笔：https：//codepen.io/mapsam/pen/oemqkb

在以后的步骤中，我想收集所有相同功能的多边形，即所有公园，并将其显示为突出显示的多边形，然后将它们导出为SVG文件，该文件仅由单击的功能的地图表示组成。

我不会进入文件导出，但请记住，从map.queryRenderedFeatures返回的所有结果都是特定于您要查询的单个向量瓷砖的，这可能会导致在瓷砖边界上的问题，而您当前查询。

查看此示例，我们在其中突出显示具有相似数据的功能，这应该使您获得所有必要的几何形状并导出到SVG。

欢呼！