0
私の考えはかなりまっすぐ進むように見えるが、それでも私は苦労している。私がしたいことは、基本的に地図の任意のポイントをクリックして、メインフィーチャーにポリゴンを描くことです。パークや建物をクリックすると、特定のポリゴンが表示され強調表示されます。MapBox描画のポリゴンクリックで
私はこのコードの多くを使用：https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/
しかし、代わりにそれを私はJavaScriptをmousover上の必要にGeoJSONデータを選択するに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({
\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 –