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>
而是重新创建一个新层&每个用户添加标记的时间源,您应该创建线层及其源一次,然后只更新基础数据:
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>
我简化了你的代码片段,但你应该明白它的要点。
谢谢!是的,这看起来很整齐。我可以显示直到最后一次右键单击生成的所有行吗?在这里,相同ID的错误得到解决,但我可以看到加入最后一对点的线。如果可能的话,我希望看到所有行生成直到最后一次点击右键。 @Scarysize –
您可以将附加的坐标添加到您正在创建的LineString几何图形,它只需要至少有两个坐标。 – Scarysize
我将坐标添加到LineString,就像这个坐标:[truthArray [i],obsArray [i]],其中这两个数组是存储左右点的坐标的数组,并且我遍历了真数组的大小。但是,我没有得到我想要的结果。我应该以不同的方式添加它们,以显示左右点之间的所有线条吗? @Scarysize –
P.S:浏览器控制台提供以下内容:错误:已有一个具有此ID的源 –