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 –