Question

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

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

但是我没有给它一套geojson，而是希望我的javascript在 mousover 上选择所需的geojson数据（尽管我不确定这是否有效）。现在我的代码剪切编译但没有显示任何内容。

在后面的步骤中，我想收集相同特征的所有多边形，即所有公园，并将它们显示为突出显示的多边形，然后将它们导出为svg文件，该文件仅包含所单击特征的地图表示。也许有人也有这个想法吗？

谢谢：）

这是我现在的javascript：

＆＃13;

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

＆＃13;

Answer 1

我并不是100％确定你要问的是什么，但我的解释是，当你将鼠标悬停在它们上面时，你想要专门设计某些类型的几何图形，例如＆＃34;公园＆＃34 ;.您正走在正确的道路上，使用map.queryRenderedFeatures()非常棒。我使用相同的Mapbox Streets样式组合了一个示例，该样式仅查询building图层并在鼠标悬停时查找类型university。

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

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

在后面的步骤中，我想收集相同特征的所有多边形，即所有公园，并将它们显示为突出显示的多边形，然后将它们导出为svg文件，该文件仅包含所单击特征的地图表示。

我不会进入文件导出，但只记得从map.queryRenderedFeatures返回的所有结果都特定于您要查询的单个矢量图块，这可能会导致多边形不在的图块边界出现问题完全由您当前的查询覆盖。

查看此example where we are highlighting features with similar data，这样可以获得所有必需的几何图形并导出到SVG。

干杯！

MapBox在点击时绘制特征的多边形

1 个答案: