GeoJson LineString在Mapbox地图中第一次点击后只加载一次

我想在已加载的点和右击标记点之间添加行。我已经提到了Mapbox的例子，并且已经到了这个阶段。我只有一条线，我第一次执行操作。我需要每个操作的行。是操作的顺序如下：GeoJson LineString在Mapbox地图中第一次点击后只加载一次

上加载点（点从GeoJSON的加载）左键点击
右键点击地图上的任意位置。这应该在右键单击点创建一个标记，并将其与之前离开点的点相连接。

我希望得到一些帮助。这是我在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>

来源

2017-10-17 Subham Banerjee

P.S：浏览器控制台提供以下内容：错误：已有一个具有此ID的源 –

而是重新创建一个新层&每个用户添加标记的时间源，您应该创建线层及其源一次，然后只更新基础数据：

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>

我简化了你的代码片段，但你应该明白它的要点。

来源

2017-10-17 12:16:33 Scarysize

谢谢！是的，这看起来很整齐。我可以显示直到最后一次右键单击生成的所有行吗？在这里，相同ID的错误得到解决，但我可以看到加入最后一对点的线。如果可能的话，我希望看到所有行生成直到最后一次点击右键。 @Scarysize –

您可以将附加的坐标添加到您正在创建的LineString几何图形，它只需要至少有两个坐标。 – Scarysize

我将坐标添加到LineString，就像这个坐标：[truthArray [i]，obsArray [i]]，其中这两个数组是存储左右点的坐标的数组，并且我遍历了真数组的大小。但是，我没有得到我想要的结果。我应该以不同的方式添加它们，以显示左右点之间的所有线条吗？ @Scarysize –

GeoJson LineString在Mapbox地图中第一次点击后只加载一次

回答

相关问题