首次單擊Mapbox Map后，GeoJson LineString僅加載一次

Question

我想在已經加載的點和右鍵單擊標記點之間添加線條。 我已經提到了Mapbox的例子，直到這個階段。 我第一次執行操作時只得到一行。 我想要每個操作的行。 操作順序如下：

左鍵單擊加載點（從geojson加載的點）
右鍵單擊地圖上的任意位置 這應該在右鍵單擊點處創建一個標記，並將其與先前左側的clciked點連接。

我將不勝感激。 這是我在SO的第一篇文章。 請原諒我的任何錯誤。 先感謝您。

 mapboxgl.accessToken = 'pk.eyJ1Ijoic3ViaGFtYmFuc3BocyIsImEiOiJjajc4czNxazEyaWE5MnFwaWllNzdwdDdkIn0.6AZVCVM-wGgh5cykoII9kA'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v9', center: [-80.486052, 37.830348], // starting position zoom: 5 // starting zoom }); map.on('load', () => { map.addSource("earthquakes", { type: "geojson", data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson" }); map.addLayer({ id: "markers", type: "circle", source: "earthquakes", paint: { "circle-color": "#11b4da", "circle-radius": 4, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); }); map.on('mouseenter', 'markers', () => { map.getCanvas().style.cursor = 'pointer' }); map.on('mouseleave', 'markers', () => { map.getCanvas().style.cursor = 'crosshair' }); let ground let obs map.on('contextmenu', (f) => { ground = [f.lngLat.lng, f.lngLat.lat] var geojson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": f.lngLat } }] }; // add markers to map geojson.features.forEach(function(marker) { // create a DOM element for the marker var el = document.createElement('div'); el.className = 'marker'; el.addEventListener('click', function() { window.alert(f.lngLat); }) new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .addTo(map); map.addLayer({ "id": "route", "type": "line", "source": { "type": "geojson", "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ ground, obs ] } }, ] } }, "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#888", "line-width": 3, "line-dasharray": [0.1, 1.8] } }); }); }) map.on('click', 'markers', (e) => { obs = [e.lngLat.lng, e.lngLat.lat] });

 body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .marker { display: block; border: none; border-radius: 50%; cursor: pointer; padding: 0; background-color: rgba(5, 4, 244, 0.82); height: 10px; width: 10px }

 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id='map'></div> </body> </html>

Answer 1

每次用戶添加標記時，您應該創建線圖層及其源，然后只更新基礎數據，而不是重新創建新圖層和源圖層：

 mapboxgl.accessToken = 'pk.eyJ1Ijoic3ViaGFtYmFuc3BocyIsImEiOiJjajc4czNxazEyaWE5MnFwaWllNzdwdDdkIn0.6AZVCVM-wGgh5cykoII9kA'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v9', center: [-80.486052, 37.830348], // starting position zoom: 5 // starting zoom }); map.on('load', () => { map.addSource("earthquakes", { type: "geojson", data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson" }); map.addLayer({ id: "markers", type: "circle", source: "earthquakes", paint: { "circle-color": "#11b4da", "circle-radius": 4, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); map.addSource('line-source', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } }); map.addLayer({ type: 'line', source: 'line-source', id: 'line-layer' }); }); map.on('mouseenter', 'markers', () => { map.getCanvas().style.cursor = 'pointer' }); map.on('mouseleave', 'markers', () => { map.getCanvas().style.cursor = 'crosshair' }); let ground; let obs; map.on('contextmenu', (f) => { ground = [f.lngLat.lng, f.lngLat.lat]; map.getSource('line-source').setData({ type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: [ground, obs] } }] }) }); map.on('click', 'markers', (e) => { obs = [e.lngLat.lng, e.lngLat.lat]; });

 body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .marker { display: block; border: none; border-radius: 50%; cursor: pointer; padding: 0; background-color: rgba(5, 4, 244, 0.82); height: 10px; width: 10px }

 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id='map'></div> </body> </html>

我簡化了你的片段，但你應該得到它的要點。

首次單擊Mapbox Map后，GeoJson LineString僅加載一次

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-17 12:16:33

首次單擊Mapbox Map后，GeoJson LineString僅加載一次

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-17 12:16:33

解決方案1
1 已采納 2017-10-17 12:16:33