0
所以我的想法看起来很直截了当，但我仍然努力。我想要做的事情基本上是点击我的地图上的任意一点，然后在主要特征上绘制一个多边形，即，如果我点击了公园或建筑物，则会显示并突出显示特定的多边形。MapBox点击特征的多边形
我用了很多这样的代码：的https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/
但不是给它一组以GeoJSON我想我的JavaScript来选择需要GeoJSON的数据上mousover（eventhough我不知道是否在工作一般）。现在我的代码片断编译但没有显示任何内容。
在后面的步骤中，我想要收集同一特征（即所有公园）的所有多边形，并将它们显示为突出显示的多边形，然后将它们导出为仅包含点击该特征的地图表示的svg文件。也许有人也有这样的想法？
谢谢:)方面
这是我的javascript截至目前：
//Set AccessToken from MapBox
mapboxgl.accessToken = 'pk.eyJ1IjoidG1pbGRuZXIiLCJhIjoiY2o1NmlmNWVnMG5rNzMzcjB5bnV3YTlnbiJ9.r0BCga0qhRaHh0CnDdcGBQ';
//Setup starting view point at Uni-Bremen campus
var map = new mapboxgl.Map({
\t 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() {
\t //set boundary box as 5px rectangle area around clicked point
\t var bbox = [[e.point.x - 5, e.point.y - 5], [e.pont.x + 5, e.point.y + 5]];
\t //set the data on pointer using the bbox
\t var data = map.queryRenderedFeatures(bbox);
\t map.on('load', function() {
\t \t
\t \t var dataSource = 'school';
\t \t //set school to the feature and use 'setJsonData' as data source.
\t \t map.addSource(dataSource, {
\t \t \t 'type': 'geojson',
\t \t \t 'data': data
\t \t });
\t \t //adding a new layer for the general display
\t \t map.addLayer({
\t \t \t 'id': 'dataSet',
\t \t \t 'type': 'fill',
\t \t \t 'source': dataSource,
\t \t \t 'source-layer': 'original',
\t \t \t 'paint': {
\t \t \t \t 'fill-outline-color': 'rgba(0,0,0,0.1)',
\t \t \t \t 'fill-color': 'rgba(0,0,0,0.1)'
\t \t \t }
\t \t }, 'place-city-sm'); //place polygon under these labels
\t \t
\t \t //adding a new layer for the polygon to be drawn
\t \t map.addLeyer({
\t \t \t 'id': 'dataSet-highlighted',
\t \t \t 'type': 'fill',
\t \t \t 'source': dataSource,
\t \t \t 'source-layer': 'original',
\t \t \t 'paint': {
\t 'fill-outline-color': '#484896',
\t \t 'fill-color': '#6e599f',
\t 'fill-opacity': 0.75
},
'filter': ['in', 'FIPS', '']
\t \t }, 'place-city-sm'); //place polygon under these labels
\t \t
\t \t //action on click to show the polygon and change their color
\t \t map.on('click', function (e) {
\t \t \t
\t \t \t //retrieve data from 'dataSource'
\t \t \t var dataFromSource = map.queryRenderedFeatures(bbox, {layers: ['dataSource'] });
\t \t \t // Run through the selected features and set a filter
\t // to match features with unique FIPS codes to activate
\t \t // the `counties-highlighted` layer.
\t \t \t var filter = dataSource.reduce(function(memo, dataSource) {
\t \t \t \t memo.push(dataSource, properties.FIPS);
\t \t \t \t return memo;
\t \t \t } ['in', 'FIPS']);
\t \t \t
\t \t \t map.setFilter('dataSet-highlighted', filter);
\t \t });
\t });
}
我只是要添加我为此创建的codepen，可能有助于查看我做了什么 - > https://codepen.io/callmethomas/pen/RZqXzv –