我有一个系统,每个单独的坐标将有各自的图标。
最初,我尝试了以下操作来添加带有单个图标图像的标记,并且它可以正常工作。但是我意识到尽管位置发生了变化,但以前创建的标记坐标仍然存在。示例A在X的10.10PM。晚上10:20,A移至Y。地图创建了一个新标记,而不是覆盖旧标记。
var geojsonurl = '****.php';
var geojson;
var x = function (){
$.ajax({
url: geojsonurl,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
geojson = data;
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(http://****images/avatars/' + marker.properties.imagename+ '.png';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
}, error: function () {
}
});
};
我也尝试使用以下方法解决了上面代码中遇到的问题。但是现在我只能检索相应的Icon图像和必要的信息(例如弹出窗口等)
var url = '****.php';
map.on('load', function () {
window.setInterval(function() {
map.getSource('drone').setData(url);
}, 2000);
map.addSource('drone', { type: 'geojson', data: url });
map.addLayer({
"id": "drone",
"type": "symbol",
"source": "drone",
"layout": {
"icon-image":
}
});
});
答案 0 :(得分:0)
您需要确定要使用标记层还是符号层。标记的外观更加灵活,使您可以完全访问HTML,因此可以轻松显示所需的任何图像。符号层更容易直接链接到数据,并且与其他层更好地交互(例如,隐藏而不是相互冲突)。
现在让我们来谈谈标记。第一种方法的问题在于,您每次都创建新标记,而不是删除或更新旧标记。如果要更新它们,则需要先存储它们:
var geojson;
var markers = [];
// ...
geojson.features.forEach(function(marker, markerIndex) {
// Check if we have made this marker before
var marker = markers[markerIndex];
var el = marker && marker.getElement();
if (!el) {
// create a DOM element for the marker
el = document.createElement('div');
el.addEventListener('click', function() {
// we refer to geojson.features[] rather than this particular marker, so it will update properly when the data changes
window.alert(geojson.features[markerIndex].properties.message);
});
// add marker to map
markers[markerIndex] = new mapboxgl.Marker(el);
marker
.setLngLat(marker.geometry.coordinates)
.addTo(map);
}
// Either update existing marker, or set up new one, it's the same.
el.className = 'marker';
el.style.backgroundImage = 'url(http://****images/avatars/' + marker.properties.imagename+ '.png';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
marker.setLngLat(marker.geometry.coordinates);
// ....
如果使用符号图层,则可能更简单。您只需要在开始时加载一次自定义图像:
map.loadImage('image1', 'http://****images/avatars/image1.png';
然后:
map.addLayer({
"id": "drone",
"type": "symbol",
"source": "drone",
"layout": {
"icon-image": "image1"
}
});