Jquery 如何清理地图上的Mapbox gl数据
我是Mapbox gl的新手，我的代码主要使用我在网上找到的代码片段 到目前为止，我的代码允许您在地图上选择三个点，它将显示 三个标记之间的行驶方向。 用户无法更改他/她选择的标记 我想知道是否有办法通过点击标记上方的关闭按钮来移除标记。如果不可能以这种方式处理，那么有一个按钮来重置标记和方向就足够了 下面是我的代码：Jquery 如何清理地图上的Mapbox gl数据,jquery,mapbox-gl-js,mapbox-gl,Jquery,Mapbox Gl Js,Mapbox Gl,我是Mapbox gl的新手，我的代码主要使用我在网上找到的代码片段 到目前为止，我的代码允许您在地图上选择三个点，它将显示 三个标记之间的行驶方向。 用户无法更改他/她选择的标记 我想知道是否有办法通过点击标记上方的关闭按钮来移除标记。如果不可能以这种方式处理，那么有一个按钮来重置标记和方向就足够了 下面是我的代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title&
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test MapBoxGL</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {
background-image: url('mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGlzaHRhYXIiLCJhIjoiY2psM2lia3oyMTRqcTNqcXkxZHp2cWZ3NiJ9.8KTN3HeYdT8I0Czl2n5JcQ';
var map;
var directions;
var latsAndLngs = '';
// generate map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-2.2423008303912297, 53.476834517811255],
zoom: 10
});
var testVar = '';
var firstMarkerCoordinates = '';
var secondMarkerCoordinates = '';
var thirdMarkerCoordinates = '';
map.on('click', function(e) {
console.log(e.lngLat);
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
var markersQty = $('.marker').length;
if(markersQty < 3)
{
if(markersQty == 0)
{
firstMarkerLng = e.lngLat.lng;
firstMarkerLat = e.lngLat.lat;
firstMarkerCoordinates = (firstMarkerLng +','+firstMarkerLat);
}
//second marker created by click
if(markersQty == 1)
{
secondMarkerLng = e.lngLat.lng;
secondMarkerLat = e.lngLat.lat;
secondMarkerCoordinates = (secondMarkerLng +','+secondMarkerLat);
latsAndLngs = firstMarkerCoordinates+';'+secondMarkerCoordinates;
featuresData = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [firstMarkerLng, firstMarkerLat]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [secondMarkerLng, secondMarkerLat]
}
}];
//getDirectionz();
}
//third marker created by click
if(markersQty == 2)
{
thirdMarkerLng = e.lngLat.lng;
thirdMarkerLat = e.lngLat.lat;
thirdMarkerCoordinates = (thirdMarkerLng +','+thirdMarkerLat);
latsAndLngs = firstMarkerCoordinates+';'+secondMarkerCoordinates+';'+thirdMarkerCoordinates;
featuresData = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [firstMarkerLng, firstMarkerLat]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [secondMarkerLng, secondMarkerLat]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [thirdMarkerLng , thirdMarkerLat]
}
}];
getDirectionz();
}
console.log(latsAndLngs);
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat([e.lngLat.lng, e.lngLat.lat])
.addTo(map);
}
});
// change mouse action on enter / leave in marker
map.on('mouseenter', 'markers', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'markers', function () {
map.getCanvas().style.cursor = '';
});
<!-- map.on('load', () => { -->
<!-- getDirectionz(); -->
<!-- }) -->
function getDirectionz()
{
$.get(`https://api.mapbox.com/directions/v5/mapbox/driving/${latsAndLngs}?access_token=${mapboxgl.accessToken}&geometries=geojson`, data => {
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: data.routes[0].geometry,
},
},
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#ff7e5f',
'line-width': 8,
},
})
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": featuresData
}
});
map.addLayer({
"id": "markers",
"type": "circle",
"source": "markers",
"paint": {
"circle-radius": 7,
"circle-color": "#3bb2d0"
},
});
// center map on markers
var bounds = new mapboxgl.LngLatBounds();
featuresData.forEach(function(feature) {
bounds.extend(feature.geometry.coordinates);
});
map.fitBounds(bounds);
})
}
//map.addControl(directions);
</script>
</body>
</html>
测试MapBoxGL
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.马克{
背景图片：url（'mapbox-icon.png'）；
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
光标：指针；
}
mapboxgl.accessToken='pk.eyj1ijoidglzahrhyxiilcjhijoi2psm2lia3oymtrqctnqcxkzhp2cwz3nij9.8KTN3HeYdT8I0Czl2n5JcQ'；
var映射；
var方向；
var latsAndLngs=“”；
//生成地图
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v10',
中心：[-2.2423008303912297,53.476834517811255]，
缩放：10
});
var testVar=''；
var firstMarkerCoordinates=''；
var secondMarkerCoordinates=''；
var thirdMarkerCoordinates=''；
地图上（'点击'）功能（e）{
控制台日志（e.lngLat）；
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
var markersQty=$（'.marker'）.length；
如果（标记数量<3）
{
如果（标记数量==0）
{
firstMarkerLng=e.lngLat.lng；
firstMarkerLat=e.lngLat.lat；
firstMarkerCoordinates=（FirstMarkerNG+'，'+firstMarkerLat）；
}
//通过单击创建的第二个标记
如果（标记数量==1）
{
第二个标记=e.lngLat.lng；
第二个标记=e.lngLat.lat；
secondMarkerCoordinates=（SecondMarkerNG+'，'+secondMarkerLat）；
latsAndLngs=第一标记坐标+'；'+第二标记坐标；
特征数据=[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[FirstMarkerng，firstMarkerLat]
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[SecondMarkerling，secondMarkerLat]
}
}];
//getDirectionz（）；
}
//通过单击创建的第三个标记
如果（标记数量==2）
{
第三个标记=e.lngLat.lng；
第三标记=e.lngLat.lat；
第三个MarkerCoordinates=（第三个MarkerNG+'，'+thirdMarkerLat）；
latsAndLngs=第一个MarkerCoordinates+'；'+第二个MarkerCoordinates+'；'+第三个MarkerCoordinates；
特征数据=[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[FirstMarkerng，firstMarkerLat]
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[SecondMarkerling，secondMarkerLat]
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[ThirdMarkerling，thirdMarkerLat]
}
}];
getDirectionz（）；
}
控制台日志（latsAndLngs）；
//为每个要素制作一个标记并添加到地图中
新mapboxgl.标记（el）
.setLngLat（[e.lngLat.lng，e.lngLat.lat]）
.addTo（地图）；
}
});
//更改在标记中输入/离开时的鼠标操作
map.on（'mouseenter'，'markers'，function（）{
map.getCanvas（）.style.cursor='pointer'；
});
map.on（'mouseleave'，'markers'，function（）{
map.getCanvas（）.style.cursor=''；
});
函数getDirectionz（）
{
美元(`https://api.mapbox.com/directions/v5/mapbox/driving/${latsAndLngs}？access_令牌=${mapboxgl.accessToken}&Geometrics=geojson`，数据=>{
map.addLayer({
id:'路线'，
键入：“行”，
资料来源：{
键入：“geojson”，
数据：{
键入：“功能”，
属性：{}，
几何图形：数据。路由[0]。几何图形，
},
},
布局：{
“直线连接”：“圆形”，
“线帽”：“圆形”，
},
油漆：{
“线条颜色”：“ff7e5f”，
“线宽”：8，
},
})
map.addSource（“标记”{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“特征”：特征数据
}
});
map.addLayer({
“id”：“标记”，
“类型”：“圆圈”，
“来源”：“标记”，
“油漆”：{
“圆半径”：7，
“圆圈颜色”：“#3bb2d0”
},
});
//标记上的中心地图
var bounds=new mapboxgl.LngLatBounds（）；
featuresData.forEach（功能（feature）{
扩展（特征、几何、坐标）；
});
映射边界（bounds）；
})
}
//地图添加控制（方向）；
提前谢谢。是的，你可以。只需按下一个数组中的所有标记，然后您就可以删除任何事件上的标记，如单击按钮或任何事件。 例如：- //初始化并按下标记
var selectedMarker = [];
var marker = new mapboxgl.Marker(image)
.setLngLat(coordinates)
.addTo(map);
selectedMarker.push(marker);
if (selectedMarker!==null) {
for (var i = selectedMarker.length - 1; i >= 0; i--) {
selectedMarker[i].remove();
}
}
以下是刷新或清理mapbox gl地图的方法：
document.getElementById("map").innerHTML = "";